mudeitsi / octamart

OctaMart - An E-Commerce Website Clone

Project Overview

OctaMart is an innovative e-commerce web application offering a streamlined and user-friendly shopping experience. The primary goal of this project is to create a platform that simplifies the online shopping process, making it more accessible and enjoyable for users. OctaMart aims to bridge the gap between complex e-commerce functionalities and user convenience by focusing on usability and performance. This project is currently being developed with React.js, enhancing its interactivity and user experience.

Features and Functionality

• User Accounts: Secure registration and login system for users to manage their profiles.
• Product Listings: A wide range of products displayed, with detailed information.
• Shopping Cart: Users can add and manage products in their shopping cart.
• Checkout Process: A simple and secure checkout system for users to complete their purchases.
• Responsive Design: Ensuring a seamless shopping experience across various devices.

Technologies Used

• Front-End: React.js, JavaScript, HTML, CSS
• Back-End: Python with Flask, Jinja for templating
• Database: SQL for data management
• APIs: Python API, REST API for seamless data exchange
• Version Control: Git and GitHub for source code management
• Additional Tools: Libraries and services that enhance the functionality and user experience of the application.

Screenshots and Demos

1. Figma Prototype demo: https://youtu.be/lUfpFNcpRAA

Roadmap and Future Enhancements

OctaMart is continually evolving. Plans include:

• Performance Optimization: Focus on improving load times and efficiency.
• Scalability Considerations: Preparing the platform for increased user traffic and data.

Project Outline

- **OctaMart/**
  - **backend/** _# Backend server with Flask_
    - [app.py](#) _# Main Flask application file_
    - **models/** _# Database models_
      - [user.py](#) _# User model_
      - [product.py](#) _# Product model_
      - [order.py](#) _# Order model_
    - **routes/** _# Flask routes_
      - [user_routes.py](#) _# Routes for user management_
      - [product_routes.py](#) _# Routes for product management_
      - [order_routes.py](#) _# Routes for order processing_
    - **services/** _# Business logic_
      - [auth_service.py](#) _# Authentication services_
      - [product_service.py](#) _# Product related services_
      - [order_service.py](#) _# Order processing services_
    - **utils/** _# Utility functions and classes_
    - [requirements.txt](#) _# Python dependencies_
  - **frontend/** _# Frontend client with React.js_
    - **public/**               
      - [index.html](#) _# Main HTML file_
      - [favicon.ico](#) _# Favicon icon_
    - **src/**                  
      - **components/** _# React components_
        - [NavBar.js](#) _# Navigation bar component_
        - [Footer.js](#) _# Footer component_
        - **...** _# Other components_
      - **pages/** _# React page components_
        - [Home.js](#) _# Home page component_
        - [ProductPage.js](#) _# Product page component_
        - **...** _# Other pages_
      - [App.js](#) _# Main React application component_
      - [index.js](#) _# Entry point for React app_
      - **...** _# Other JS files (e.g., utilities, hooks)_
    - [package.json](#) _# NPM package manager file_
    - **...** _# Other configuration files (e.g., .babelrc, webpack.config.js)_
  - **images/** _# Image files for the project_
    - [logo.png](#)
    - **...** _# Other image files_
  - **db/** _# Database scripts_
    - [init.sql](#) _# SQL scripts for initializing database schema_
    - [seed.sql](#) _# Scripts for seeding the database_
  - [README.md](#) _# Project documentation_
  - [.gitignore](#) _# Specifies intentionally untracked files to ignore_

Setup Instructions

1. Clone the Repository

   git clone [repository-url]
   cd OctaMart
   

2. Backend Setup

   cd backend
   
   
   

python3 -m venv venv source venv/bin/activate pip install -r requirements.txt flask run

3. **Frontend Setup**

cd frontend npm install npm start

4. **Database Setup**
- Create a MySQL database and import `db/init.sql`.

*Note: Ensure you have Python, Flask, MySQL, Node.js, and npm installed.*

## Contribution Guidelines

We welcome contributions to the OctaMart project. To contribute:

- Fork the repository and create a new branch for your feature.
- Adhere to coding standards and write meaningful commit messages.
- Test your changes and ensure functionality is intact.
- Submit a pull request for review.

## License

This project is open-sourced under the MIT License.

## Contact Information

Minayo Esere

- LinkedIn: [minayo-esere](https://www.linkedin.com/in/minayo-esere)
- GitHub: [mudeitsi](https://github.com/mudeitsi)
- Twitter: [@devmudeizi](https://twitter.com/devmudeizi)

Feel free to reach out for collaborations, feedback, or any inquiries about OctaMart.