Space Mission
Learning JavaScript, React.js, and Redux takes us on a cosmic mission. Explore outer space as a member of an astronaut team.
What you'll learn
Main projects
During the course you will build real projects that you can add to your portfolio
Mission Control Panel
Mission control dashboard with real-time updates and charts
Crew Management System
CRUD application for crew management with authentication
Space Explorer
Application for exploring the cosmos with NASA API
Course program
14 modules full of interactive exercises and practical projects
Mission Start
Tutorial
Introduction to the space mission
12 exercises
Landing on Mars
JavaScript Basics
Variables, functions, objects
20 exercises
New Reality
React.js Basics
Components, JSX, props
25 exercises
User Interface
Creating UI
Building user interfaces in React
22 exercises
Connectivity Issues
Interactivity and State
State, Events, Hooks - useState, useEffect
28 exercises
- Lifecycle and Effects
- Synchronization with External Systems
- API Handling and Data Fetching
- Cleaning Up Effects
- References with useRef
- Performance Optimization with useEffect
- Custom Hooks for Effects
- Advanced Effects — Race Conditions and Debouncing
- Memoization - React.memo, useMemo, and useCallback
- Review: useRef Hook - References and Values Between Renders
- Review: Advanced Custom Hooks - Patterns and Composition
Advanced Systems
Advanced React
Context API, Custom Hooks, Optimization
30 exercises
- React Router - Cosmic Navigation
- Routing configuration in space applications
- URL Parameters in cosmic navigation
- Nested paths in intergalactic navigation
- Programmatic navigation in space travel
- Securing paths in the space station
- Redirects in cosmic navigation
- Lazy loading components on a space journey
- Passing state through locations
- Browser history management on a space journey
- Complete routing architecture - Navigation Command Center
A Different Perspective
State Management
Redux - store, actions, reducers
25 exercises
- Styling Basics in React
- Introduction: Styled Components
- Sass (SCSS) - Cosmic Syntactic Superpower
- Introduction: Tailwind CSS
- Introduction: UI Component Frameworks
- Building Custom Design Systems - Visual Architecture of the Cosmic Future
- React Transition Group - Animating Interstellar UI Journeys
- CSS Animations and Keyframes in React
- Project: Cosmic Mission Control Panel
Journey to Orbiter
React Router
Navigation, routing, parameters
20 exercises
- Advanced React Patterns
- Introduction: HOC, Render Props and Compound Components
- Concurrent Mode and Suspense
- Code splitting
- Adapter and Facade Pattern
- Accessibility (a11y) in React
- Performance Profiling
- Building a Production Application and Deployment on Vercel
- Main Project: Building a Production Application
Database Communication
Asynchronicity and API
Fetch, Axios, async/await, REST API
28 exercises
- useTransition - non-blocking UI updates
- useFormStatus and useActionState
- useId - unique identifiers for accessibility
- use - a universal hook for Promise and Context
- useDeferredValue - deferred values for performance
- List Virtualization and Windowing
- useOptimistic - optimistic UI updates
- Project: Advanced React 18+ Application
Ship Styling
Application Styling
CSS Modules, Styled Components, Tailwind
20 exercises
- React Portals
- React-i18next - Internationalization in React
- Comprehensive Security Practices in React
- Apollo Client - Comprehensive GraphQL Integration with React
- WebSockets and Server-Sent Events in React
- Web Workers in React
- React Compiler (React Forget)
- Streaming SSR and Edge Runtime
- React Server Components (RSC) - The Future of React
- Micro-frontends with React - Scalable Architecture
- React Query / TanStack Query - Server State Management
- React 19 - ref without forwardRef
- React 19.2 - Partial Pre-rendering (PPR)
- Main Project: Space Mission Command Center
Quality Control
Testing
Jest, React Testing Library, E2E
15 exercises
Flight Optimization
Performance
React.memo, useMemo, useCallback, Code Splitting
12 exercises
- Star Maps - Why TypeScript with React
- Typing Functional Components
- Typing Props - Interfaces and Optional Properties
- Typing useState and useRef
- Typing Events - ChangeEvent, FormEvent, MouseEvent
- Generic Components - Universal Navigation Systems
- Discriminated Unions - Component Variants
- Typing Context API and useReducer
- Main Project: Typed Space Dashboard
External Integrations
External Services
Firebase, Auth0, Stripe, Analytics
10 exercises
- React Testing - Pre-Launch Safety Check
- Jest - The Rocket Engine of Tests
- React Testing Library - Mission Control Panel
- Testing User Interactions
- Testing Asynchronous Components
- Mocking Modules and APIs
- Testing Hooks - System Diagnostics
- Snapshot Testing - Constellation Photograph
- Main Project: Space Mission Control Center
Journey into the Unknown
Deployment
Vercel, Netlify, CI/CD, Production build
8 exercises
- CSS Variables and Dynamic Themes in React
- CSS Modules - Isolated Component Styles
- Zero-runtime CSS-in-JS: vanilla-extract, Linaria, Panda CSS
- Theming in styled-components - ThemeProvider
- Responsive Design Patterns in React
- Comparing Styling Approaches in React
- CSS-in-JS: Emotion and vanilla-extract
- Design Tokens and Systematic CSS
- Main Project: Space Dashboard with Different Approaches
- Composition vs Inheritance in React
- Container/Presentational Pattern
- Headless Components in React
- Inversion of Control in React
- Feature Flags and A/B Testing in React
- Event-Driven Architecture in React
- Atomic Design in React
- Advanced Patterns: Provider and State Machines
- Final Project: Space Station Architecture
- Introduction to Error Handling in React
- Error Boundaries - Error Boundaries
- react-error-boundary - A Modern Library
- Error Handling in Forms
- Error Logging and Monitoring
- Fallback UI and Skeleton Loaders
- Graceful Degradation and Resilient UI
- Advanced Error Handling Patterns
- Main Project: Resilient Space Dashboard
Course theme
Spaceships and Galaxies
Each module is set in a unique theme that makes learning an adventure.
Your guide
Ra
Space Guide
Will guide you through all challenges and help you gain new skills.
Start learning JavaScript today
Join CodeWorlds and discover modern learning methods that make programming fascinating and accessible to everyone.