Spacehub - web application for tracking space launches and accessing real-time information about astronauts, space agencies, and spacecraft.
The project strictly adheres to Feature-Sliced Design (FSD) architecture principles and includes advanced performance tweaks like automatic image asset optimization pipelines.
The project was developed with support for Git conventions.
- Deployed App: Link to Vercel
- Design Core: UI/UX concept inspired by Figma Community
- Data Source: Powered by LaunchLibrary API & Spaceflight News API
- Mission Control Hub: A centralized dashboard featuring a live mission countdown clock, detailed launch parameters, and a real-time spaceflight news aggregator.
- Unified Entity Directories: High-performance, multi-column registries for launches, spacecrafts, astronauts, and space agencies. Features comprehensive biographical and technical profiles driven by strict TypeScript mapping layers.
- Advanced Filter & Search Engine: Fluid client-side content filtering utilizing status pills, dropdown sorting, and search inputs optimized with custom debounce hooks.
- Detailed Media Analytics: Dedicated, media-centric profile views embedding responsive video streaming players, unified mission badges, and dependent metadata grids.
- Asset Optimization Pipeline: Built-in automatic image compressions via vite-plugin-image-optimizer relying on sharp and svgo node runtimes to ensure minimal bundle footprints and fast image loading times.
- Skeleton States: Zero layout shifts (CLS) achieved through custom layout placeholders utilizing react-loading-skeleton.
The codebase relies strictly on a production-ready, ultra-modern tech stack:
- Core Architecture: React 19 (Strict Mode enabled), TypeScript ~6.0 for comprehensive static type-safety, and Vite 8+ serving as an ultra-fast ESM build pipeline.
- State & Data Management: Redux Toolkit 2.12 and React Redux 9.3 structured with isolated feature slices. Async data hydration, automated request caching, and complex server response filtering are fully driven by RTK Query (transformResponse data mappers).
- Client-Side Routing: React Router DOM 7.16 mapping dynamic parameters for entity indices, utilizing nested layouts with
<Outlet/>wrappers, and leveraging localized error handling tree hooks. - Design System & Styling: Tailwind CSS v4, built with utility composition utilities (clsx + tailwind-merge) to guarantee robust, conflict-free dynamic styling across components.
- Runtime Data Validation: Zod 4.4.3 (Type-safe schema validation, API response parsing, runtime data contracts, and automatic TypeScript type inference).
- Asynchronous UI & Skeletal States: React-loading-skeleton 3.5 deployed to manage fluid content layout shifts during active widget and dashboard query polling states.
- Asset & Bundler Optimization: Integrated build plugins featuring vite-plugin-image-optimizer 2.0 (powered by lossy sharp and svgo compressions) and vite-plugin-svgr 5.2 for converting inline vector layouts into declarative React SVG components.
- Linter & Code Hygiene: Rigid ESLint 10 standards unified with Prettier 3.8 and prettier-plugin-tailwindcss to automate class ordering scripts and enforce high-quality styling maintainability.
The directory hierarchy follows exact FSD slice abstractions ensuring bulletproof maintainability:
1_app/- The global bootstrap layer initialized in main.tsx and App.tsx. Manages central layout wrappers, application-wide Redux store hydration, Global CSS variables/styles setup, and root routing configurations.2_pages/- Composite full-view components that register independent application routes. Orchestrates macro layouts ranging from entity summaries (home-page, launches-list-page, spacecrafts-list-page) to granular insight templates (details-launch-page, details-agency-page), alongside dedicated routing exception shields like error-boundary-page.3_widgets/- Complex semantic page modules that combine independent slices into unified structural layout bands. Composes core UI frames like header-widget and footer-widget, comprehensive collections like launch-list-widget or article-list-widget, and localized operational matrices like content-filter-widget.4_features/- Encapsulated user-interactive visual actions that execute highly specific business operations. Powers operational interactions including real-time dynamic countdown triggers (launch-timer), index search mechanisms (search-by-name), and routing context controls (change-page).5_entities/- Distinct domain-specific business models providing unified, reusable UI components and slice schemas. Governs individual core space concepts including agency, astronaut, launch, news, and spacecraft (each shipping strict type contracts, localized UI like agency-details-card, and API definitions).6_shared/- Fully decoupled, abstract architectural infrastructure layer completely independent of business rules. Exports global base clients (baseSpaceDevsApi.ts, baseNewsApi.ts), multi-device asset maps (fonts, icons), global constant configurations, custom helper hooks (redux, api, ui), and foundational utility UI building blocks.
- Clone the project locally:
git clone https://github.com/tin0x/spacehub-tracker.git- Boot into the source directory and pull production dependencies:
cd spacehub-tracker
npm install- Fire up Vite local dev environment:
npm run dev- Run strict static type checks and compile production-ready assets:
npm run build- Run ESLint validation checks to ensure strict architectural formatting guidelines:
npm run lint