Modern Frontend Documentation

Welcome to the Modern Frontend Documentation! This guide covers best practices, project setup, architecture, and development techniques to build scalable and maintainable frontend applications.

Most professional fields have specialized branches growing off of their original trunk. Medicine has cardiology, dentistry has orthodontology, and so on. That tends to happen when the amount of information in a subject becomes too much for one person to know it all. At the same time, holistic views are obviously still necessary. But how can we find an adequate balance between depth and breadth of knowledge?

Professional Frontend Architecture, pg: 11

Presentation Domain Separation: martinfowler.com

One of the most useful design principles that I've found and followed is that of keeping a good separation between the presentation aspects of a program (the user interface) and the rest of the functionality. Over the years where I've seen this done, I've seen plenty of benefits:

Presentation logic and domain logic are easier to understand when separate.
You can support multiple presentations on the same base program without duplicating code.
User interfaces are hard to test, separation keeps more logic in more testable places.
You can easily add a programmatic API for scripting or exposed as services (I actually see these as alternative presentations).
Presentation code requires different skills and knowledge to domain code.

This principle is the most prominent part of Model View Controller (MVC), indeed for many people MVC is how they describe this separation.

Modularizing React Applications with Established UI Patterns

Presentation Domain Data Layering

One of the most common ways to modularize an information-rich program is to separate it into three broad layers: presentation (UI), domain logic (aka business logic), and data access. So you often see web applications divided into a web layer that knows about handling HTTP requests and rendering HTML, a business logic layer that contains validations and calculations, and a data access layer that sorts out how to manage persistent data in a database or remote services.

Presentation Domain Data Layering

🌐 What Is a Design System?

A Design System is a collection of reusable components, design tokens, patterns, and documentation that define the look, feel, and behavior of a user interface.

🧱 Core Components of a React Design System

Design Tokens
Component Library (React-based)
Theming Support
Layout Utilities
Accessibility Standards
Documentation Site (Style Guide)
Testing Strategy

🧭 React Design System — System Relation Diagram (Text Visual)

                                      ┌──────────────────┐
                                      │     Figma / UX   │
                                      │    (Design Ref)  │
                                      └────────▲─────────┘
                                               │
                                 ┌─────────────┴─────────────┐
                                 │   Design Tokens (colors,  │
                                 │   spacing, fonts, etc.)   │
                                 └─────────────┬─────────────┘
                                               │
                             ┌─────────────────┴──────────────────┐
                             │                                    │
                   ┌─────────▼─────────┐                ┌─────────▼─────────┐
                   │     Themes        │                │     Utilities     │
                   │  (Light/Dark etc) │                │ (classNames, etc) │
                   └─────────┬─────────┘                └─────────┬─────────┘
                             │                                    │
                             ▼                                    ▼
                   ┌────────────────────┐             ┌────────────────────┐
                   │   Styled Components│             │     Layout System   │
                   │ (Button, Input...) │             │  (Grid, Flex, etc)  │
                   └─────────┬──────────┘             └─────────┬──────────┘
                             │                                  │
                             └────────────┬────────────┬────────┘
                                          ▼            ▼
                                 ┌──────────────────────────┐
                                 │   Component Library       │
                                 │  (React Components)       │
                                 └─────────┬────────────────┘
                                           │
             ┌─────────────────────────────┴─────────────────────────────┐
             ▼                                                           ▼
     ┌────────────────────┐                                   ┌────────────────────┐
     │ Storybook / Docs   │◄──── Visual, Dev & UX Testing ────┤ Unit + Visual Tests │
     │ (MDX, Stories)     │                                   │ (Jest, Chromatic)   │
     └────────────────────┘                                   └────────────────────┘
                                           │
                                           ▼
                                 ┌────────────────────┐
                                 │  App / Consumer UI │
                                 │ (Product Teams)    │
                                 └────────────────────┘
                                           │
                                           ▼
                                 ┌────────────────────┐
                                 │ NPM Package Export │
                                 │ or Monorepo Shared │
                                 └────────────────────┘

🧪 Testing Layers

[Unit Tests] → Component logic, hooks, and utils
[Integration Tests] → Component + Theme/Token interaction
[Visual Tests] → Storybook snapshots or Chromatic

📦 Packaging/Distribution Flow

src/
 └─ components/
     └─ Button.tsx → exported in index.ts
                     ↓
                 Compiled via tsup/rollup
                     ↓
               Published to npm registry

Quote

T-Shaped

Full-stack = speaks frontend + backend languages
Polyglot frontend = speaks multiple frontend “dialects”

Why it matters for you

Full-stack skills: Make you competitive for international companies and remote work. You’re not limited to frontend-only roles.
Polyglot frontend skills: Makes you flexible and adaptable. Employers know you can pick up any frontend framework quickly.

What You Will Learn

Setting up a modern frontend project
Utilizing feature-based architecture
Implementing micro frontends
Handling state management
Following code guidelines
Optimizing performance
Testing your application
Deploying with CI/CD

Let's get started!

Shared Dependencies

The biggest problem with shared dependencies is that the parts of the software that use the shared code can diverge in their requirements.

When this happens, a developer’s reflex is to cater to different needs while using the same code. That means adding optional parameters, conditional logic to make sure that the shared code can serve two different requirements. This makes the actual code more complicated, eventually causing more problems than it solves. At some point, you start thinking about a more complicated design than copy-pasted code. (1)

page: 66

Street Coder

A street coder is anyone with software development experience in the industry who has had their beliefs and theories shaped by the realities of an unreasonable boss who wanted a week’s worth of work done in the morning.

Great street coders

In addition to street cred, honor, and loyalty, a street coder ideally possesses these qualities:

Questioning
Results-driven (aka, “results-oriented” in HR-speak)
High-throughput
Embracing complexity and ambiguity

Great software developers are not just great coders

Being a great work colleague involves many more skills than just putting bits and bytes into a computer. You need to be good at communication, provide constructive feedback, and accept criticism like a champion. Even Linus Torvaldsa admitted that he needed to work on his communication skills. However, such skills are outside the scope of this book. You will have to make friends.

Street Coder Stack Heap

Enum

Enums are great for holding discrete ordinal values. Classes can also be used to define discrete values, but they lack certain affordances that enums have.

Enums are also value types, which means they are as fast as passing around an integer value.

Year 1: Master React & Ecosystem

Goal: Become a React expert and build a strong portfolio.

Months	Focus	Key Skills	Milestones / Projects
1–2	React Fundamentals	JSX, components, props, state, events	Small “todo app” + GitHub repo
3–4	Hooks & Patterns	useState, useEffect, useContext, custom hooks	Medium project (CRUD with API)
5–6	State Management	Redux Toolkit, Zustand, Recoil	Add global state to project
7	Routing	React Router, basic Next.js routing	Multi-page project
8	Forms & Validation	React Hook Form, controlled/uncontrolled forms	Form-heavy app (e.g., expense tracker)
9	Testing	Jest, React Testing Library basics	Unit tests for existing projects
10	TypeScript	Types for components, hooks, API	Convert 1 project fully to TS
11–12	Styling & Deployment	TailwindCSS, Styled Components, Vercel/Netlify	Deploy 2 production-ready apps

Year 1 Output

2–3 production apps deployed online
Strong React + TS + Hooks portfolio

Year 2: Secondary Framework & Advanced Skills

Goal: Expand versatility and prepare for global job market

Months	Focus	Key Skills	Milestones / Projects
1–2	Secondary Framework Basics	Vue 3 (Composition API) or Angular	Small project in chosen framework
3–4	Next.js Advanced	SSR/SSG, dynamic routes, API routes	Advanced Next.js project
5–6	API & Data	REST + GraphQL, Axios, React Query	Fetch & display API data in projects
7	Performance	Lazy loading, code splitting, bundle analysis	Optimize Next.js app
8	Advanced Testing	Integration, E2E, API mocking	Test Next.js / secondary framework project
9–10	Responsive & Accessibility	Flexbox/Grid, WCAG compliance	Improve all existing projects
11–12	Secondary Framework Project	Build 1 mid-size app fully in secondary framework	Portfolio-ready project

Year 2 Output:

1 project in secondary framework
Advanced React + Next.js project
Internationally competitive portfolio

Year 3: Full-stack & International Readiness

Goal: Be ready for remote / abroad positions

Months	Focus	Key Skills	Milestones / Projects
1–2	Backend Basics	Node.js + Express or Nest.js, REST APIs	Simple backend API for portfolio
3–4	Database	PostgreSQL / MongoDB / Supabase	Connect backend to database
5–6	Full-stack Integration	Next.js + Node.js + DB	Full-stack portfolio app
7	Authentication & Security	JWT, OAuth2, Firebase Auth	Secure full-stack project
8–9	Cloud & Deployment	AWS / Vercel / Netlify, CI/CD	Deploy full-stack app with CI/CD
10	Open Source & Portfolio	Contribute to GitHub projects	Showcase contributions internationally
11–12	Interview Prep & Soft Skills	Algorithms, frontend architecture, agile	Ready for remote/international interviews

Year 3 Output:

1–2 full-stack projects deployed online
Open-source contributions
Portfolio + resume ready for international companies

✅ Summary / Key Takeaways

React + TypeScript + Next.js = core skill worldwide
Secondary framework = versatility + local market advantage
Full-stack + cloud + testing = international standard
Portfolio & GitHub contributions = proof of skill for visa/job abroad

Fast forward

Yes—you can absolutely fast-forward because you’re not starting from zero. You already have 3 years in React + Redux Toolkit Query + AntD, which covers a big chunk of “Year 1” in that roadmap. Instead of 3 years, you can realistically compress it into ~6–9 months if you focus smartly.

Here’s how:

🚀 Fast-Track Plan (6–9 Months)

Month 1–2 → Fill React Gaps + TypeScript

Deepen TypeScript with React (generics, utility types, typing RTK query responses).
Add React Testing (Jest, React Testing Library, Cypress basics).
Learn performance optimizations (memoization, code splitting, Suspense).
Deploy 1–2 polished apps (on Vercel/Netlify).

✅ Outcome: You’re no longer just “React dev” → you’re a React + TypeScript + Testing specialist.

Month 3–4 → Secondary Framework + Next.js Advanced

Pick Vue (Composition API) or Angular (depending on future target market).
Build 1 small project in chosen framework.
Learn Next.js deeply: SSR/SSG, API routes, auth.
Explore GraphQL with Apollo/Urql or integrate with RTK Query.

✅ Outcome: You’re a polyglot frontend dev with React + another framework + modern Next.js.

Month 5–6 → Full-stack + International Standards

Learn Node.js + Express/Nest.js basics.
Connect to PostgreSQL/MongoDB/Supabase.
Implement auth (JWT, OAuth2, Firebase Auth).
Learn cloud basics (AWS, Vercel, Netlify).
Set up CI/CD pipelines (GitHub Actions).
Contribute to open source or side project.

✅ Outcome: You’re a full-stack-ready frontend dev with international-level skills.

⏩ Optional Month 7–9 (If you want to be extra strong before applying abroad)

Explore Svelte or Solid for cutting-edge understanding.
Improve algorithms + system design basics for interviews.
Prepare portfolio + GitHub contributions + resume for global opportunities.

🎯 In Summary

Instead of 3 years, you can condense the roadmap into ~6–9 months.
The key is not to relearn React basics (you already know them).
Focus on TypeScript, testing, Next.js advanced, one secondary framework, full-stack, and cloud/CI/CD.

Reference Book

Books

Professional Frontend Architecture by Fabio Nolasco

Front-End Reactive Architectures

Crafting Clean Code with JavaScript and React

Modern Front-end Architecture by Ryan Lanciaux