Frontend Foundations — Overview & Your Practice Project

Who this track is for

This is the foundations path for engineers new to React (interns and early-career devs). It teaches the frontend fundamentals you should be comfortable with before you touch the AquaGen codebase. If you already build React apps confidently, skip straight to Installation & Setup and the Practice track in the Architecture section.

The goal: by the end you can build a small React app with state, data fetching, shared state, custom hooks, and version control — on your own, without following a tutorial line by line.

You get there by building one practice app and growing it page by page. Crucially, you'll structure it the way one AquaGen feature library is structured — so you're learning our architecture in miniature, not generic React you'll have to re-map later.

No code snippets — on purpose

These pages give you the concept, links to learn it, and a task — never the finished solution. Typing it yourself (and getting it wrong a few times) is how it sticks. Use the official docs linked on each page, not random blog posts.

---

Prerequisites

You should be comfortable with basic HTML, CSS, and general programming logic. You do not need prior React experience.

• HTML & CSS refresher — MDN: HTML basics, MDN: CSS basics
• Modern JavaScript refresher — MDN: JavaScript first steps

---

Your practice project: "DevDirectory"

You'll build a small app called DevDirectory — a browser for a public dummy API. No signup, no keys. Pick one API and stick with it:

• JSONPlaceholder — fake users, posts, todos.
• DummyJSON — products & users, with search & pagination.
• ReqRes — users with built-in pagination.

You'll grow DevDirectory across the five pages:

1. A list of items fetched from the dummy API.
2. A detail page for one item, reached by clicking it (routing).
3. Search & filter driven by the URL.
4. A Favorites feature shared across pages (Context).
5. Clean structure, reusable hooks, lazy-loaded pages — plus the full Git → GitHub → PR flow.

Structure it like one of our libraries

As DevDirectory grows, organize it into the same four layers every AquaGen feature library uses — just smaller:

src/
  dataSource/   → the Axios calls to the dummy API      (~ libs/<feature>/src/dataSource)
  controller/   → logic that shapes/combines the data   (~ libs/<feature>/src/controller)
  store/        → shared state via React Context         (~ libs/<feature>/src/store)
  components/   → the UI                                  (~ libs/<feature>/src/components)

Each page below tells you which layer you're adding. By page 5 you'll have a tiny, working version of the exact shape you'll see in the real repo.

---

How the track is organized

Page	You'll add to DevDirectory	AquaGen layer
1. Setup & React fundamentals	Tooling, GitHub account & Git, CRA scaffold, first components	components/
2. State, effects & lists	Interactivity, side effects, rendering lists	components/
3. Data fetching & routing	Dummy-API data + multiple pages + URL params	dataSource/
4. Context & custom hooks	App-wide state + reusable logic	store/, controller/
5. Best practices & workflow	Structure, code splitting, Git & GitHub PR flow, capstone	all four

Work through them in order. Ready? → Setup & React fundamentals

When you finish, everyone continues the same way: Installation & Setup to run the real app, then the Practice track in the Architecture section.

---

About the tooling

This track scaffolds the practice app with Create React App (CRA) because it's the simplest way to spin up a throwaway learning app. Note that CRA is no longer actively maintained — for real new projects the React team recommends a build tool like Vite or a framework (see Start a New React Project). Everything you learn here transfers directly; only the initial scaffold command would differ.