Fullstack Project - Next.js + Express.js

A fullstack application with Next.js frontend and Express.js backend, containerized with Docker.

Project Structure

.
├── frontend/              # Next.js frontend application
│   ├── app/              # Next.js app directory
│   ├── components/       # React components
│   ├── lib/              # Utility functions
│   ├── public/           # Static assets
│   ├── Dockerfile        # Docker configuration for frontend
│   └── package.json      # Frontend dependencies
├── backend/              # Express.js backend application
│   ├── src/              # Source code
│   │   ├── controllers/  # Route controllers
│   │   ├── routes/       # API routes
│   │   ├── middleware/   # Custom middleware
│   │   └── index.ts      # Application entry point
│   ├── Dockerfile        # Docker configuration for backend
│   └── package.json      # Backend dependencies
├── docker-compose.yml    # Docker Compose configuration
└── README.md            # This file

Prerequisites

• Docker
• Docker Compose

Getting Started

Using Docker Compose (Recommended)

1. Clone the repository
2. Navigate to the project root
3. Run the following command:

docker-compose up --build

This will:

• Build both frontend and backend Docker images
• Start both services
• Expose the frontend on http://localhost:3000
• Expose the backend on http://localhost:5000

Individual Development

Frontend (Next.js)

cd frontend
npm install
npm run dev

The frontend will be available at http://localhost:3000

Backend (Express.js)

cd backend
npm install
npm run dev

The backend will be available at http://localhost:5000

API Endpoints

• GET / - Welcome message
• GET /api/health - Health check endpoint

Technologies Used

Frontend

• Next.js 14
• React 18
• TypeScript
• TailwindCSS

Backend

• Express.js
• TypeScript
• CORS
• Docker

Docker Services

• frontend: Next.js application running on port 3000
• backend: Express.js API running on port 5000

Environment Variables

Backend

Create a .env file in the backend directory based on .env.example:

PORT=5000
NODE_ENV=development

Frontend

Environment variables can be set in docker-compose.yml or in the Next.js configuration.

Stopping the Services

To stop the Docker containers:

docker-compose down

To stop and remove volumes:

docker-compose down -v

Development Notes

• The frontend uses Next.js App Router
• The backend is built with TypeScript and Express
• Both services are containerized for easy deployment
• Docker Compose handles service orchestration and networking