🎯 This project demonstrates a sophisticated CI/CD pipeline that automatically synchronizes releases between GitHub and Docker Hub, ensuring perfect version consistency across platforms.
Pokedex Plus is more than just a full-stack application - it's a CI/CD showcase that demonstrates how to build a production-ready pipeline with:
- Automatic version management using Semantic Release
- GitHub releases generated from conventional commits
- Docker Hub synchronization with the same version tags
- Zero manual intervention required for deployments
Our project showcases Semantic Release as the core of our CI/CD strategy:
- Commit Analysis: Automatically analyzes commit messages to determine version bumps
- Release Generation: Creates GitHub releases with detailed changelogs
- Docker Integration: Automatically builds and pushes Docker images with matching version tags
- Git Tagging: Manages semantic versioning (major.minor.patch) based on commit types
// release.config.js - The heart of our automation
const config = {
branches: ["main"],
plugins: [
"@semantic-release/commit-analyzer",
"@semantic-release/release-notes-generator",
[
"@semantic-release/git",
{
message:
"chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}",
},
],
"@semantic-release/github",
],
}- Developer commits following conventional commit standards
- Semantic Release triggers on push to main branch
- Version analysis determines if a new release is needed
- GitHub release is automatically created with changelog
- Docker images are built and tagged with the same version
- Docker Hub receives the new images automatically
Our pipeline relies on Conventional Commits to work properly:
# These commit types trigger different version bumps:
feat: add new feature (minor version bump)
fix: resolve bug (patch version bump)
BREAKING CHANGE: breaking change (major version bump)
docs: update documentation (no version bump)
style: code formatting (no version bump)
refactor: code refactoring (no version bump)
test: add tests (no version bump)
chore: maintenance tasks (no version bump)FROM node:22.18.0
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 5000
CMD ["npm", "start"]FROM node:22.18.0
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]services:
backend:
image: eugiovannicruz/pokedex-plus-backend:latest
container_name: backend
environment:
- PORT=${PORT}
- MONGO_URI=${MONGO_URI}
ports:
- "5000:5000"
networks:
- app-network
frontend:
image: eugiovannicruz/pokedex-plus-frontend:latest
container_name: frontend
restart: always
ports:
- "3000:3000"
networks:
- app-network
networks:
app-network:
driver: bridge- Automated versioning without manual intervention
- Cross-platform synchronization between GitHub and Docker Hub
- Conventional commit enforcement for consistent development workflow
- Zero-downtime deployments with proper versioning
- Multi-stage builds for optimized images
- Environment-based configuration for different deployment stages
- Network isolation for security
- Health checks and restart policies
- Predictable releases with semantic versioning
- Automated changelog generation from commit history
- Consistent deployment process across environments
- Clear version tracking for debugging and rollbacks
pokedex-plus/
├── backend/ # Node.js + TypeScript API
│ ├── src/ # Source code
│ ├── Dockerfile # Container configuration
│ └── package.json # Dependencies
├── frontend/ # Next.js application
│ └── pokedex-plus/ # React frontend
│ ├── components/ # UI components
│ ├── app/ # Pages and routing
│ └── Dockerfile # Frontend container
├── docker-compose.yaml # Multi-container orchestration
└── release.config.js # CI/CD automation config
# Clone and run the complete stack
git clone https://github.com/cruzgiovanni/pokedex-plus.git
cd pokedex-plus
docker-compose up -d
# Access the synchronized application:
# Frontend: http://localhost:3000
# Backend: http://localhost:5000# Backend development
cd backend
npm install
npm run dev
# Frontend development (in another terminal)
cd frontend/pokedex-plus
npm install
npm run dev- Node.js 22.18.0 - Modern runtime environment
- TypeScript - Type-safe development
- Next.js - React framework with SSR
- MongoDB - NoSQL database
- Docker - Containerization platform
- Semantic Release - Automated version management
- Conventional Commits - Standardized commit format
- Every commit to main branch is analyzed
- Version bump is determined by commit type
- GitHub release is created with changelog
- Docker images are built with matching tags
- Docker Hub receives synchronized releases
- Deployment can use exact version tags
# Our pipeline automatically handles these commands:
docker build -t eugiovannicruz/pokedex-plus-backend:v1.2.3 ./backend
docker build -t eugiovannicruz/pokedex-plus-frontend:v1.2.3 ./frontend/pokedex-plus
docker push eugiovannicruz/pokedex-plus-backend:v1.2.3
docker push eugiovannicruz/pokedex-plus-frontend:v1.2.3The beauty: These exact same version tags (v1.2.3) appear simultaneously
on both GitHub and Docker Hub, ensuring perfect synchronization.
- Fork the project
- Create a feature branch
- Make changes following conventional commits
- Test the pipeline with your changes
- Open a Pull Request
This project demonstrates real-world CI/CD implementation that:
- Eliminates manual release management
- Ensures version consistency across platforms
- Provides professional deployment workflow
- Scales from development to production
The key insight: By combining Semantic Release with Docker automation, we've created a pipeline that handles the entire release cycle automatically, from commit to deployment, with perfect synchronization between GitHub and Docker Hub.
Built to showcase advanced CI/CD practices and automated release management. Perfect for teams looking to implement professional deployment workflows. 🚀
Ready to experience the future of automated deployments? Clone this repo and see the magic happen! ✨