A full-stack web application with Next.js frontend and FastAPI backend, containerized with Docker.
my-docker-app/
├── backend/ # FastAPI backend
│ ├── main.py # FastAPI application
│ └── requirements.txt # Python dependencies
├── frontend/ # Next.js frontend
│ ├── pages/ # Next.js pages
│ ├── styles/ # CSS styles
│ ├── package.json # Node.js dependencies
│ ├── next.config.js # Next.js configuration
│ └── Dockerfile # Frontend Docker configuration
├── dockerfile # Backend Docker configuration
├── docker-compose.yml # Multi-service Docker setup
└── README.md # This file
- RESTful API with CRUD operations
- CORS enabled for frontend communication
- Pydantic models for data validation
- In-memory storage (easily replaceable with database)
- Auto-generated API documentation at
/docs
- React-based user interface
- TypeScript support
- Responsive design
- Real-time item management
- API integration with FastAPI backend
- Docker and Docker Compose installed
- Git (for cloning the repository)
-
Clone and navigate to the project:
cd my-docker-app
-
Build and start the services:
docker-compose up --build
-
Access the application:
- Frontend: http://localhost:3000
- Backend API: http://localhost:8000
- API Documentation: http://localhost:8000/docs
Backend only:
cd backend
pip install -r requirements.txt
uvicorn main:app --reload
Frontend only:
cd frontend
npm install
npm run dev
GET /
- Welcome messageGET /health
- Health checkGET /items
- Get all itemsGET /items/{id}
- Get specific itemPOST /items
- Create new itemPUT /items/{id}
- Update itemDELETE /items/{id}
- Delete item
- Backend changes: Modify files in
backend/
directory - Frontend changes: Modify files in
frontend/
directory - Docker changes: Update
dockerfile
ordocker-compose.yml
# Build and start all services
docker-compose up --build
# Start services in background
docker-compose up -d
# Stop all services
docker-compose down
# View logs
docker-compose logs
# Rebuild specific service
docker-compose up --build backend
Create a .env
file in the root directory for environment-specific configurations:
# Backend
PYTHONPATH=/app
# Frontend
NODE_ENV=development
For production deployment:
- Update
docker-compose.yml
to use production configurations - Set
NODE_ENV=production
for frontend - Use a proper database instead of in-memory storage
- Configure proper CORS origins
- Set up reverse proxy (nginx) if needed
Port conflicts: Make sure ports 3000 and 8000 are available
Build issues: Try docker-compose down
then docker-compose up --build
Network issues: Check if containers can communicate via docker-compose logs
- Add database integration (PostgreSQL, MongoDB)
- Implement user authentication
- Add more API endpoints
- Enhance frontend with additional features
- Add testing framework
- Set up CI/CD pipeline