Vanguard Vesture e-commerce

Final project for the Full Stack Web Development Bootcamp at 4Geeks Academy.

Table of contents

• Description
• Technologies
• Features
• API Endpoints
• Installation
• Preview
• Screenshots
• Authors
• Acknowledgments
• What's next?

Description

Vanguard Vesture is a web e-commerce app developed to streamline the buying and selling activities of men's clothing. We built this app for the final project of the Full Stack Web Development Bootcamp at 4Geeks Academy. The team members are: Luis Vela, Emmanuel Vargas and Julio Vargas

It features a PayPal payment system, search filters, a favorites list, and a web chat with immediate response for its customers. On the seller's side, it offers an article publishing system, editing capabilities, and app management, including images and order processing. We aim to innovate using the latest technologies such as React, Python, Flask, and JavaScript for efficient development with room for future implementations to enhance the experience.

Technologies

• React
• Python
• Flask
• SQLAlchemy
• JavaScript
• HTML
• CSS
• Bootstrap
• PostgreSQL
• PayPal API

Features

• User registration and login
• User profile settings
• Product search and filter
• Product details
• Product favorites
• Product cart
• Product checkout
• Product reviews
• Seller product management
• Seller order management
• Seller chat
• PayPal payment system
• Responsive design
• Image management for products
• Image management for app

API Endpoints

API documentation available at Vanguard Vesture API

Installation and usage

1. Clone the repository from GitHub:

git clone https://github.com/4GeeksAcademy/Final_Project_Vanguard_Vesture_pt18_E_L_J

2. Install python packages:

pipenv install

3. Create a .env file based on the .env.example with proper settings for your development environment.
4. Install your database engine and create your database, depending on your database you have to create a DATABASE_URL variable with one of the possible values, make sure you replace the valudes with your database information:

Engine	DATABASE_URL
SQLite	sqlite:////test.db
MySQL	mysql://username:password@localhost:port/example
Postgress	postgres://username:password@localhost:5432/example

5. Migrate the migrations (skip if you have not made changes to the models on the ./src/api/models.py)

pipenv run migrate

6. Run the migrations:

pipenv run upgrade

7. Run the application:

pipenv run start

8. Install the frontend dependencies:

npm install

9. Run the frontend application:

npm run start

10. Change default admin user and password:
    1. Login with the default admin user and password:
       • User: [email protected]
       • Password: admin
    2. Go to settings and change the default admin user and password.

Preview

Live demo available at Vanguard Vesture

You can use this sandbox account to test the payment system:

• Email: [email protected]
• Password: IR3=ggA<

Screenshots

User Screenshots

Admin Screenshots

Authors

• Luis Vela
• Emmanuel Vargas
• Julio Vargas

This project was based on the 4Geeks Academy's React JS and Flask API Boilerplate

Acknowledgments

We would like to express our gratitude to the following individuals and s, whose guidance and support were instrumental in the realization of this project:

• 4Geeks Academy: For providing the framework and content of the bootcamp that formed the foundation of this project. The structured learning and resources laid the groundwork for our achievements.
• David Cunha and Astrid Mata: Our professors and mentors, whose wealth of experience and expertise in the field served as an invaluable beacon throughout our project's journey. Their guidance, feedback, and unwavering support were vital in overcoming challenges and achieving success.
• All team members: A special thank you to every member of our team for their tireless dedication, collaboration, and commitment to the project. Your collective efforts made this endeavor a collaborative and fulfilling experience.

What's next?

• Search products in the navbar with autocomplete and suggestions
• Suggestions based on user's search history, favorites, purchases, reviews and sells
• Suggestions based on AI
• Customizable themes for the app
• Enhanced Seller Dashboard: Expand the features available to the seller by providing them with insights and analytics on their products' performance, customer demographics, and sales trends.
• Add a tracking system for orders
• Add a forget password system
• Add customizable categories for products to expand the app's scope to other markets
• Enhance filter system to include more options like size, color, brand, etc.
• Add pagination to the product list
• Add email notifications when a user makes a purchase
• Add email notifications when an order status is updated