ChatGPT created this very comprehensive roadmap for me and I'm sharing it here as-is. Though I'm not strictly following it start-to-finish, I'm doing a more top-down approach with a method that I invented (pretty much); I have a whole project about it, I call it Code Apprentice (working title). But I am still using this to keep track of which concepts I'm learning, which ones need more work and what not and updating this page every now and then... this is my personal progress, but of course anybody can use the roadmap for themseleves.
Phase 1: JavaScript Fundamentals
Color code:
- ⇨ "pretty much functional"
- ⇨ "understand but needs work"
- ⇨ "somewhat familiar"
- ⇨ "what's that?"
Core Syntax and Basics
Variables let, const (forget var) |
|
| Data types: strings, numbers, booleans, null, undefined |
|
| Template literals (backticks) |
|
| Comments and code organization |
|
| Basic operators (arithmetic, comparison, logical) |
|
| Type coercion and conversion |
|
Functions
| Function declarations |
|
| Function expressions |
|
Arrow functions (=>) |
|
| Parameters and arguments |
|
| Return values |
|
| Default parameters |
|
| Function scope |
|
Conditionals & Logic
if/else statements |
|
Ternary operator (condition ? true : false) |
|
switch statements |
|
| Truthy and falsy values |
|
Logical operators (&&, ||, !) |
|
Loops
for loops |
|
while loops |
|
for...of loops |
|
break and continue |
|
Mini Project 1: Build a simple calculator (add, subtract, multiply, divide) that takes user input
Arrays
| Creating and accessing arrays |
|
| Array length and indices |
|
| Adding/removing items (push, pop, shift, unshift) |
|
forEach() - iterate through arrays |
|
map() - transform array items |
|
filter() - select items that match criteria |
|
find() - find a single item |
|
reduce() - combine array into single value |
|
sort() and reverse() |
|
Spread operator with arrays (...arr) |
|
| Array destructuring |
|
Mini Project 2: Build a todo list (add, remove, filter by complete/incomplete) - no UI yet, just console
Objects
| Creating objects (literal notation) |
|
| Accessing properties (dot vs bracket notation) |
|
| Adding and modifying properties |
|
| Deleting properties |
|
| Nested objects |
|
| Object methods |
|
this keyword basics |
|
| Object destructuring |
|
| Spread operator with objects |
|
Object.keys(), Object.values(), Object.entries() |
|
Mini Project 3: Create a contact book - add contacts with name, email, phone. Search by name.
DOM Manipulation
| Understanding the DOM |
|
document.querySelector() and querySelectorAll() |
|
| Changing text content |
|
| Changing HTML content |
|
| Modifying styles |
|
| Adding/removing CSS classes |
|
| Creating elements |
|
| Appending elements |
|
| Removing elements |
|
Event Handling
addEventListener() |
|
| Click events |
|
| Input events |
|
| Form events |
|
| Event object |
|
preventDefault() |
|
| Event delegation |
|
Project 4: Rebuild your todo list with a proper UI (HTML + CSS + JS)
Advanced Functions
| Callbacks |
|
| Higher-order functions |
|
setTimeout() and setInterval() |
|
| Closures (basic understanding) |
|
Asynchronous JavaScript
| Synchronous vs asynchronous code |
|
| Callbacks and callback hell |
|
| Promises basics |
|
.then() and .catch() |
|
async and await |
|
| Error handling with try/catch |
|
Multiple promises (Promise.all()) |
|
Working with APIs
| What is an API? |
|
fetch() API |
|
| GET requests |
|
| Handling JSON data |
|
| Displaying API data in the DOM |
|
| Loading states |
|
| Error handling for API calls |
|
| POST requests basics |
|
Project 5: Build a weather app - fetch data from a free weather API and display it
Project 6: Build a random quote generator - fetch quotes from an API with a "new quote" button
ES6+ Modules
import and export |
|
| Default exports vs named exports |
|
| Organizing code into modules |
|
Project 7: Refactor one of your previous projects to use modules
Local Storage (for practice only)
localStorage.setItem() |
|
localStorage.getItem() |
|
localStorage.removeItem() |
|
| Storing and retrieving JSON |
|
Note: You won't use localStorage in production Next.js apps, but it's good practice for understanding state persistence
Final Phase 1 Project: Build a movie search app
- Search movies using OMDb API or similar
- Display results with posters
- Click movie for details
- Save favorites (localStorage for practice)
Phase 2: React Fundamentals
React Basics
| What is React and why use it? |
|
| JSX syntax |
|
| Creating your first component |
|
| Components as functions |
|
| Rendering components |
|
| Self-closing tags and fragments |
|
Props
| What are props? |
|
| Passing props to components |
|
| Accessing props |
|
| Props are read-only |
|
| Destructuring props |
|
| Children prop |
|
| Default props |
|
Mini Project 8: Build a card component that displays user profiles with props
State Management
| What is state? |
|
useState() hook |
|
| Reading state |
|
| Updating state |
|
| State vs props |
|
| State is isolated to components |
|
| Multiple state variables |
|
| State with objects and arrays |
|
| Updating object state immutably |
|
| Updating array state immutably |
|
Project 9: Build a counter app with increment, decrement, and reset
Project 10: Rebuild your todo list in React
Handling Events
| onClick events |
|
| onChange events (forms) |
|
| onSubmit events |
|
| Event handler functions |
|
| Passing arguments to event handlers |
|
| Preventing default behavior |
|
Conditional Rendering
| If/else in React |
|
| Ternary operators in JSX |
|
&& operator for conditional rendering |
|
Rendering nothing (null) |
|
Lists and Keys
Rendering arrays with map() |
|
The key prop |
|
| Why keys matter |
|
| Using index as key (and why to avoid it) |
|
Project 11: Build a filterable product list (filter by category, search by name)
Forms in React
| Controlled components |
|
| Handling text inputs |
|
| Handling textareas |
|
| Handling select dropdowns |
|
| Handling checkboxes |
|
| Handling radio buttons |
|
| Form submission |
|
| Form validation basics |
|
Project 12: Build a contact form with validation (email format, required fields)
useEffect Hook
| What is useEffect? |
|
| Running effects after render |
|
| Dependency array |
|
| Effect cleanup |
|
| useEffect for data fetching |
|
| Common useEffect patterns |
|
Project 13: Fetch and display data from an API on component mount
Component Composition
| Breaking UI into components |
|
| Container vs presentational components |
|
| Lifting state up |
|
| Passing callbacks as props |
|
| Component reusability |
|
Project 14: Build a multi-step form (personal info → address → confirmation)
Styling in React
| Inline styles |
|
| CSS modules |
|
| Tailwind CSS basics |
|
| Conditional classes |
|
| Dynamic styles |
|
Final Phase 2 Project: Build a recipe finder app
- Search recipes by ingredient or name
- Display recipe cards
- Click for full recipe details
- Filter by meal type or diet
- Favorites system using state
Phase 3: Next.js Fundamentals
Next.js Setup & Basics
Create a Next.js app (npx create-next-app@latest) |
|
| Project structure understanding |
|
| App Router vs Pages Router (focus on App Router) |
|
| Running dev server |
|
| Building for production |
|
Routing
| File-based routing |
|
| Creating pages |
|
| Nested routes (folders) |
|
Dynamic routes [id] |
|
Linking between pages (<Link>) |
|
useRouter() hook |
|
| Route groups |
|
Project 15: Build a simple blog structure with home, about, blog list, and individual post pages
Layouts and Templates
| Root layout |
|
| Nested layouts |
|
| Creating reusable layouts |
|
| Layout props (children) |
|
CSS and Styling
| Global styles |
|
| CSS Modules in Next.js |
|
| Tailwind CSS setup (if not already) |
|
| Using Tailwind utility classes |
|
Images and Assets
<Image> component |
|
| Image optimization |
|
| Local vs remote images |
|
Serving static files from /public |
|
Project 16: Create a portfolio site with multiple pages, optimized images, and consistent layout
Server Components vs Client Components
| What are Server Components? |
|
| What are Client Components? |
|
| When to use each |
|
'use client' directive |
|
| Data fetching in Server Components |
|
| Interactivity requires Client Components |
|
Data Fetching Basics
| Fetching data in Server Components |
|
async components |
|
Using fetch() in Next.js |
|
| Caching behavior |
|
| Loading states |
|
| Error handling |
|
Project 17: Build a news homepage that fetches articles from a news API
Dynamic Routes with Data
| Fetching data based on route params |
|
generateStaticParams() for static generation |
|
| Dynamic segments |
|
Project 18: Build a product catalog with individual product pages (fetch from fake API like fakestoreapi.com)
Phase 4: Backend & Database
API Routes in Next.js
Creating API routes in app/api/ |
|
| Handling GET requests |
|
| Handling POST requests |
|
| Request and response objects |
|
| Returning JSON |
|
| Status codes |
|
| Error handling in API routes |
|
Project 19: Create a simple guestbook (API routes to save/retrieve messages - store in memory for now)
Environment Variables
.env.local file |
|
| Accessing environment variables |
|
| Server-only vs client-accessible variables |
|
| Security best practices |
|
Database Basics (PostgreSQL)
| What is a relational database? |
|
| Setting up a free database (Supabase or Vercel Postgres) |
|
| Tables, rows, and columns |
|
| Primary keys |
|
| Basic SQL: SELECT, INSERT, UPDATE, DELETE |
|
| WHERE clauses |
|
| Basic JOINs |
|
Using Prisma ORM
| What is an ORM? |
|
| Installing Prisma |
|
| Prisma schema |
|
| Defining models |
|
| Migrations |
|
| Prisma Client |
|
| CRUD operations with Prisma |
|
| Relations in Prisma |
|
Project 20: Rebuild your guestbook with a real database
Project 21: Build a simple bookmark manager (save URLs with titles and tags)
Server Actions
| What are Server Actions? |
|
| Creating Server Actions |
|
| Using Server Actions in forms |
|
useFormState() hook |
|
| Form validation with Server Actions |
|
| Revalidating data |
|
Project 22: Build a note-taking app with Server Actions (create, edit, delete notes)
Authentication Basics
| What is authentication? |
|
| Sessions vs tokens |
|
| Password hashing |
|
| Using an auth library (NextAuth.js / Auth.js) |
|
| Sign up functionality |
|
| Login functionality |
|
| Logout functionality |
|
| Protected routes |
|
| Session management |
|
Project 23: Add authentication to your note-taking app (users can only see their own notes)
Form Handling & Validation
| Server-side validation |
|
| Client-side validation |
|
| Form libraries (React Hook Form) |
|
| Displaying errors |
|
| Loading states during submission |
|
Project 24: Build a job application form with complex validation
Phase 5: Advanced Features & Production
File Uploads
| Handling file uploads in API routes |
|
| Using cloud storage (Cloudinary or Uploadthing) |
|
| Image uploads with preview |
|
| File type validation |
|
| File size limits |
|
Payment Integration
| Understanding payment flows |
|
| Stripe basics |
|
| Creating payment intents |
|
| Stripe Checkout |
|
| Webhooks for payment confirmation |
|
Project 25: Build a simple digital product store (user can "purchase" a product - use Stripe test mode)
Email Integration
| Sending emails from Next.js |
|
| Using email services (Resend or SendGrid) |
|
| Transactional emails |
|
| Email templates |
|
Search Functionality
| Implementing search |
|
| Debouncing search input |
|
| Full-text search with databases |
|
| Search UI patterns |
|
Project 26: Add search to one of your previous projects
SEO Optimization
| Metadata API in Next.js |
|
| Dynamic meta tags |
|
| Open Graph images |
|
| Sitemaps |
|
| robots.txt |
|
| Structured data |
|
Performance Optimization
| Understanding Web Vitals |
|
| Code splitting |
|
| Lazy loading components |
|
| Image optimization review |
|
| Caching strategies |
|
Error Handling & Loading States
error.js files |
|
loading.js files |
|
| Custom 404 pages |
|
| Error boundaries |
|
| Toast notifications |
|
Phase 6: Deployment & DevOps
Git & GitHub
| Git basics (if not already comfortable) |
|
| Creating repositories |
|
| Commits and commit messages |
|
| Pushing to GitHub |
|
| Branches (basic understanding) |
|
| .gitignore files |
|
Deploying to Vercel
| Creating a Vercel account |
|
| Connecting GitHub repository |
|
| Automatic deployments |
|
| Environment variables in Vercel |
|
| Custom domains |
|
| Preview deployments |
|
Action: Deploy all your projects to Vercel
Database in Production
| Using production databases |
|
| Connection pooling |
|
| Database migrations in production |
|
| Backing up databases |
|
Monitoring & Analytics
| Vercel Analytics |
|
| Error tracking (Sentry basics) |
|
| Understanding logs |
|
Domain & DNS
| Purchasing domains |
|
| Connecting custom domains to Vercel |
|
| DNS basics |
|
| SSL certificates (automatic with Vercel) |
|
Phase 7: Real-World Projects
Project 27: Restaurant Website with Online Ordering
- Menu display with categories
- Shopping cart
- Order form
- Basic admin panel to manage menu items
- Email notifications for new orders
Project 28: Local Bookstore E-commerce
- Product catalog with search and filters
- Individual product pages
- Shopping cart
- Checkout with Stripe
- Order history for users
- Basic inventory management
Project 29: Appointment Booking System
- Service selection
- Calendar view
- Time slot selection
- User authentication
- Email confirmations
- Admin panel to manage bookings
Project 30: Portfolio + Blog for Yourself
- Homepage showcasing your work
- Project case studies
- Blog with CMS functionality
- Contact form
- SEO optimized
- Fast and beautiful
Phase 8: Business & Client Skills
Portfolio Development
| Showcase your best 3-4 projects |
|
| Write case studies (problem, solution, results) |
|
| Professional about page |
|
| Clear contact information |
|
| Testimonials section (even if from practice projects) |
|
Pricing & Proposals
| Understanding project pricing |
|
| Hourly vs fixed-price |
|
| Creating project proposals |
|
| Scope of work documents |
|
| Payment terms |
|
Client Communication
| Asking the right questions |
|
| Setting expectations |
|
| Progress updates |
|
| Handling feedback |
|
| Managing scope creep |
|
Finding Clients
| Local business outreach |
|
| Networking |
|
| Freelance platforms (Upwork, etc.) |
|
| Cold emailing |
|
| Referrals |
|
Ongoing Learning
| Following industry trends |
|
| JavaScript/React/Next.js updates |
|
| Learning from other developers |
|
| Contributing to open source (optional) |
|
Resources Reference
Recommended Learning Platforms
- JavaScript: javascript.info (free)
- React: React official docs (react.dev)
- Next.js: Next.js official docs (nextjs.org/docs)
- Practice: Frontend Mentor, LeetCode (for JS practice)
- YouTube: Web Dev Simplified, Traversy Media, Fireship
Tools You'll Use
- Code Editor: VS Code
- Browser: Chrome/Firefox with DevTools
- Version Control: Git + GitHub
- Design Reference: Dribbble, Awwwards (for inspiration)
- Icons: Lucide React, Heroicons
- Fonts: Google Fonts
- Colors: Coolors.co, Tailwind color palette
APIs for Practice Projects
- General: JSONPlaceholder
- Weather: OpenWeatherMap
- Movies: OMDb API, The Movie Database
- News: NewsAPI
- Quotes: Quotable API
- Recipes: Spoonacular API
- Products: FakeStore API
Important Reminders
✅ Build projects constantly - theory alone won't make you job-ready
✅ Focus on one thing at a time - don't jump around
✅ It's okay to Google things - even experienced devs do this daily
✅ Deploy everything - get comfortable with the full process
✅ Your early projects will be imperfect - that's normal and expected
✅ Stay consistent - 1.5 hours daily beats 10 hours on weekends
✅ Join communities - Reddit (r/webdev), Discord servers, local meetups
✅ Keep your minimal/small-web ideals for personal projects
✅ Start reaching out to potential clients around month 6-9
✅ Don't wait for perfection - you'll learn more from real projects
Remember: This isn't a race. Check off items as you truly understand them, not just when you've read about them. Build, break things, rebuild. That's how you learn.