Goal: Cover React, TypeScript, Redux, Tailwind, MUI, Figma, FastAPI, Node/Express, Databases, and Testing in 20 intensive days.
⚠️ This is a crash roadmap focused on practical skills + projects, not deep theory.
- 1.1 How the Web Works (HTTP, DNS, Browsers)
- 1.2 Client vs Server Architecture
- 1.3 Git & GitHub Basics
- 1.4 VS Code Setup & Extensions
- 1.5 NPM, Node.js Basics
- Mini Task: GitHub repo + first commit
- 2.1 Semantic HTML
- 2.2 Forms & Inputs
- 2.3 Accessibility Basics
- 2.4 Media Elements
- Mini Project: Responsive Form Page
- 3.1 Box Model & Positioning
- 3.2 Flexbox
- 3.3 Grid Layout
- 3.4 Media Queries
- Mini Project: Responsive Landing Page
- 4.1 Tailwind Setup & Utilities
- 4.2 Responsive & Dark Mode
- 4.3 Tailwind Components
- 4.4 Material UI Basics
- Mini Project: Auth Pages (Login / Signup)
- 5.1 Design Principles
- 5.2 Components & Auto Layout
- 5.3 Design → Code Workflow
- Task: Design dashboard UI in Figma
- 6.1 Variables, Data Types
- 6.2 Functions & Scope
- 6.3 Arrays & Objects
- 6.4 Loops & Conditions
- Mini Project: To-Do App (Vanilla JS)
- 7.1 Closures & Hoisting
- 7.2 Promises & Async/Await
- 7.3 Fetch API
- 7.4 Error Handling
- Mini Project: Weather App (API)
- 8.1 Type System & Interfaces
- 8.2 Generics & Utility Types
- 8.3 TS with React
- Task: Convert JS app to TypeScript
- 9.1 Components & JSX
- 9.2 Props & State
- 9.3 Event Handling
- 9.4 Conditional Rendering
- Mini Project: Notes App
- 10.1 useState & useEffect
- 10.2 Controlled Forms
- 10.3 useRef & useMemo
- Mini Project: Form Validation App
- 11.1 Redux Principles
- 11.2 Redux Toolkit
- 11.3 Async Thunks
- Mini Project: Cart Management System
- 12.1 Jest Basics
- 12.2 React Testing Library
- 12.3 Component & Hook Testing
- Task: Test React Components
- 13.1 Python for Web
- 13.2 Virtual Environments
- 13.3 REST Concepts
- 14.1 FastAPI Setup
- 14.2 Routes & Schemas
- 14.3 Dependency Injection
- 14.4 JWT Authentication
- Mini Project: User Auth API
- 15.1 SQL Basics (MySQL / PostgreSQL)
- 15.2 ORM (SQLAlchemy)
- 15.3 MongoDB Basics
- Task: CRUD APIs with DB
- 16.1 Node.js Runtime
- 16.2 Express Routing
- 16.3 Middleware
- 16.4 RESTful APIs
- Mini Project: Blog API
- 17.1 Pytest
- 17.2 API Testing
- 17.3 Test Coverage
- 18.1 React + FastAPI Integration
- 18.2 Auth Flow
- 18.3 Environment Variables
-
Full Stack App:
- React + Redux + Tailwind
- FastAPI / Express Backend
- SQL / MongoDB
- Auth + CRUD
- 20.1 Frontend Deployment
- 20.2 Backend Deployment
- 20.3 System Design Basics
- 20.4 Resume + GitHub Polish
- What happens when you type a URL in the browser?
- Difference between HTTP and HTTPS?
- What is Git? Git vs GitHub?
- What is NPM?
- What are semantic HTML elements?
- Difference between div and section?
- What is accessibility (a11y)?
- What are form validations?
- Box model explanation
- Flexbox vs Grid
- How does responsive design work?
- What are media queries?
- What is utility-first CSS?
- Pros and cons of Tailwind
- How is MUI different from Tailwind?
- How do you handle responsiveness?
- What is a design system?
- What is Auto Layout in Figma?
- How do developers use Figma files?
- Difference between var, let, const
- What are data types in JS?
- Difference between == and ===
- What are arrays and objects?
- What is a closure?
- Explain async/await
- What is the event loop?
- Promise vs callback
- Why TypeScript?
- Interface vs type
- What are generics?
- Benefits of TypeScript in React
- What is React?
- What are components?
- Props vs state
- What is JSX?
- What is useState?
- What is useEffect?
- Controlled vs uncontrolled components
- Why hooks?
- What problem does Redux solve?
- Redux vs Context API
- What is Redux Toolkit?
- What are reducers?
- What is Jest?
- What is React Testing Library?
- Unit test vs integration test
- What is REST?
- What is an API?
- HTTP methods and status codes
- Why FastAPI?
- What is Pydantic?
- What is dependency injection?
- How does JWT auth work?
- SQL vs NoSQL
- What is a primary key?
- What is indexing?
- What is ORM?
- What is Node.js?
- What is middleware?
- Express vs FastAPI
- What is Pytest?
- How do you test APIs?
- What is test coverage?
- How frontend talks to backend?
- What is CORS?
- How authentication works end-to-end?
- Explain your project architecture
- How did you handle state?
- How did you secure APIs?
- What is CI/CD?
- Frontend vs backend deployment
- Monolith vs microservices
✔ 1 Capstone Project ✔ 6–8 Mini Projects ✔ Frontend + Backend + Testing ✔ Interview-Ready Full Stack Profile