Understand how modern frontend applications work.
School of EngineeringSoftware EngineeringBeginner to IntermediateIncluded in a Professional Diploma
Frontend Software Engineering with React, Next.js & TypeScript
Build modern web applications that are responsive, interactive, API-powered, and ready for real users.
Learn frontend engineering with React, Next.js, TypeScript, forms, APIs, authentication flows, responsive design, reusable components, user experience, deployment, and production-ready frontend practices.
Duration
24 weeks - 6-8 hours/week
Project
Understand how modern frontend applications work.
Support
Pricing and enrolment are handled through the Professional Diploma
Overview
A practical Short Course built around a visible project.
Learn how to build beautiful, responsive, interactive web applications using React, Next.js, TypeScript, APIs, forms, authentication flows, and production-ready frontend workflows.
Build responsive web pages with clean structure and styling.
Create reusable React components.
Use props, state, hooks, and component composition effectively.
Build forms with validation and user feedback.
Connect frontend applications to backend APIs.
Handle loading states, errors, empty states, and success states.
Build authentication flows and protected pages.
Use TypeScript to write safer and more maintainable frontend code.
Build applications with Next.js.
Understand routing, rendering, and deployment basics.
Improve frontend performance and user experience.
Build portfolio-ready frontend projects.
Prepare for junior frontend and full-stack engineering roles.
Course roadmap
What you will work through.
The sequence below is specific to this course. It shows the phases, modules, lessons, and page outlines that move you toward Understand how modern frontend applications work..
1Phase 1 - Web and Frontend FoundationsBuild core web understanding, browser/network debugging, developer setup, Git/GitHub workflow, and professional frontend habits.2 modules10 lessonsWeeks 1–2
Module 1: How the Web WorksUnderstand the internet, browser, client, server, HTTP/HTTPS, DNS, request-response lifecycle, frontend/backend responsibilities, and web app architecture.6 lessons
Lesson 1: Internet Browser Server and ClientUnderstand the basic parts of the web: internet, browser, client, server, frontend, backend, and how they work together.85 minarticle5 pages
Welcome and Learning Objectives
Introduce the core web architecture.
8 min
The Parts of the Web
Explain the main components.
18 min
What Happens When a Page Loads
Explain high-level page loading.
18 min
Frontend and Backend Collaboration
Explain collaboration boundaries.
18 min
Exercise - Draw the Web Flow
Students draw browser-client-server flow.
23 min
Lesson 2: HTTP HTTPS and DNS BasicsUnderstand HTTP, HTTPS, DNS, URLs, methods, status codes, headers, and why secure communication matters.85 minarticle5 pages
Welcome and Learning Objectives
Introduce HTTP, HTTPS, and DNS.
8 min
URLs DNS and Requests
Explain addresses and routing.
20 min
HTTP Methods and Status Codes
Explain common methods and responses.
20 min
HTTPS and Security Basics
Explain secure communication.
18 min
Exercise - Inspect Network Requests
Students inspect real requests using DevTools.
39 min
Lesson 3: Request Response LifecycleTrace the full lifecycle of a user action from click to request, server response, frontend state update, render, loading, success, and error UI.90 minarticle4 pages
Welcome and Learning Objectives
Introduce request/response lifecycle.
8 min
User Action to UI Update
Explain the lifecycle.
22 min
Debugging the Lifecycle
Teach debugging approach.
20 min
Exercise - Request State Flow
Students design request state flow.
40 min
Lesson 4: Frontend vs Backend ResponsibilitiesClarify frontend and backend responsibilities, API contracts, user interface boundaries, validation, permissions, and collaboration.80 minarticle4 pages
Welcome and Learning Objectives
Introduce responsibility split.
8 min
Responsibility Split
Explain frontend/backend ownership.
20 min
API Contracts
Explain contract collaboration.
20 min
Exercise - Responsibility Matrix
Students split feature responsibilities.
32 min
Lesson 5: Static Websites Dynamic Websites and Web AppsUnderstand static websites, dynamic websites, web apps, SPAs, server-rendered apps, and how Next.js fits modern frontend architecture.80 minarticle4 pages
Welcome and Learning Objectives
Introduce web app categories.
8 min
Static Dynamic and App Patterns
Explain common patterns.
24 min
Where Next.js Fits
Explain Next.js role.
18 min
Exercise - Website or Web App Classification
Students classify products.
30 min
Lesson 6: Project - Web Architecture BreakdownStudents analyze a real product such as Instagram, Netflix, Uber, Workroomly, TechOga, or a SaaS dashboard and break down its web architecture.100 minarticle2 pages
Project Brief
Explain the project scenario and expected output.
20 min
Review Checklist
Checklist for project quality.
20 min
Module 2: Developer Setup and WorkflowSet up VS Code, terminal, Node.js/NPM, Git/GitHub, branching, pull requests, debugging, and browser DevTools.4 lessons
Lesson 1: VS Code Terminal and Node SetupSet up the local frontend development environment with VS Code, terminal, Node.js, NPM, and project folders.70 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
35 min
Practice Activity
Apply the lesson through a guided frontend exercise.
27 min
Lesson 2: Git GitHub Branching and Pull RequestsUse Git and GitHub for professional frontend collaboration.80 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
40 min
Practice Activity
Apply the lesson through a guided frontend exercise.
32 min
Lesson 3: Browser DevTools for Frontend EngineersUse DevTools to inspect elements, CSS, console errors, network requests, performance signals, and storage.75 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
37 min
Practice Activity
Apply the lesson through a guided frontend exercise.
30 min
Lesson 4: Project - Frontend Portfolio Repository SetupCreate a professional frontend portfolio repository that will host all course projects.100 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
50 min
Practice Activity
Apply the lesson through a guided frontend exercise.
42 min
2Phase 2 - HTML CSS and Responsive UIBuild strong application markup, CSS layout, responsive design, accessibility foundations, UI systems, and a SaaS landing page.3 modules10 lessonsWeeks 3–5
Module 1: HTML for ApplicationsUse semantic HTML, forms, tables, accessibility, SEO basics, and document structure for real app screens.3 lessons
Lesson 1: Semantic HTML and Document StructureWrite semantic page structure using headings, sections, nav, main, footer, and readable document flow.70 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
35 min
Practice Activity
Apply the lesson through a guided frontend exercise.
27 min
Lesson 2: Forms Inputs and Validation UXBuild forms with labels, inputs, selects, textareas, required states, and accessible error message structure.80 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
40 min
Practice Activity
Apply the lesson through a guided frontend exercise.
32 min
Lesson 3: Tables and Data UIBuild dashboard tables and structured data UI with accessible markup.70 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
35 min
Practice Activity
Apply the lesson through a guided frontend exercise.
27 min
Module 2: CSS FundamentalsMaster box model, selectors, typography, colors, spacing, positioning, Flexbox, and Grid.3 lessons
Lesson 1: Box Model Selectors and SpacingUse CSS selectors, box model, margin, padding, borders, sizing, and spacing systems.75 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
37 min
Practice Activity
Apply the lesson through a guided frontend exercise.
30 min
Lesson 2: Typography Colors and Visual HierarchyUse typography, color, contrast, hierarchy, and brand consistency in UI design.70 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
35 min
Practice Activity
Apply the lesson through a guided frontend exercise.
27 min
Lesson 3: Flexbox Grid and PositioningBuild layout systems with Flexbox, Grid, positioning, alignment, and responsive navigation.85 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
42 min
Practice Activity
Apply the lesson through a guided frontend exercise.
35 min
Module 3: Responsive Design and UI SystemsBuild mobile-first layouts, breakpoints, design tokens, component thinking, accessibility, animations, and the first milestone landing page.4 lessons
Lesson 1: Mobile-First Responsive DesignDesign mobile-first layouts with breakpoints, fluid sizing, responsive images, and real device thinking.80 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
40 min
Practice Activity
Apply the lesson through a guided frontend exercise.
32 min
Lesson 2: Design Tokens and Component ThinkingCreate consistent UI using tokens for color, spacing, radius, typography, and reusable components.75 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
37 min
Practice Activity
Apply the lesson through a guided frontend exercise.
30 min
Lesson 3: Accessibility and Basic AnimationsApply accessibility basics, focus states, keyboard navigation, motion restraint, and simple UI transitions.75 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
37 min
Practice Activity
Apply the lesson through a guided frontend exercise.
30 min
Lesson 4: Month 1 Project - Responsive SaaS Landing PageBuild and present a responsive SaaS landing page.150 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
75 min
Practice Activity
Apply the lesson through a guided frontend exercise.
67 min
3Phase 3 - JavaScript and TypeScriptBuild JavaScript fundamentals, modern JavaScript, async/API work, TypeScript foundations, typed API responses, and a TypeScript Expense Tracker.3 modules9 lessonsWeeks 6–9
Module 1: JavaScript FundamentalsUse variables, data types, functions, conditions, loops, arrays, objects, DOM basics, forms, and 50+ exercises.3 lessons
Lesson 1: Variables Data Types Functions and ConditionsUse JavaScript variables, values, functions, conditions, and business rules.80 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
40 min
Practice Activity
Apply the lesson through a guided frontend exercise.
32 min
Lesson 2: Arrays Objects and LoopsProcess lists and structured data using arrays, objects, loops, and common patterns.85 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
42 min
Practice Activity
Apply the lesson through a guided frontend exercise.
35 min
Lesson 3: DOM Basics and Form ValidationManipulate the DOM, handle events, validate forms, and update UI based on user input.90 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
45 min
Practice Activity
Apply the lesson through a guided frontend exercise.
37 min
Module 2: Modern JavaScriptUse ES modules, destructuring, spread/rest, array methods, async/await, Fetch API, and error handling.3 lessons
Lesson 1: ES Modules Destructuring and Array MethodsUse modern JavaScript syntax to organize and transform frontend data.80 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
40 min
Practice Activity
Apply the lesson through a guided frontend exercise.
32 min
Lesson 2: Async Await Fetch and Error HandlingFetch API data, handle loading/errors, parse JSON, and debug async workflows.90 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
45 min
Practice Activity
Apply the lesson through a guided frontend exercise.
37 min
Lesson 3: JavaScript Feature ModuleBuild a small JavaScript feature that processes data and updates the UI.90 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
45 min
Practice Activity
Apply the lesson through a guided frontend exercise.
37 min
Module 3: TypeScript FundamentalsUse TypeScript as the default professional workflow for frontend development.3 lessons
Lesson 1: Everyday Types Interfaces and UnionsUse TypeScript types, interfaces, unions, optional fields, and safer object shapes.85 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
42 min
Practice Activity
Apply the lesson through a guided frontend exercise.
35 min
Lesson 2: Function Typing Generics and NarrowingType functions, generics, API helpers, and narrowing logic.90 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
45 min
Practice Activity
Apply the lesson through a guided frontend exercise.
37 min
Lesson 3: Month 2 Project - TypeScript Expense TrackerBuild a TypeScript expense tracker with forms, state, typed models, and local persistence.160 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
80 min
Practice Activity
Apply the lesson through a guided frontend exercise.
72 min
4Phase 4 - React EngineeringBuild strong React fundamentals, hooks, state, architecture, reusable components, forms, error handling, and a React Admin Dashboard.3 modules9 lessonsWeeks 10–13
Module 1: React FundamentalsDeeply master components, JSX, props, state, events, lists, conditional rendering, and forms before moving to Next.js.3 lessons
Lesson 1: Components JSX and PropsBuild React UI using components, JSX, props, children, and composition basics.85 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
42 min
Practice Activity
Apply the lesson through a guided frontend exercise.
35 min
Lesson 2: State Events Lists and Conditional RenderingHandle component state, events, lists, keys, and conditional UI states.90 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
45 min
Practice Activity
Apply the lesson through a guided frontend exercise.
37 min
Lesson 3: React FormsBuild controlled forms, validation UX, reusable fields, and form submission behavior.85 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
42 min
Practice Activity
Apply the lesson through a guided frontend exercise.
35 min
Module 2: React Hooks and StateUse hooks for state, effects, refs, memoization, custom hooks, and local/global state decisions.3 lessons
Lesson 1: useState useEffect and useRefUse core hooks for interactive UI, effects, refs, API state, and DOM coordination.90 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
45 min
Practice Activity
Apply the lesson through a guided frontend exercise.
37 min
Lesson 2: useMemo useCallback and Custom HooksUse memoization carefully and create custom hooks for reusable logic.85 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
42 min
Practice Activity
Apply the lesson through a guided frontend exercise.
35 min
Lesson 3: Local vs Global StateChoose local, lifted, shared, context, or external state patterns.80 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
40 min
Practice Activity
Apply the lesson through a guided frontend exercise.
32 min
Module 3: React ArchitectureStructure React apps with feature folders, component composition, reusable UI, form architecture, error boundaries, and code splitting.3 lessons
Lesson 1: Component Composition and Feature FoldersOrganize React features and components using clean folder structures and composition.80 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
40 min
Practice Activity
Apply the lesson through a guided frontend exercise.
32 min
Lesson 2: Form Architecture Error Boundaries and Code SplittingDesign frontend architecture for robust forms, error boundaries, lazy loading, and maintainability.85 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
42 min
Practice Activity
Apply the lesson through a guided frontend exercise.
35 min
Lesson 3: Month 3 Project - React Admin DashboardBuild a React admin dashboard with login UI, sidebar, tables, filters, forms, chart placeholders, and reusable components.180 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
90 min
Practice Activity
Apply the lesson through a guided frontend exercise.
82 min
5Phase 5 - Next.js Production FrontendBuild production frontend apps with Next.js App Router, server/client components, data fetching, caching concepts, UI libraries, forms, validation, and a SaaS dashboard.4 modules11 lessonsWeeks 14–17
Module 1: Next.js FoundationsUse App Router, file-based routing, layouts, pages, navigation, loading, error, and not-found UI.3 lessons
Lesson 1: Why Next.js and App RouterUnderstand why Next.js is used for production React apps and how App Router structures applications.80 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
40 min
Practice Activity
Apply the lesson through a guided frontend exercise.
32 min
Lesson 2: Layouts Loading Error and Not Found UIUse app-level file conventions for layouts, loading states, error UI, and not-found pages.85 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
42 min
Practice Activity
Apply the lesson through a guided frontend exercise.
35 min
Lesson 3: Next.js Project Structure and NavigationOrganize Next.js project folders, components, routes, assets, metadata, and navigation patterns.75 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
37 min
Practice Activity
Apply the lesson through a guided frontend exercise.
30 min
Module 2: Server and Client ComponentsUnderstand Server Components, Client Components, data fetching, streaming concepts, caching basics, and route handlers overview.3 lessons
Lesson 1: Server Components and Client ComponentsChoose server or client component based on interactivity, data access, and rendering needs.90 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
45 min
Practice Activity
Apply the lesson through a guided frontend exercise.
37 min
Lesson 2: Data Fetching Streaming and Caching BasicsUnderstand server-side data fetching, loading UI, streaming concepts, caching basics, and freshness tradeoffs.85 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
42 min
Practice Activity
Apply the lesson through a guided frontend exercise.
35 min
Lesson 3: Route Handlers OverviewUnderstand route handlers for lightweight server-side endpoints and integration boundaries.70 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
35 min
Practice Activity
Apply the lesson through a guided frontend exercise.
27 min
Module 3: Styling and UI LibrariesUse Tailwind CSS, component libraries, design systems, themes, responsive dashboards, and dark mode basics.2 lessons
Lesson 1: Tailwind CSS for Production UIUse Tailwind for layout, spacing, typography, responsive design, states, and maintainable utility patterns.85 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
42 min
Practice Activity
Apply the lesson through a guided frontend exercise.
35 min
Lesson 2: Component Libraries Design Systems and ThemesUse component libraries responsibly and maintain theme consistency.80 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
40 min
Practice Activity
Apply the lesson through a guided frontend exercise.
32 min
Module 4: Forms Validation and UXBuild production forms with controlled forms, React Hook Form, Zod, errors, loading, empty states, and optimistic UI basics.3 lessons
Lesson 1: React Hook Form and Zod ValidationBuild typed, validated forms with React Hook Form and Zod.90 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
45 min
Practice Activity
Apply the lesson through a guided frontend exercise.
37 min
Lesson 2: UX States and Optimistic UI BasicsDesign loading, error, empty, disabled, success, and optimistic UI states.80 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
40 min
Practice Activity
Apply the lesson through a guided frontend exercise.
32 min
Lesson 3: Month 4 Project - Next.js SaaS DashboardBuild a Next.js SaaS dashboard using App Router, layouts, routing, forms, and UI architecture.190 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
95 min
Practice Activity
Apply the lesson through a guided frontend exercise.
87 min
6Phase 6 - API Integration and Full Stack FrontendConnect frontend applications to REST APIs, handle typed responses, authentication, protected pages, role-based UI, sessions, and the Django CRM API frontend.2 modules5 lessonsWeeks 18–19
Module 1: Working with REST APIsBuild robust API clients using Fetch/Axios, authentication tokens, pagination, filtering, sorting, errors, and TypeScript response types.2 lessons
Lesson 1: API Clients Fetch Axios and Typed ResponsesCreate typed API clients and response types for REST integration.85 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
42 min
Practice Activity
Apply the lesson through a guided frontend exercise.
35 min
Lesson 2: Pagination Filtering Sorting and Error HandlingBuild list pages with pagination, filtering, sorting, retries, and resilient error UI.90 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
45 min
Practice Activity
Apply the lesson through a guided frontend exercise.
37 min
Module 2: Authenticated Frontend AppsBuild login/logout, protected routes, role-based UI, session handling, token refresh concepts, and storage tradeoffs.3 lessons
Lesson 1: Login Logout Sessions and Protected PagesBuild authenticated frontend flows with protected routes and clear session behavior.90 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
45 min
Practice Activity
Apply the lesson through a guided frontend exercise.
37 min
Lesson 2: Role-Based UI and Secure Storage TradeoffsShow UI based on roles while understanding frontend trust limits and storage tradeoffs.85 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
42 min
Practice Activity
Apply the lesson through a guided frontend exercise.
35 min
Lesson 3: Month 5 Project - Django API Connected FrontendBuild a frontend connected to the Django CRM API from the backend course.190 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
95 min
Practice Activity
Apply the lesson through a guided frontend exercise.
87 min
7Phase 7 - Quality Testing and PerformanceAdd frontend testing, performance, Core Web Vitals, image optimization, accessibility testing, keyboard navigation, and a performance audit.2 modules5 lessonsWeeks 20–21
Module 1: Frontend TestingWrite unit, component, integration, and E2E-aware tests using Testing Library and Playwright/Cypress overview.2 lessons
Lesson 1: Unit Component and Integration TestsTest functions, components, user interactions, forms, and integrated feature behavior.90 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
45 min
Practice Activity
Apply the lesson through a guided frontend exercise.
37 min
Lesson 2: Mocking APIs and E2E Testing OverviewMock API responses and understand Playwright/Cypress E2E testing workflows.80 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
40 min
Practice Activity
Apply the lesson through a guided frontend exercise.
32 min
Module 2: Performance and AccessibilityImprove Core Web Vitals, images, bundle size, lazy loading, semantic UI, accessibility, and keyboard navigation.3 lessons
Lesson 1: Frontend Performance FundamentalsUnderstand Core Web Vitals, image optimization, bundle size, lazy loading, and performance debugging.85 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
42 min
Practice Activity
Apply the lesson through a guided frontend exercise.
35 min
Lesson 2: Accessibility Testing and Semantic UITest accessibility using semantic HTML, labels, keyboard navigation, focus, contrast, and screen-reader-friendly patterns.85 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
42 min
Practice Activity
Apply the lesson through a guided frontend exercise.
35 min
Lesson 3: Project - Frontend Performance and Accessibility AuditAudit and improve one existing project for performance and accessibility.110 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
55 min
Practice Activity
Apply the lesson through a guided frontend exercise.
47 min
8Phase 8 - Deployment Portfolio and CapstoneDeploy production frontend apps, work professionally with teams, document projects, complete capstone, and present portfolio-ready work.3 modules7 lessonsWeeks 22–24
Module 1: DeploymentDeploy Next.js and frontend applications with environment variables, Vercel, build errors, previews, production config, and backend API connections.2 lessons
Lesson 1: Environment Variables Builds and Production ConfigHandle environment variables, build commands, production config, API URLs, and build errors.80 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
40 min
Practice Activity
Apply the lesson through a guided frontend exercise.
32 min
Lesson 2: Vercel Deployment and Preview DeploymentsDeploy frontend apps with Vercel-style workflows, previews, domains, production checks, and backend API connection.85 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
42 min
Practice Activity
Apply the lesson through a guided frontend exercise.
35 min
Module 2: Professional Frontend WorkflowWork with tasks, pull requests, code reviews, READMEs, frontend documentation, designers, and backend engineers.2 lessons
Lesson 1: Task Boards Pull Requests and Code ReviewsUse Jira/task boards, PRs, code reviews, review comments, and frontend QA workflow.75 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
37 min
Practice Activity
Apply the lesson through a guided frontend exercise.
30 min
Lesson 2: README Documentation and Team CollaborationWrite READMEs, component docs, setup guides, and collaborate with designers/backend engineers.75 minarticle3 pages
Overview and Learning Objectives
Introduce the lesson and expected outcomes.
8 min
Concepts and Professional Workflow
Explain the concept through a professional frontend workflow.
37 min
Practice Activity
Apply the lesson through a guided frontend exercise.
30 min
Module 3: Frontend CapstoneBuild, deploy, document, test, and present a production-grade frontend capstone.3 lessons
Lesson 1: Capstone OptionsChoose a serious frontend capstone option.70 minarticle1 pages
Choose Your Frontend Capstone
Review approved capstone options.
70 min
Lesson 2: Final Project - Frontend Software Engineering CapstoneStudents build, test, deploy, document, and present a production-grade frontend application.220 minarticle2 pages
Project Brief
Explain the project scenario and expected output.
20 min
Review Checklist
Checklist for project quality.
20 min
Lesson 3: Graduation Requirements and Portfolio OutcomeClarify completion requirements and portfolio outputs.60 minarticle1 pages
Requirements and Portfolio Checklist
Summarize graduation requirements and portfolio assets.
60 min
Tools and skills
Build skill with the tools used in the work.
Understand how modern frontend applications work.Build responsive web pages with clean structure and styling.Create reusable React components.Use props, state, hooks, and component composition effectively.Build forms with validation and user feedback.Connect frontend applications to backend APIs.Handle loading states, errors, empty states, and success states.Build authentication flows and protected pages.Use TypeScript to write safer and more maintainable frontend code.Build applications with Next.js.Understand routing, rendering, and deployment basics.Improve frontend performance and user experience.Build portfolio-ready frontend projects.Prepare for junior frontend and full-stack engineering roles.
Projects and exercises
- Understand how modern frontend applications work.
- Structured exercises
- Portfolio practice
Resources included
- Course resources
- Project guidance
- Learners building practical tech skills
- A willingness to practice consistently
Career relevance
Frontend Software Engineering with React, Next.js & TypeScript supports practical career readiness.
Related Professional Diploma
View Professional DiplomaFull Stack Software Engineering
Learn how to build complete web applications with backend APIs, databases, authentication, frontend interfaces, deployment, and full-stack product delivery.
FAQ
Questions about this Short Course.
Short Course answers about scope, projects, support, and next steps.
Yes, but learners should be ready for consistent practice. The course starts with frontend fundamentals before moving into React, Next.js, TypeScript, API integration, and production workflows.
Related Short Courses
View all Short CoursesContinue building connected skills.
School of EngineeringBackend EngineeringBeginner to Intermediate
Backend Software Engineering with Python & Django
Build secure APIs, databases, authentication systems, background jobs, and backend services that power real applications.
Learn how to build the server-side systems behind modern web, mobile, and desktop applications, including APIs, databases, authentication, permissions, testing, deployment, and production workflows.
From₦180,000
24 weeks - 6-8 hours/week
Understand how backend systems power modern applications.
Project included
Mentor review available
Professional Diploma application
Continue through Full Stack Software Engineering.
This course is included in a Professional Diploma, so tuition enrollment is handled after the diploma application flow.