Build modern frontends with React and Next.js

We start with the basics you need to work smoothly. You set up your editor, understand the folder structure and learn how a modern frontend project runs.

• How the web works in simple terms and what happens when you load a page
• Node, package managers and running scripts the safe way
• Git basics for daily work and clean commits
• Starter project setup with a simple design system

You learn to think in components. We focus on clean structure, readable code and small reusable pieces.

• JSX rules, component structure and naming
• Props and composition with real UI examples
• Lists, keys and conditional rendering
• Simple styling patterns that keep code clean

Now your pages react to user actions. You learn state, events and the most useful hooks for real apps.

• useState and controlled inputs with forms
• useEffect for side effects and simple data loading
• Lifting state up and passing callbacks
• Common mistakes and how to avoid infinite loops

You build real flows like sign up, checkout style pages and settings pages. You also learn basic form validation patterns.

• Client side routing concepts and route structure
• Reusable layouts and shared UI parts
• Form patterns for text, select and file inputs
• Validation and error messages users understand

You add TypeScript in a practical way. The goal is fewer bugs and clearer code, not long types.

• Type props and state in a simple way
• Type events and form handlers
• Union types for UI states and variants
• Reusable types for api data and responses

You move into Next.js and learn how modern apps ship faster and rank better. We focus on the parts you use daily.

• App Router basics, pages and layouts
• Navigation, links and route groups
• Static and dynamic routes with examples
• Image and font handling for performance

You learn the main ways to load data and update it. We keep it simple and focus on common real needs.

• Fetch data for lists and details pages
• Loading, error and empty states users trust
• Server actions for simple mutations
• Caching basics and when to revalidate

You build a basic auth flow and learn how to protect pages. We focus on clear UX and safe patterns.

• Login and logout flow with clean UI
• Protect routes and handle redirects
• Role based UI visibility in simple steps
• Security basics for tokens and storage

You build a final project with a clear scope and deploy it. You also learn how to explain your work in an interview.

• Project planning, scope and feature checklist
• Clean README and screenshots for your portfolio
• Deploy to a hosting platform and set env variables
• Common interview questions for React and Next.js