Complete Full-Stack Web App Development Roadmap

Phase 1: Learning Phase (Foundations First!)

1. TypeScript: Learn Strong Typing

• Why? It makes JavaScript safer and is critical for both Nest.js and React.
• What to Learn:
  • Basic types (string, number, boolean, array, any).
  • Functions and type annotations.
  • Interfaces, Generics, and Utility Types (e.g., Partial, Pick).
  • Classes and inheritance.
• Suggested Resources:
  • TypeScript Handbook
  • TypeScript Full Course by FreeCodeCamp
  • TypeScript Exercises
• Milestone:
  • Write a simple program in TypeScript that validates user input (e.g., email and password).

---

2. Learn Git: Version Control Basics

• Why? You’ll need Git to manage code versions and collaborate.
• What to Learn:
  • Basic commands: clone, add, commit, push.
  • Creating and merging branches.
  • Resolving merge conflicts.
• Suggested Resources:
  • Git Handbook
  • Try using GitHub Desktop if you prefer a GUI.

---

3. Nest.js: Backend Framework

• Why? Nest.js helps you build scalable APIs with TypeScript-first support.
• What to Learn:
  • Controllers, Services, Modules, Dependency Injection.
  • REST API basics: CRUD operations.
  • Validation with DTOs and class-validator.
• Suggested Resources:
  • Nest.js Docs
  • Nest.js Crash Course (YouTube)
• Milestone:
  • Build a simple API that manages a "task list" with endpoints for creating, reading, updating, and deleting tasks.

---

4. React: Frontend Library

• Why? React is used to build modern, component-based UIs.
• What to Learn:
  • JSX syntax, props, and state.
  • React Hooks: useState, useEffect, useContext.
  • Basic routing with react-router-dom.
• Suggested Resources:
  • React Docs
  • React Basics Course by Net Ninja
• Milestone:
  • Create a simple React app that displays a list of items and allows adding/removing items.

---

5. Chakra UI: UI Framework

• Why? Chakra makes building beautiful and accessible UIs effortless.
• What to Learn:
  • Layout components: Box, Flex, Grid, and Stack.
  • Styling components with Chakra props (e.g., colorScheme, p, m).
  • Theming basics.
• Suggested Resources:
  • Chakra UI Docs
  • Chakra UI Crash Course (YouTube)
• Milestone:
  • Create a responsive UI for a "To-Do List" app using Chakra components.

---

Phase 2: Building the Full-Stack Web App

Step 1: Set Up Your Environment

• Install necessary tools:

  • Node.js: Download
  • Docker: Download
  • Nest CLI:

  npm install -g @nestjs/cli
  

---

Step 2: Build the Backend with Nest.js

1. Set Up a New Nest.js Project:

   nest new backend

1. Create a Module and API Endpoints:

   • Example for Users:

    nest generate module users
    nest generate service users
    nest generate controller users
   

2. Define the Database Entity:

   • Example:

    @Entity()
    export class User {
      @PrimaryGeneratedColumn()
      id: number;
   
      @Column()
      name: string;
   
      @Column()
      email: string;
    }
   

3. Set Up PostgreSQL Database:

   • Install TypeORM and PostgreSQL driver:

    npm install @nestjs/typeorm typeorm pg
   

• Configure TypeORM in app.module.ts:
  

   TypeOrmModule.forRoot({
     type: 'postgres',
     host: 'localhost',
     port: 5432,
     username: 'nest_user',
     password: 'nest_password',
     database: 'nest_db',
     autoLoadEntities: true,
     synchronize: true,
   });
  

1. Add Swagger for API Documentation:

   • Install Swagger:

    npm install @nestjs/swagger swagger-ui-express
   

• Configure Swagger in main.ts:
  

   import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
  
   const config = new DocumentBuilder()
     .setTitle('API Documentation')
     .setDescription('API for the Full-Stack App')
     .setVersion('1.0')
     .build();
  
   const document = SwaggerModule.createDocument(app, config);
   SwaggerModule.setup('api', app, document);
  

---

Step 3: Build the Frontend with React

1. Create a React App:

   npx create-react-app frontend --template typescript

1. Consume the Backend API:

   • Generate an OpenAPI client using Swagger:

    npx openapi-generator-cli generate -i http://localhost:3000/api-json -g typescript-axios -o ./src/generated
   

• Use the client to fetch data in your React app:
  

   import { UsersApi } from './generated';
  
   const api = new UsersApi();
  
   const fetchUsers = async () => {
     const users = await api.getUsers();
     console.log(users);
   };
  

1. Design the UI with Chakra UI:

   • Example UI for displaying users:

    import { Box, Heading, Text } from '@chakra-ui/react';
   
    const UserCard = ({ name, email }) => (
      <Box p={4} borderWidth={1} borderRadius="lg">
        <Heading size="md">{name}</Heading>
        <Text>{email}</Text>
      </Box>
    );
   

---

Step 4: Deploy Everything with Docker

1. Create a docker-compose.yml File:

   version: '3.8'
   services:
     postgres:
       image: postgres:15
       environment:
         POSTGRES_USER: nest_user
         POSTGRES_PASSWORD: nest_password
         POSTGRES_DB: nest_db
       ports:
         - "5432:5432"
     backend:
       build: ./backend
       ports:
         - "3000:3000"
       depends_on:
         - postgres
     frontend:
       build: ./frontend
       ports:
         - "3001:3000"

1. Start Everything:

   docker-compose up --build

---

Final Checklist

1. Learning Milestones:
   • Master TypeScript and Git.
   • Build simple Nest.js and React apps.
   • Practice styling with Chakra UI.
2. Development Milestones:
   • Backend with Nest.js, Swagger, and PostgreSQL.
   • Frontend with React, OpenAPI Client, and Chakra UI.
   • Full deployment with Docker.

---

Disclaimer: After writing down this roadmap I used AI to clean it up and make it more readable.

---

Author:
Daan Balm

• GitHub: github.com/daanmlab
• LinkedIn: linkedin.com/in/daanbalm
• Website: daan-balm.me