Full Stack App Tutorial: NestJS + React

Why NestJS + React?

Modern web development demands robust, scalable architectures that can handle complex business requirements while delivering exceptional user experiences. The combination of NestJS as a backend framework and React as a frontend library has emerged as a powerful pairing for building full-stack applications that excel in both performance and maintainability.

The appeal of NestJS lies in its opinionated architecture inspired by Angular, bringing enterprise-grade patterns to the Node.js ecosystem. Unlike Express or Koa, which leave architectural decisions entirely to developers, NestJS provides a structured foundation built on modules, controllers, and providers. This structure becomes invaluable as applications grow in complexity, making it easier to maintain codebases, onboard new developers, and scale teams effectively.

For businesses looking to build full-stack applications, the NestJS and React combination offers a mature, well-documented ecosystem with extensive libraries for every requirement from authentication to database access. Our team specializes in implementing these architectures for clients across various industries.

Key Advantages

• TypeScript-First: Both frameworks share TypeScript as a first-class citizen, enabling end-to-end type safety
• Unified Mental Model: Component patterns in React map directly to modules in NestJS
• Mature Ecosystem: Extensive libraries for authentication, database access, and more
• Scalability: Opinionated structure makes it easier to maintain and grow applications

Auth0's modern full-stack development guide

Setting Up Your Development Environment

Before diving into code, ensure your development environment is properly configured. This foundational setup prevents common issues that can derail development progress, particularly around TypeScript compilation and module resolution.

Prerequisites and Initial Configuration

Begin by installing the NestJS CLI, which provides essential tooling for generating boilerplate code and managing project structure:

# Install NestJS CLI globally
npm install -g @nestjs/cli

# Create a new NestJS project
nest new backend-api

# Navigate to project directory
cd backend-api

# Start development server
npm run start:dev

The CLI generates a standardized project structure that promotes consistency across NestJS applications. The default configuration includes TypeScript compilation settings optimized for development workflows, with hot reloading enabled through the start:dev script.

For the React frontend, create a new project using Vite for a faster development experience:

# Using Vite for faster development experience
npm create vite@latest frontend-app -- --template react-ts

# Install dependencies
cd frontend-app
npm install

# Start development server
npm run dev

freeCodeCamp's NestJS Handbook

Modules: Organizing Application Logic

Modules serve as logical boundaries that group related functionality. Every NestJS application has at least one root module, typically named AppModule, which ties together all other components. Feature modules decompose applications into focused domains, each responsible for a specific business capability.

@Module({
 imports: [DatabaseModule],
 controllers: [UsersController],
 providers: [UsersService],
 exports: [UsersService],
})
export class UsersModule {}

The module decorator accepts several properties: imports declares dependencies on other modules, controllers registers HTTP request handlers, providers defines services available for dependency injection, and exports makes providers available to importing modules. This clear separation enables applications to grow without becoming unwieldy, as each module maintains focused responsibilities. freeCodeCamp's NestJS Handbook

Controllers: Handling HTTP Requests

Controllers receive incoming HTTP requests, delegate to providers for business logic, and return responses. They define routes through decorator-based routing, keeping route definitions co-located with their handlers.

@Controller('users')
export class UsersController {
 constructor(private readonly usersService: UsersService) {}

 @Post()
 @HttpCode(HttpStatus.CREATED)
 async create(@Body() createUserDto: CreateUserDto): Promise<UserResponseDto> {
 const user = await this.usersService.create(createUserDto);
 return UserResponseDto.fromEntity(user);
 }

 @Get(':id')
 async findOne(@Param('id') id: string): Promise<UserResponseDto> {
 const user = await this.usersService.findOne(id);
 return UserResponseDto.fromEntity(user);
 }
}

The controller pattern promotes thin layers that delegate business logic to services. This separation enhances testability--controllers can be tested with mock services, while services can be tested independently of HTTP concerns. Decorators like @Get, @Post, @Body, and @Param provide type-safe access to request data, eliminating manual parsing and validation code. LogRocket's full-stack app tutorial

Providers: Business Logic and Data Access

Providers encompass services, repositories, factories, and other injectable dependencies. The @Injectable decorator marks classes as available for NestJS's dependency injection system, enabling loose coupling between components.

@Injectable()
export class UsersService {
 constructor(
 private readonly usersRepository: UsersRepository,
 private readonly emailService: EmailService,
 private readonly logger: LoggerService,
 ) {}

 async create(createUserDto: CreateUserDto): Promise<User> {
 const existingUser = await this.usersRepository.findByEmail(createUserDto.email);
 if (existingUser) {
 throw new ConflictException('User with this email already exists');
 }
 const user = User.create(createUserDto);
 return this.usersRepository.save(user);
 }
}

Services encapsulate business logic, validation rules, and data access operations. By depending on abstractions rather than concrete implementations, services remain flexible and testable. The constructor-based injection pattern makes dependencies explicit and enables sophisticated testing strategies through mocking. freeCodeCamp's NestJS Handbook

Building RESTful APIs with Validation

With foundational concepts established, implement a complete REST API following best practices for routing, validation, error handling, and documentation.

Request Validation with Pipes

NestJS's pipe system transforms and validates incoming data before it reaches handlers. Pipes execute after middleware but before guards and interceptors, making them ideal for input validation.

export class CreateUserDto {
 @IsEmail()
 email: string;

 @IsString()
 @MinLength(8)
 @MaxLength(50)
 password: string;

 @IsString()
 @MinLength(1)
 @MaxLength(100)
 firstName: string;

 @IsString()
 @MinLength(1)
 @MaxLength(100)
 lastName: string;
}

Data Transfer Objects (DTOs) define input validation rules using class-validator decorators. The ValidationPipe, enabled globally in main.ts, automatically validates incoming request bodies against these rules, returning clear error messages for invalid inputs. This approach keeps validation logic declarative and centralized. freeCodeCamp's NestJS Handbook

Database Integration

Modern applications require robust data persistence. NestJS supports various database ORMs through dedicated modules, with TypeORM and Prisma being the most popular choices.

Setting Up TypeORM

@Module({
 imports: [
 TypeOrmModule.forRootAsync({
 imports: [ConfigModule],
 inject: [ConfigService],
 useFactory: (configService: ConfigService) => ({
 type: 'postgres',
 host: configService.get('DB_HOST', 'localhost'),
 port: configService.get('DB_PORT', 5432),
 username: configService.get('DB_USERNAME', 'postgres'),
 password: configService.get('DB_PASSWORD', 'postgres'),
 database: configService.get('DB_DATABASE', 'app'),
 entities: [User, Product, Order],
 synchronize: configService.get('NODE_ENV') === 'development',
 logging: configService.get('NODE_ENV') === 'development',
 }),
 }),
 ],
})
export class DatabaseModule {}

TypeORM integration provides familiar Active Record or Data Mapper patterns for Node.js developers. The asynchronous configuration through useFactory enables environment-based configuration, keeping sensitive credentials out of version control while supporting different settings across development, staging, and production environments. freeCodeCamp's NestJS Handbook

Integrating React Frontend

With the backend API complete, build a React frontend that consumes these endpoints. Modern React development leverages hooks and functional components for concise, expressive code.

API Client Configuration

const apiClient = axios.create({
 baseURL: import.meta.env.VITE_API_URL || 'http://localhost:3000',
 headers: { 'Content-Type': 'application/json' },
 withCredentials: true,
});

// Request interceptor for authentication
apiClient.interceptors.request.use((config) => {
 const token = localStorage.getItem('auth_token');
 if (token) {
 config.headers.Authorization = `Bearer ${token}`;
 }
 return config;
});

Centralized API configuration ensures consistent behavior across all HTTP requests. Interceptors handle authentication injection and response error processing, keeping component code focused on UI concerns. For teams building AI-powered applications, integrating machine learning APIs follows similar patterns using Axios interceptors and React Query hooks. LogRocket's full-stack app tutorial

Authentication and Security

Production applications require robust authentication. Implementing JWT-based authentication with NestJS and React demonstrates security patterns applicable to any full-stack application.

JWT Strategy Implementation

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
 async validate(payload: { sub: string; email: string }) {
 const user = await this.usersService.findOne(payload.sub);

 if (!user) {
 throw new UnauthorizedException('User not found');
 }

 return {
 id: user.id,
 email: user.email,
 role: user.role,
 };
 }
}

JWT strategies extract and validate tokens from requests, transforming JWT payloads into authenticated user objects available throughout the request lifecycle. This validation step is crucial--it ensures only valid, existing users can access protected resources. Security implementations should also consider SEO implications of authenticated routes and proper sitemap generation for public content. Auth0's modern full-stack development guide

Performance Best Practices

Full-stack applications require attention to performance at multiple levels. Implementing caching, database optimization, and frontend best practices ensures responsive user experiences.

Backend Caching

@Global()
@Module({
 imports: [
 NestCacheModule.registerAsync({
 imports: [ConfigModule],
 inject: [ConfigService],
 useFactory: async (configService: ConfigService) => ({
 store: 'memory',
 ttl: 60000, // 1 minute default TTL
 max: 1000, // Maximum cache entries
 }),
 }),
 ],
})
export class CacheModule {}

Caching reduces database load and response times for frequently accessed data. NestJS's cache module provides a unified interface regardless of the underlying store, with Redis recommended for production deployments requiring distributed caching across multiple instances. Performance optimization directly impacts search engine rankings, making caching strategies essential for discoverable applications. freeCodeCamp's NestJS Handbook

Testing Strategies

Comprehensive testing ensures code quality and prevents regressions. NestJS and React both support testing at multiple levels--unit, integration, and end-to-end.

Backend Unit Testing

describe('UsersService', () => {
 let service: UsersService;
 let repository: Repository<User>;

 const mockRepository = {
 find: jest.fn(),
 findOne: jest.fn(),
 save: jest.fn(),
 remove: jest.fn(),
 create: jest.fn(),
 };

 it('should create a new user successfully', async () => {
 const createUserDto = {
 email: '[email protected]',
 password: 'password123',
 firstName: 'John',
 lastName: 'Doe',
 };

 mockRepository.findOne.mockResolvedValue(null);
 mockRepository.save.mockResolvedValue({ id: 'uuid-123', ...createUserDto });

 const result = await service.create(createUserDto);
 expect(result).toHaveProperty('id');
 expect(mockRepository.save).toHaveBeenCalled();
 });
});

Unit tests isolate components from their dependencies through mocking, enabling fast feedback during development. NestJS's Test utility creates isolated testing modules where providers can be replaced with mocks, verifying behavior without database or network dependencies. freeCodeCamp's NestJS Handbook

Conclusion

Building full-stack applications with NestJS and React combines two powerful technologies with complementary philosophies. NestJS's opinionated architecture brings structure and scalability to backend development, while React's component model enables efficient frontend development. Together, they form a foundation capable of supporting applications from simple prototypes to enterprise-scale systems.

The patterns explored throughout this tutorial--modular architecture, dependency injection, RESTful API design, database integration, authentication, and testing--apply broadly across full-stack development. Mastering these fundamentals enables developers to build maintainable, performant applications.

As you extend this foundation, consider exploring GraphQL integration for more flexible APIs, WebSocket support for real-time features, and microservices architecture for distributed systems. The NestJS ecosystem provides first-party modules for these advanced requirements. For organizations seeking to implement comprehensive digital solutions, our team can help architect and build production-ready full-stack applications. LogRocket's full-stack app tutorial freeCodeCamp's NestJS Handbook Auth0's modern full-stack development guide