An online store website built using Python, JavaScript, HTML, and CSS. This project is designed to provide a seamless shopping experience for users with a variety of features such as product browsing, shopping cart, and checkout process. Along with database integration.
- Introduction
- Features
- Technologies Used
- Libraries and Dependencies
- Installation
- Usage
- Database ERD
- Contributing
- License
- Disclaimer
The Online-Store-website is a fully functional web application that simulates an online shopping experience. Users can browse products, add them to their cart, and proceed to checkout. The website is built using a combination of Python for the backend, JavaScript for interactivity, and HTML/CSS for the front-end design.
- User authentication and authorization with separate customer and manager logins.
- Customer login leads to a static web page that is not yet completed.
- Manager login leads to an admin dashboard showing statistics.
- Admin dashboard allows managers to view and modify all tables.
- Managers can purchase products from suppliers.
- Product listing and detail pages.
- Shopping cart functionality.
- Checkout process.
- Order management.
- Responsive design.
- Python: Backend logic and server-side operations
- JavaScript: Client-side interactivity
- HTML: Structuring the web pages
- CSS: Styling the web pages
- Flask: A lightweight WSGI web application framework
- SQLAlchemy: An ORM for handling database operations
- Bootstrap: CSS framework for responsive design
- jQuery: JavaScript library for DOM manipulation and AJAX requests
-
Clone the repository to your local machine:
git clone https://github.com/yazan6546/Online-Store-website.git cd Online-Store-website/Project_files -
Create a virtual environment and activate it:
python -m venv venv source venv/bin/activate # On Windows use `venv\Scripts\activate`
-
Install the required dependencies:
pip install -r requirements.txt
- Note: This may take a while
-
Create a
.flaskenvfile in the project root directory and define the following environment variables:DATABASE_URL=mysql://<username>:<password>@127.0.0.1:3306/store # Replace `<username>` and `<password>` with your username and password respectively. FLASK_APP=store.py FLASK_ENV=development FLASK_RUN_PORT=5000 FLASK_DEBUG=1
-
Create a
.envfile in the root directory of the project for testing purposes and if you want to insert fake database data:DATABASE_URL_TEST=mysql://<username>:<password>@127.0.0.1:3306/store # Replace `<username>` and `<password>` with your username and password respectively. FLASK_APP=store.py
-
Generate tables by running the
store.sqlscript located in theProject_filesdirectory. Execute the following command in your MySQL interface:source Project_files/store.sql;
-
Generate tables from the included scripts in the
utilsdirectory. Run the following command:python utils/db_generator.py
-
Run the Flask development server:
flask run
-
Open your web browser and navigate to http://127.0.0.1:5000.
-
Register a new user account or log in with an existing account:
- Customer login: Leads to a static web page that is not yet completed.
- Manager login: Leads to an admin dashboard showing statistics and allows managers to view and modify all tables, as well as purchase products from suppliers.
Found below is the final edited ERD for the project, containing the tables used in actual code.
Contributions are welcome! Please fork this repository and submit pull requests to add new features or fix bugs.
This project is licensed under the MIT License. See the LICENSE file for more information.
Please note that the customer side of this project is static and incomplete.