This roadmap was heavily inspired by WebDevSimplified's Frontend & Backend Roadmaps, the Next.js Documentation, and the React Reference.
Other Sources: MDN Docs, w3schools, YouTube.
All of these were essential to making this roadmap possible.
It is recommended to follow this roadmap step-by-step.
For problems, recommended resources, or other requests, please refer to this github repo (a star would also be very appreciated) or send an email to [email protected].
Additional Resources:
- w3schools
- React Reference
- Next.js Documentation
- WebDevSimplified
- General
- HTML
- CSS
- JavaScript
- Async vs Defer Script Loading
- Var vs Let vs Const
- Function Basics: Video
- Callbacks
- Arrow Functions
- Hoisting
- Scoping: Article
- Closures: Video
- Strict Equality
- Objects: Video
- Arrays: Video
- Reference Vs Value
- DOM Traversal: Video
- DOM Manipulation: Video
- Event Listeners
- Control Flow
- Promises
- Async Await
- Fetch
- Browser Storage
- Event Loop
- Modules
- Null Vs Undefined
- Recursion
- Bundlers
- Parcel: Video
- Array Methods
- Template Literals
- Basics: Video
- Advanced: Advanced Video
- Article
- Destructuring /Spread Operator
- React
- Component Model: Video
- JSX Documentation
- Props: Video
- Event Handlers: Documentation
- Lists: Documentation
- Conditional Rendering: Documentation
- Portal
- Hooks
- React
- Callback (useCallback)
- Context (useContext)
- Video
- Article
- useContext: Documentation
- createContext: Documentation
- Effect (useEffect)
- Documentation
- Video
- Article
- Best Practices: Article
- ID (useId): Documentation
- Layout Effect (useLayoutEffect)
- Memoization
- useMemo: Documentation
- memo: Documentation
- Reducer (useReducer)
- Ref (useRef)
- Video
- Article
- useRef: Documentation
- forwardRef: Documentation
- State (useState)
- Custom Hooks
- React
- Components
- React
- Fragment
- Suspense: Documentation
- React DOM
- Input: Documentation
- Option: Documentation
- Progress: Documentation
- Select: Documentation
- Textarea: Documentation
- React
- APIs
- React
- lazy: Documentation
- startTransition: Documentation
- React DOM
- createPortal: Documentation
- React
- Rules
- Components and Hooks must be Pure: Documentation
- React calls Components and Hooks: Documentation
- Rules of Hooks: Documentation
- React Server Components
- Server Components: Documentation
- Server Actions: Documentation
- 'use-client' Directive: Documentation
- 'use-server' Directive: Documentation
- Best Practices
- Next.js
- Routing: Documentation
- Defining Routes: Documentation
- Pages and Layouts: Documentation
- Linking and Navigating: Documentation
- Loading UI and Streaming: Documentation
- Error Handling: Documentation
- Redirecting: Documentation
- Route Groups: Documentation
- Project Organization: Documentation
- Dynamic Routes: Documentation
- Parallel Routes
- Intercepting Routes: Documentation
- Route Handlers: Documentation
- Middleware: Documentation
- Data Fetching
- Fetching, Caching, and Revalidating
- Server Actions and Mutations
- Best Practices: Documentation
- Rendering: Documentation
- Server Components: Documentation
- Client Components: Documentation
- Composition Patterns
- Caching: Documentation
- Styling
- TailwindCSS: Documentation
- CSS Modules: Documentation
- Configuration
- Environment Variables: Documentation
- Module Path Aliases: Documentation
- src Directory: Documentation
- Production Checklist: Documentation
- Components
- Font: Documentation
- Image (<Image>): Documentation
- Link (<Link>): Documentation
- Script (<Script>): Documentation
- Functions
- Fetch: Documentation
- NextRequest: Documentation
- NextResponse: Documentation
- Redirect: Documentation
- Params (useParams): Documentation
- Pathname (usePathname): Documentation
- Router (useRouter): Documentation
- Search Params (useSearchParams): Documentation
- Create Next App (create-next-app): Documentation
- Routing: Documentation
- TypeScript
- General
- Tips: Video
- Basic Types: Documentation
- Narrowing: Documentation
- Functions: Documentation
- Objects: Documentation
- Advanced Types
- Indexed Access: Documentation
- Conditional: Documentation
- Mapped: Documentation
- Template Literals: Documentation
- TSConfig
- Type Inference
- Array Type
- Any/Unknown Type
- Type vs Interfaces
- Functions
- Unions & Intersections
- Readonly
- keyof/typeof
- As Const
- Enums
- Tuples
- Generics
- Built In Types (Pick, Omit, etc.)
- Type Guards
- Satisfies
- Discriminated Union
- Function Overloads
- Type Predicate
- Declaration Files
- General