🚀 12-WEEK FULL-STACK CURRICULUM (React + Node)

 

🧠 Goal

By the end, students will build a complete web app (School Portal / LMS System) with:

• User login
• Dashboard
• Database
• Deployment

📘 WEEK 1–2: Web Foundations (Recap + Alignment)

Focus:

• HTML structure
• CSS styling
• JavaScript basics

What to Teach:

• Tags, forms, tables
• Flexbox & layout
• Variables, functions, arrays
• DOM manipulation

Practical:

👉 Build:

• Student registration form
• Simple result table UI

⚛️ WEEK 3–4: React Fundamentals

Using:

• React

Topics:

• Components
• Props
• State (useState)
• Events
• JSX

Practical:

👉 Build:

• Student Dashboard UI
• Profile Card Component
• Course List UI

🔄 WEEK 5: React Advanced

Topics:

• useEffect
• API calls (Fetch / Axios)
• React Router (Navigation)
• Forms handling

Practical:

👉 Build:

• Multi-page app:
  • Home
  • Dashboard
  • Login page

🌐 WEEK 6: Backend Introduction

Using:

• Node.js
• Express.js

Topics:

• What is backend?
• Creating server
• Routes
• Middleware

Practical:

👉 Build:

• Simple API:
  • /students
  • /courses

🗄️ WEEK 7: Database Integration

Using:

• MongoDB

Topics:

• CRUD operations
• Models (Mongoose)
• Connecting Node to DB

Practical:

👉 Build:

• Save student data
• Fetch and display records

🔐 WEEK 8: Authentication System

Topics:

• Signup / Login
• Password hashing (bcrypt)
• JWT authentication

Practical:

👉 Build:

• Login system
• Protected dashboard

🔗 WEEK 9: Full Stack Integration

Topics:

• Connect React to API
• Axios
• Handling responses

Practical:

👉 Build:

• Frontend form → backend → database
• Display real-time data

🎨 WEEK 10: UI/UX + Styling

Tools:

• Tailwind CSS / Bootstrap

Topics:

• Clean UI design
• Responsive layout

Practical:

👉 Upgrade:

• Dashboard UI
• Cards, tables, navbars

☁️ WEEK 11: Deployment

Platforms:

• Frontend: Vercel / Netlify
• Backend: Render / Railway
• Database: MongoDB Atlas

Practical:

👉 Deploy:

• Live website
• Public URL

🏁 WEEK 12: FINAL PROJECT

Project Options:

Students must choose one:

1. School Management Portal
2. LMS Dashboard
3. E-commerce Store
4. Event Registration Platform
5. Result Checker System

📂 Sample Project Structure

project/
  client/   (React)
  server/   (Node/Express)