Complete Full-Stack Web App Development Roadmap

Daan Balm — Thu, 09 Jan 2025 18:58:54 +0000

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:
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

Set Up a New Nest.js Project:

   nest new backend

Create a Module and API Endpoints:

Example for Users:

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

Define the Database Entity:

Example:

 @Entity()
 export class User {
   @PrimaryGeneratedColumn()
   id: number;

   @Column()
   name: string;

   @Column()
   email: string;
 }

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,
 });

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

Create a React App with Vite:

   npm create vite@latest frontend --template react-ts

Follow the prompts to set up your project.

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);
 };

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

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"

Start Everything:

   docker-compose up --build

Final Checklist

Learning Milestones:
- Master TypeScript and Git.
- Build simple Nest.js and React apps.
- Practice styling with Chakra UI.
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

DEV Community: Daan Balm