A sample web app for managing products. Touch with Python and React(MUI).
It provides a backend API built with Flask, a frontend user interface built with React.js and Material UI, and utilizes a MySQL database for data storage.
- Docker
- Docker Compose
- An internet connection to access the Docker public registry for image pulling.
Follow these steps to set up and run the project:
- Clone this project to your desired path.
- Open a terminal or command prompt and navigate to the project's directory.
- Run the following command to bring up the project:
docker-compose up -d
- Wait for up to a minute for the database setup to complete.
- Once the setup is complete, you can access the project by opening your web browser and navigating to http://localhost:3000.
The project uses the following software versions:
- Python 3.5
- NPM 9.5.1
- MySQL 8.0.33
The project utilizes the following frameworks:
- Flask 2.3.2
- React.js (18.2.0)
- Material UI (5.13.7)
The frontend of the project is tested using @testing-library/react, which is a popular testing library for React applications. It provides a set of utility functions to simulate user interactions and assert the expected behavior of components.
To run the frontend tests, follow these steps:
- Ensure that the project dependencies are installed by running npm install in the frontend directory.
- Open a terminal or command prompt and navigate to the frontend directory.
- Run the following command to execute the tests:
npm test
The backend of the project is tested using functional tests that cover all the routes implemented in the Flask application. These tests are designed to verify the functionality of the API endpoints and ensure that they handle different scenarios correctly.
To run the backend tests, follow these steps:
- Ensure that the project dependencies are installed by running pip install -r requirements.txt in the project's root directory.
- Change the database connection string to your developement database or expose ports from the dockerized mysql database
- Open a terminal or command prompt and navigate to the project's root directory.
- Run the following command to execute the tests:
python -m unittest products/test_routes.py
The following assumptions were made during the development of this project:
-
The React project has been built for production and deployed into the Dockerized NGINX. This ensures that the frontend application is optimized and ready for deployment in a production environment using NGINX as the web server.
-
No authorization/authentication is required, as mentioned in the instructions. The project assumes that there are no user authentication or authorization requirements, and anyone can access the application and perform CRUD operations on the products.
-
A unique key column uid has been created in the database table for indexing and identifying each product. This column serves as a unique identifier for each product record in the database, enabling efficient indexing and retrieval of specific products.
-
After successfully adding, updating, or removing a product, the user will be redirected to the product listings page. This ensures a smooth user experience by providing immediate feedback and allowing users to see the updated product list after performing any modifications.
-
The form's color input is using a default autocomplete list, but users can define their own colors. The color input field in the form provides a dropdown with a predefined list of colors for autocomplete suggestions. However, users have the flexibility to enter their own custom color values if they are not available in the predefined list.
-
A sample row is being added for better illustration. The project includes a sample row in the database table to provide a visual representation and better illustrate the structure and functionality of the application. This sample row can be modified or removed as needed when adding actual product data.
The following table provides details about the available API endpoints:
Method | URL | Description |
---|---|---|
GET |
/api/products |
Retrieve all products. |
POST |
/api/product |
Create a new product. |
GET |
/api/product/{id} |
Retrieve product with specific id. |
PUT |
/api/product/{id} |
Update product with specific id. |
DELETE |
/api/product/{id} |
Delete product with specific id. |
The project uses a MySQL database with the following table and columns:
Table
Name |
Comment |
Character Set |
Collation |
Engine |
---|---|---|---|---|
Products | Storing all product information | utf8mb4 | utf8mb4_0900_ai_ci | InnoDB |
Primary Key
Columns |
---|
uid |
Indexes
Columns |
---|
uid |
Columns
Name |
Type |
Nullable |
Default |
Comment |
---|---|---|---|---|
uid | int auto_increment | No |
Product Unique ID | |
name | mediumtext | Yes |
Product Name | |
ID | int | Yes |
Product ID (user-defined) | |
description | longtext | Yes |
Product Description | |
colour | mediumtext | Yes |
Product Colour | |
size | int | Yes |
Product Size |