gengobot/kaystore

Clothing E-Commerce Website

Table of Contents

• Description
• Technologies
• Packages
• Install Instructions
  • Stripe API
• Roadmap
  • Features
  • Optimisations
  • UI

Description

A clothing e-commerce website that allows users to create an account or login with a Google account, add products to their cart and checkout using Stripe API. Client-side created using React, SASS. Server-side created using Firebase for authentication and databse storage.

Technologies

Packages

Name	Description
@reduxjs/toolkit	Used for state management to manage the state of the user, products in the cart and the categories and products.
@stripe/react-stripe-js	React Stripe.js is a thin wrapper around Stripe Elements. It allows you to add Elements to any React app. Used to add Card Element for payment form and also the hook to safely pass payment information collected by the Card Element to the Stripe API.
@stripe/stripe-js	Used to return a promise that resolves with a newly created Stripe Object. Allows connection of Stripe API.
dotenv	Used to load Stripe API keys from .env file.
firebase	Used for user authentication via email and password and also Google sign in. Firestore database used to store product information and user information.
react	JavaScript library for building user interfaces
react-dom	Package that provides DOM-specific methods for React
react-redux	Used for state management to manage the state of the user, products in the cart and the categories and products. Specifically used for creating selectors of returning cart values and returning products to display.
react-router-dom	Enables client side routing navigation.
redux-logger	Redux middleware used in development to debug and track state using redux.
redux-persist	Used with redux to persist and rehydrate a redux store. Will persist cart products, user state and what products have been fetched.
reselect	Used with redux to create memoized selectors.
stripe	Provides access to Stripe API to server-side code. Used specicially for netlify functions to connect to Stripe API using API key and also creating the payment object that is sent to Stripe.

Install Instructions

To run locally on machine (assuming up to date Node Package Manager), first install dependencies:

npm install npm install netlify-cli -g

To run locally in browser:

netlify dev

Stripe API

You will require your own instance of Stripe API for the code to function properly. Follow instructions below to run project locally:

• Create account at Stripe
• Create .env file and create two variables named:
  • REACT_APP_STRIPE_PUBLISHABLE_KEY
  • STRIPE_SECRET_KEY
• Copy Publishable key from Stripe website and insert into REACT_APP_STRIPE_PUBLISHABLE_KEY
• Copy Secret key from Stripe website and insert into STRIPE_SECRET_KEY
• You should now be good to go if not feel free to contact me and I can try to help!

Roadmap

Features

• Confirmation page after checking out
• Profile page allowing user to edit profile details
• Add ability to pay via different options
• Add a clear cart button

Optimisations

• Have title of website point to current page
• Redirect after sign up/login to account
• Allow users to delete their account from database
• On signing out, clear cart items
• Use toast alerts for confirmation and errors
• Empty cart after checking out

UI

• Mobile Stylings
• Colour Themes