A focused frontend engineering lab where I build a strong foundation in modern frontend development by implementing one core concept at a time — from scratch, by hand — and documenting the engineering decisions behind each implementation.
Rather than chasing frontend frameworks or trends, this lab focuses on the fundamental engineering concepts behind modern user interfaces, including components, state, routing, forms, API integration, and testing. These fundamentals provide the foundation for more advanced frontend engineering.
Each concept lives in its own folder with runnable code, concise documentation, and implementation notes explaining the underlying ideas and engineering principles.
This repository follows the same learning philosophy as the Python Engineering Lab.
- One engineering concept at a time.
- Build the first implementation myself before consulting references.
- Keep every example intentionally small and focused.
- Document not only what works, but why it works.
The goal is not to master a frontend framework overnight, but to build a solid understanding of the engineering principles behind modern frontend applications.
You'll need:
- Node.js
- npm
git clone https://github.com/ajitagupta/frontend-engineering-lab.git
cd frontend-engineering-labEach folder is completely self-contained.
cd 01-typescript-fundamentals
npm install
npm run devFollow the README inside each folder for setup instructions and learning notes.
| Concept | Skill | Status | Folder |
|---|---|---|---|
| 01 — TypeScript Fundamentals | Types, interfaces, utility types, generics | ⬜ Planned | coming soon |
| 02 — Component Architecture | Building reusable UI components | ⬜ Planned | coming soon |
| 03 — JSX & Rendering | Conditional rendering, lists, composition | ⬜ Planned | coming soon |
| 04 — Events & State | useState, lifting state, Context basics | ⬜ Planned | coming soon |
| 05 — Effects & Browser APIs | useEffect, browser APIs, synchronization | ⬜ Planned | coming soon |
| 06 — Forms & Validation | Controlled inputs, validation, typed forms | ⬜ Planned | coming soon |
| 07 — Data Fetching | Fetch API, async state, loading & errors | ⬜ Planned | coming soon |
| 08 — Routing & Layouts | Navigation, nested layouts, routing | ⬜ Planned | coming soon |
| 09 — Reusable UI Components | Buttons, cards, tables, dialogs | ⬜ Planned | coming soon |
| 10 — Responsive Layouts | Flexbox, Grid, Tailwind, responsive design | ⬜ Planned | coming soon |
| 11 — Component Testing | React Testing Library + Vitest | ⬜ Planned | coming soon |
| 12 — End-to-End Testing | User journeys with Playwright | ⬜ Planned | coming soon |
This lab primarily uses:
- React
- TypeScript
- Vite
- React Router
- Tailwind CSS
- Vitest
- React Testing Library
- Playwright
These technologies are intentionally kept to a minimum.
The goal of this lab is not to learn a large ecosystem of libraries, but to build a solid understanding of the core engineering patterns behind modern frontend applications.
By completing this lab, I aim to become comfortable with:
- Building reusable React components
- Writing type-safe frontend applications
- Managing state and user interactions
- Creating forms and handling validation
- Consuming REST APIs
- Structuring multi-page applications
- Building responsive user interfaces
- Testing components and complete user journeys
The objective is to master the frontend fundamentals before moving on to advanced topics such as authentication, state management libraries, performance optimisation, accessibility, design systems, and production engineering.
A frontend engineering practice project documenting my journey toward becoming a stronger software engineer — one concept genuinely understood at a time.