DEV Community

Cover image for Complete Full-Stack Web App Development Roadmap
Daan Balm
Daan Balm

Posted on

25 3

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

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

    npm install -g @nestjs/cli
    

Step 2: Build the Backend with Nest.js

  1. Set Up a New Nest.js Project:
   nest new backend
Enter fullscreen mode Exit fullscreen mode
  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 with Vite:
   npm create vite@latest frontend --template react-ts
Enter fullscreen mode Exit fullscreen mode

Follow the prompts to set up your project.

  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"
Enter fullscreen mode Exit fullscreen mode
  1. Start Everything:
   docker-compose up --build
Enter fullscreen mode Exit fullscreen mode

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

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (4)

Collapse
 
moibra profile image
Mohamed Ibrahim

Thanks for sharing.. really appreciate it

Collapse
 
officialphaqwasi profile image
Isaac Klutse

Very interesting 👌, thanks for the guide 👍

Collapse
 
roladev profile image
Arol

Interesting. Thank you for the guide.

I wonder why you choose Nest instead of Express and why CRA instead of something more trending such a NextJS

Collapse
 
daanbalm profile image
Daan Balm

Thanks, I really appreciate it!

This article actually began as advice for a novice friend of mine. I’ve noticed that many beginners struggle early on, often starting off on the wrong foot. That’s why I think NestJS is a great choice, it provides a clear structure that naturally introduces concepts like MVC patterns and database organization.

By contrast, jumping straight from vanilla JavaScript to NextJS might feel like too big of a leap for someone just starting out.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More