This is a submission for the KendoReact Free Components Challenge.
What I Built
Cosmoscope is an interactive space-themed web application that brings astronomy concepts to life.
I built it as a full-stack project with a focus on education, interactivity, and clean UI/UX.
Demo
Frontend URL:https://classy-buttercream-310228.netlify.app/
Github:https://github.com/revansh1710/k-2001
Cosmoscope is designed as a single-page dashboard with a space-inspired aesthetic.
It integrates data visualization, orbit simulation, astronomy APIs, and Strapi-powered content.
The project has two major parts:
Frontend: React + Vite + KendoReact UI + TailwindCSS
Backend: Strapi (deployed to Strapi Cloud) with PostgreSQL
Deployed on:
Frontend: Netlify
Backend: Strapi Cloud
KendoReact Components Used
TabStrip – main navigation between tabs (Orbits, Planets, NASA Photo, Quiz, ISRO, etc.)
TabStripTab – individual tab content holders inside TabStrip
AppBar – for the top header/navigation bar with branding and logout button
Card – used extensively for dashboard panels (controls panel, quick actions, selected planet info, etc.)
TileLayout – used for rearrangeable tiles in the sidebar (Mission panel, info, etc.)
ExpansionPanel – collapsible panel for extra information sections in sidebar
📊 Data Display
Grid – tabular display for Planets and (previously) Missions
GridColumn – defines each column in the Grid (planet name, radius, orbit, etc.)
GridNoRecords – displays a message when there’s no data or filtered list is empty
🖱 Inputs & Editors
DatePicker – to pick epoch date for orbit simulation
DropDownList – quick selection of planets in the sidebar
AutoComplete – search box for filtering planets
Slider – controls the orbit animation (playback slider)
ProgressBar – shows orbit simulation progress in percentage
MaskedTextBox – for coordinate input field
Button – Kendo-styled buttons used in dialogs and actions
✨ Key Features
🔑 User Authentication
Custom authentication system (not using Strapi’s default plugin).
Register / Login pages with beautiful galaxy backgrounds and smooth UX.
Tokens stored securely in localStorage for API calls.
🪐 Dashboard with TabStrip Navigation
The dashboard is the heart of Cosmoscope. It uses a KendoReact TabStrip to organize content:
Orbits Tab
Orbit Visualization:
A custom SVG-based orbit map that animates planets around the sun.
Planet Data Grid:
A powerful KendoReact Grid showing:
name
radius_km
orbit_radius_km
gravity_m_s2
density_kg_m3
Bar Chart:
Uses recharts to visualize planet radii.
Interactive Controls:
Epoch date picker, slider to control orbit playback, quick planet search, and progress indicator.
Details Tab
Card-based gallery of all planets with descriptions.
NASA Photo Tab
Integrates NASA’s Astronomy Picture of the Day (APOD) API.
Fetches and displays the daily featured space image with explanation.
🖥️ Responsive & Polished UI/UX
A dark, nebula-inspired theme with starry backgrounds.
Clean panels, cards, sliders, and charts that feel “cosmic” yet remain functional.
Side controls panel with:
Orbit playback slider
Planet quick-select
Notification button
Progress indicator
Integrated logout button in the sticky top AppBar.
🔭 Tech Stack
Layer Technology
Frontend React (Vite), KendoReact, TailwindCSS, recharts
Backend Strapi (Cloud deployment), PostgreSQL
APIs NASA APOD
Auth Custom JWT-based auth stored in localStorage
Deployment Frontend: Netlify · Backend: Strapi Cloud
⚙️ Development Journey
✅ Set up custom register/login endpoints in Strapi.
✅ Implemented secure JWT auth and protected dashboard routes.
✅ Built animated orbit visualization with SVG and slider-controlled playback.
✅ Integrated KendoReact Grid for tabular planet data with sorting, paging, and search.
✅ Connected to NASA APOD for dynamic space imagery.
✅ Deployed Strapi to Strapi Cloud and frontend to Netlify.
Top comments (0)