12-Week Intensive

Frontend Development 2: JavaScript, React & Next.js

Elevate your frontend skills. Dive deep into modern JavaScript (ES6+), build highly interactive user interfaces with React, master complex state management, and step into the future of web development using Next.js and AI-assisted coding.

What You Will Achieve:

  • Write efficient, modular JavaScript and master core programming principles.
  • Build fast, dynamic web applications from scratch using React and Vite.
  • Fetch data from REST APIs and integrate complex third-party libraries.
  • Manage complex application state using Hooks and the Context API.
  • Build and deploy SEO-friendly, full-stack React applications using Next.js.
Enroll Now
Prerequisites:Basic HTML/CSS knowledge (Frontend 1 recommended).
Marlayer Logo
MARLAYER ACADEMY

Course Syllabus

  • Overview:
  • Variables (let, const), data types, and operators.
  • Control flow: conditionals (if/else, switch) and loops (for, while).
  • Functions: Declarations, arrow functions, and scope.
  • ES6+ Features: Destructuring, spread/rest operators, and template literals.
  • Using AI to explain JavaScript logic and generate practice exercises.
  • Working with Data:
  • Arrays: Iteration (map, filter, reduce) and manipulation methods.
  • Objects: Creation, accessing properties, and methods.
  • DOM Manipulation:
  • Understanding the Document Object Model (DOM) tree.
  • Selecting, modifying, creating, and deleting HTML elements via JS.
  • Event Listeners: Handling clicks, form submissions, and keyboard events.
  • Overview:
  • Understanding the Call Stack, Event Loop, and Asynchronous programming.
  • Callbacks, Promises, and modern async/await syntax.
  • Making HTTP requests using the Fetch API.
  • Error handling using try/catch blocks.
  • AI-Assisted Debugging: Using AI to trace network errors and fix async logic.
  • React Basics:
  • Why React? Understanding the Virtual DOM and component-based architecture.
  • Setting up a modern, blazing-fast React project using Vite.
  • Understanding JSX syntax and rules.
  • Components and Props:
  • Building reusable functional components.
  • Passing data dynamically using Props.
  • State Management:
  • Introduction to React Hooks: Using useState to manage component state.
  • Handling user interactions and updating UI dynamically.
  • Forms and Events:
  • Controlled vs. Uncontrolled components.
  • Handling complex form submissions and validation in React.
  • The useEffect Hook:
  • Understanding the component lifecycle and side effects.
  • Fetching data from external REST APIs inside React components.
  • Managing loading states, empty states, and error handling.
  • Asking AI to generate mock APIs and explain dependency arrays.
  • React Router:
  • Setting up React Router for seamless, page-reload-free navigation.
  • Implementing dynamic routes and extracting URL parameters.
  • Creating nested routes and 404 Not Found pages.
  • Mini-Project:
  • Build a multi-page movie discovery app fetching data from a public API.
  • Global State Management:
  • Prop drilling vs. The Context API.
  • Setting up global state for things like User Authentication or Dark Mode.
  • Advanced Hooks:
  • Using useReducer for complex state logic.
  • Performance optimization basics: useMemo and useCallback.
  • Introduction to Next.js:
  • Why the industry moved to Next.js (Server-Side Rendering vs. Client-Side Rendering).
  • Setting up a Next.js app with the App Router.
  • File-based routing and layout structures.
  • Optimizing SEO and performance automatically.
  • Connecting the Dots:
  • Connecting your React/Next.js frontend to a Backend (Node.js or Firebase/Supabase).
  • Implementing user authentication workflows (Login, Register, Logout).
  • Protecting private routes and managing user sessions.
  • Using AI to quickly scaffold auth flows and securely handle tokens.
  • Full-Stack Implementation:
  • Plan and architect a feature-rich web application (e.g., E-commerce, Dashboard, or SaaS interface).
  • Use AI as a pair-programmer to generate UI components, unblock complex logic, and write boilerplate code.
  • Integrate all concepts: State, Routing, API fetching, and Global Context.
  • Deployment:
  • Deploying React apps to Netlify and Next.js apps to Vercel.
  • Environment variables and production builds.
  • Career Readiness:
  • Polishing your GitHub portfolio and writing solid README files.
  • Frontend developer resume tips and preparing for technical interviews.