Secure and Scalable React.js E-commerce: CI/CD, Docker, SonarQube, and Kubernetes Orchestration

✅ Developed a Continuous Integration and Continuous Deployment (CI/CD) pipeline for a React.js E-commerce application.

✅ Utilized Kubernetes orchestration and Docker containers to deploy the application, optimizing Docker image size by 800% following industry best practices.

✅ Integrated SonarQube for code quality checks and OWASP Dependency Check, ensuring security by examining code dependencies and vulnerabilities.

✅ Incorporated Trivy for comprehensive security scans of Docker images and files, reducing security risks and vulnerabilities.

✅ Successfully deployed the application as both Docker and Kubernetes containers, using deployment and service manifest files.

✅ Demonstrated a hands-on approach from scratch, deploying instances for the main server and SonarQube server, and setting up Kubernetes nodes.

✅ Installed and configured Jenkins, SonarQube, and Docker, creating credentials for SonarQube and DockerHub.

✅ Configured CI/CD pipeline stages, including 'Clean Workspace,' SonarQube analysis, OWASP Dependency Check, Trivy FS Scan, Docker Build, Push to Docker Hub, and Deployment to Docker Container.

✅ Verified application functionality by accessing and testing product purchases, cart section addition, and removal to ensure proper functioning.

✅ Ensured scalability, availability, and load balancing with Kubernetes Deployment, setting the desired number of replicas to 3, enhancing application performance during varying workloads and unforeseen failures.

Shop safely now

A single page e-commerce website (using Context API), where the user can see the details of any product and add it to the product cart.In the product details section, if the user wants, he can decrease and increase the quantity of the product. In the cart section, if the user wants, he can add multiple products, increase, decrease, and remove the quantity of the product. This is a fully responsive site. Created this project using Context API and React(i have already done another e-commerce project specially shopping cart using Redux ). I will add the payment gateway system and user authentication system in a few days.

feature

• view product details
• add to the cart
• increase or decrease the quantity
• add multiple products
• remove the product
• cart Summary list

Technology

• React
• React & Context API
• React router
• React hooks
• React-Bootstrap
• Bootstrap
• React icons
• currencyFormatter
• image zoom in

Screenshots