Backoffice WebApp

About

This repository contains the codebase for a Backoffice Web Application designed for managing various administrative tasks for an e-commerce. The project is structured into backend and frontend components. It uses React for the frontend and Flask for the backend. Data is stored using SQLAlchemy for database interactions with SQLite.

Features

• Backend: Implemented in Python
  • Provides APIs for data management and processing
  • Uses JWT for secure authentication
  • Handles CORS for cross-origin requests
  • Uses Axios for HTTP API calls
  • Uses Tanstack for table management
• Frontend: Built with TypeScript and JavaScript
  • User interface for interacting with the backend services
• Styling: Uses Tailwind CSS for styling components

Pages

The frontend consists of the following pages:

• Dashboard: Provides an overview of key metrics and various reports generated from the data.
• Product Table: Allows administrators to create, read, update, and delete Products.
• Category Table: Allows administrators to create, read, update, and delete Categories.
• Customer Table: Allows administrators to create, read, update, and delete PrCustomersoducts.

Requirements

• Python: 3.12.3
• Flask: 3.0.3
• npm: 10.7.0
• React: 18.3.1

Project Structure

• /backend: Contains the backend code in Flask.
• /frontend: Contains the frontend code in React.

Installation

Follow these steps to install and run the application.

Backend

1. Clone the repository:

   git clone https://github.com/GuglielmoCerri/Backoffice-WebApp.git
   cd Backoffice-WebApp/backend

2. Create and activate a virtual environment:

   python -m venv venv
   source venv/bin/activate  # On Windows use `venv\Scripts\activate`

3. Install dependencies:

   pip3 install -r requirements.txt

4. Create a .env file in the backend directory with the following content:

   SQLALCHEMY_DATABASE_URI=sqlite:///app.db
   JWT_SECRET_KEY=Test
   

   You can replace YourSecretKey with your own JWT secret key for enhanced security.

5. Initialize the database:

   python3 init_db.py

6. (Optional) Populate the database with fake data:

   python3 populate_db.py

7. Run the Flask server:

   flask run

Frontend

1. Navigate to the frontend folder:

   cd ../frontend

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

Usage

1. Ensure the Flask backend is running:

   cd backend
   flask run

2. In a new terminal window, navigate to the frontend folder and start the development server:

   cd frontend
   npm start

The application will be available at http://localhost:3000.

Docker

To use Docker for this project, follow these steps:

1. Clone the repository:

   git clone https://github.com/GuglielmoCerri/Backoffice-WebApp.git
   cd Backoffice-WebApp

2. Build Docker images:

   docker compose up --build

3. Access the application:

   • Frontend: http://localhost:3000
   • Backend: http://localhost:5000

Note for Mac Users: Port 5000 may conflict with AirPlay Receiver. Resolve this by either:

• Changing the backend port in docker-compose.yml.
• Disabling AirPlay Receiver in system settings.

Continuous Integration and Deployment (CI/CD)

This project employs GitHub Actions for Continuous Integration (CI) and Continuous Deployment (CD). The CI/CD pipeline automates the process of building and deploying the application. Docker images, for the frontend and backend, are built and pushed to the GitHub Container Registry (GHCR), ensuring streamlined and efficient deployment.

With this setup, any code changes pushed to the main branch trigger the pipeline, ensuring that the application remains up-to-date and minimizing the risk of manual errors during deployment.

Contributions

Contributions are welcome! Please open an issue or a pull request for improvements and bug fixes.

License

This project is licensed under the MIT License.