E-commerce Fullstack Project

This is a fullstack e-commerce project that includes a React front-end, a Flask back-end, and a MongoDB Atlas database. The project is containerized using Docker Compose for easy deployment and management of both services. Continuous Integration and Continuous Deployment (CI/CD) are handled through GitHub Actions, and Nginx is used as a web server to efficiently manage web traffic and serve static files.

Technologies Used

• Front-end: React, Yarn, Tailwind CSS
• Back-end: Flask
• Database: MongoDB Atlas
• Deployment: Docker Compose
• CI/CD: GitHub Actions
• Web Server: Nginx

Prerequisites

Before running this project, make sure you have the following installed:

• Node.js - JavaScript runtime environment
• Yarn - Dependency management for the front-end
• Python - Programming language used by Flask
• MongoDB Atlas - Managed MongoDB database service
• Docker - Containerization platform for deployment
• Nginx - Web server and reverse proxy

Installation

1. Clone the repository:

   git clone https://github.com/renancavalcantercb/e-commerce/

2. Install the dependencies for the front-end:

   cd  e-commerce
   cd  frontend
   yarn install

3. Install the dependencies for the back-end:

   cd ..
   cd backend
   pip install -r requirements.txt

4. Configure environment variables:

• Generate a secret key for the Flask application. Open a terminal and run the following command:

   python -c 'import os; print(os.urandom(16))'

  Copy the output generated by the command.

• Create a .env file in the backend directory of the project.

• Open the .env file and add the following environment variables:

   SECRET_KEY=<your_secret_key>
   MONGO_URI=<your_mongo_atlas_uri>

  Replace <your_secret_key> with the copied secret key and <your_mongo_atlas_uri> with the URI for your MongoDB Atlas cluster.

5. Start the application using Docker Compose:

   docker-compose up

   This command will start the front-end and back-end services in detached mode.

6. Access the application: Open your web browser and visit http://localhost:3000 to access the e-commerce application.

Usage

• The front-end React application will be running on http://localhost:3000.
• The back-end Flask API will be running on http://localhost:5000.

Feel free to explore and interact with the e-commerce application through the front-end interface.

Continuous Integration and Deployment with GitHub Actions

This project uses GitHub Actions for CI/CD, automating the build, test, and deployment process upon every commit to the main branch. This ensures that the latest changes are seamlessly integrated and deployed to the production environment without manual intervention.

Serving the Application with Nginx

Nginx acts as the reverse proxy for the Flask application and serves the React application's static files, ensuring efficient handling of web traffic and enhancing security and performance.

For deployment in production environments, it is recommended to configure Nginx to manage HTTPS traffic and to serve the React build directory directly, while proxying API requests to the Flask back-end.

Acknowledgments

• React
• Yarn
• Tailwind CSS
• Flask
• MongoDB Atlas
• Docker Compose
• GitHub Actions
• Nginx