Buy Buy

Table of Contents

• About
• Features and Stack
• Screenshots
• Getting Started
• Future Work
• Create React App

About

Buy Buy is a mobile friendly e-commerce web-service to sell and recommend products to users. It uses stripe to receive secured payments. The service is targeted for companies who wants to sell their products online from their own unique custom website.

Features and Stack

Features

• fully responsive with support for mobile, tablet and desktop device to increase traffic.
• product cart with animation to increase user interaction and retention.
• add, remove product in cart.
• increment, decrement product quantity in cart
• promotion bar to show special offers.
• featured bar to show special product.
• Marquee showing product recommendation.
• Multi-step form with validation to obtain user information.
• stripe payment system to receive secured online payment.
• react useState and Context hook to persist and share state in the app.
• react useEffect hook and axios to consume external APIs.
• react-hook-form to maintain form states.
• end-to-end-tested with cypress.
• documented for code maintainability.
• fully automated CI / CD pipeline implemented with github and github actions.
• deployed and hosted in firebase.

Stack

• React
• React Router
• React Hook Form
• Material UI
• Axios
• Cypress
• Firebase
• Github
• Github actions

Screenshots

• Landing Page (desktop view)

• Cart and Product Recommendation page (tablet view)

• User Information with Form Validation (mobile view)

• Checkout Stripe (mobile view)

Getting started

Below you'll find the instructions for setting up the project locally

Clone repo and install dependencies

# Clone the repo
git clone https://github.com/neuralchemist/BuyBuy.git

# Install dependencies
cd BuyBuy
npm install

Add env variables

Create .env.local file, and add stripe keys

Start the app

# Start development server
npm start

The app should be running at: http://localhost:3000

Future Work

• Add caching mechanism using react query to reduce network request when user hop from pages.
• cache user cart using local storage or react query so that user can close browser and still have them when they revisit.
• create an account with using email and password
• authenticate using Facebook, GitHub or Google
• add fully functional stripe payment implemented with firebase cloud.

These are some of the features I want to implement or reuse in this projects from some of my other projects.

Bootstrapped with Create React App

This project was bootstrapped with Create React App.

For the detailed description of available scripts see CRA Documentation