Frontend Mastery: JavaScript, React, Next.js (TypeScript)

Total Duration: 16 Classes (2.5 Hours Each)
Level: Beginner
Goal: Equip students with foundational frontend development skills to prepare them for the industry.

---

Week 1-3: JavaScript Fundamentals

Week 1: Introduction to JavaScript

Topics Covered:

• History, use cases, and setup (Node.js, VS Code)
• Variables and Data Types: var, let, const, and type conversion
• Operators and Expressions: Arithmetic, comparison, logical operators
• Control Flow: if/else, switch, for, while, do-while loops

• LinkedIn Profile Basics: Add a professional headline and summary
• CV Preparation (Basic): Start drafting key sections (education, skills, personal projects)

Week 2: Functions, Arrays, and Objects

Topics Covered:

• Functions: Declaration, expression, arrow functions, closures
• Arrays: Creation, manipulation, and methods (map, filter, reduce)
• Objects: Creating, accessing, and manipulating properties

Project Update:

• Implement a mini-project using functions and objects
• LinkedIn: Add JavaScript as a skill
• Resume Update: Showcase JavaScript projects

Week 3: DOM Manipulation, Events, and ES6+ Features

Topics Covered:

• DOM Manipulation: Selecting, modifying, and appending elements
• Event Handling: Event listeners, user input, form validation
• ES6+ Features: Template literals, destructuring, spread/rest operators, promises, async/await

Hands-On:

• Create an interactive to-do list with add/delete functionality
• Fetch and display data from a public API

Project Update:

• Add event handling and API fetching to the mini-project

• Interview Preparation: Basic JavaScript coding questions

Week 4-10: React Development

Week 4: Introduction to React & JSX

Topics Covered:

• What is React? React vs. Vanilla JavaScript
• Setting up a React Project (Vite or CRA)
• JSX Basics: Writing and rendering components

Hands-On:

• Create a simple component-based UI

Project Update:

• Convert previous mini-project into React components

• LinkedIn: Add React as a skill

Week 5: State, Props & TypeScript Basics

Topics Covered:

• State Management: Using useState
• Props: Passing data between components

Hands-On:

• Build a counter app with state and props

Project Update:

• Refactor the mini-project with props and state

• Resume Update: Add React experience

Week 6: Handling Events, Lists & Final Project Introduction

Topics Covered:

• Event Handling: Managing events in React
• Lists and Keys: Rendering lists dynamically using .map()
• Introduction to the Final Project

Hands-On:

• Build a task list app with dynamic additions

Project Update:

• Define features for the final project

• Interview Practice: Common React questions

Week 7: Forms & Controlled Components

Topics Covered:

• Controlled vs. Uncontrolled Components
• Managing Form Data: Handling user input and validation

Hands-On:

• Create a login form with validation

Project Update:

• Add a login system to the final project

• LinkedIn Optimization: Add project descriptions

Week 8: React Router

Topics Covered:

• Routing Basics: Setting up React Router
• Dynamic and Nested Routes

Hands-On:

• Create a multi-page React app with navigation

Project Update:

• Implement routing in the final project

• Resume Optimization: Format and highlight frontend skills

Week 9: Context API & Advanced React Concepts

Topics Covered:

• Context API: Global state management
• Performance Optimization: Using useMemo and useCallback

Hands-On:

• Build a theme toggle app using Context API

Project Update:

• Implement global state management in the final project

• Mock Interviews (React): Common questions & debugging tasks

Week 10: Migration from React to Vue.js & Angular.js

Topics Covered:

• Understanding project migration concepts
• Planning migration from React to other frameworks
• Key differences in state management & component structure

Hands-On:

• Convert a simple React project to Vue.js and Angular.js

Project Update:

• Plan migration for the final project

• Interview Q&A: Framework-specific questions

Week 11-13: Next.js & TypeScript Development

Week 11: Introduction to Next.js & TypeScript

Topics Covered:

• What is Next.js? Key features and advantages
• Setting up a Next.js project with TypeScript (.tsx files, tsconfig.json)
• Pages and Routing: Static and dynamic routing

Hands-On:

• Create a basic multi-page Next.js app using TypeScript

Project Update:

• Start integrating Next.js into the final project
• LinkedIn: Add Next.js and TypeScript as skills

Week 12: Next.js Components & State Management

Topics Covered:

• Layouts and Shared Components in Next.js
• Global State Management: Context API & Zustand/Redux Toolkit
• Server Components vs. Client Components

Hands-On:

• Implement shared layouts and reusable components in the Next.js app
• Use Context API or Zustand for state management

Project Update:

• Add layouts and state management to the final project

Week 13: Data Fetching & API Routes

Topics Covered:

• Static and Server-Side Rendering
• API Routes: Creating backend APIs in Next.js
• Fetching data with useEfrect and use SWR

Hands-On:

• Fetch and display data from an external API using TypeScript

Project Update:

• Implement API fetching in the final project
• Resume Update: Showcase Next.js & TypeScript projects

Week 14: Advanced Next.js (Image Optimization & Authentication)

Topics Covered:

• Image Optimization: Using the next/image component
• Middleware and Authentication in Next.js
• Using NextAuth.js for authentication

Hands-On:

• Secure pages using authentication
• Optimize images in the project

Project Update:

• Implement authentication and middleware in the final project

Week 15: Deployment & Mock Interviews

Topics Covered:

• Deployment: Deploying Next.js apps on Vercel
• Performance Optimization in Next.js
• SEO best practices in Next.js

Hands-On:

• Build a blog with Next.js and deploy it on Vercel

Project Update:

• Deploy the final project on Vercel

Mock Interview Q&A: Next.js & TypeScript

Week 16: Final Project Presentation & Interview Prep

• Final project presentation & Deployment
• Career guidance: frontend coding challenges, Q&A.

---

This course outline is subject to modifications based on student progress and evolving industry needs.