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.
| 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. |
| sass | Used to style React App using SCSS |
| @fortawesome/fontawesome-svg-core | Core package for utilising FontAwesomeIcons in React |
| @fortawesome/free-regular-svg-icons | FontAwesome Icon pack for free regular icons |
| @fortawesome/free-solid-svg-icons | FontAwesome Icon pack for freesolid icons |
| @fortawesome/react-fontawesome | Package containing FontAwesome React component to allow easy use of icons in components |
| react-toastify | Package for displaying stylish toast notifications |
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
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!
- Confirmation page after checking out
- Attach orders to users (store inside Firebase)
- Profile page allowing user to edit profile details
- Add ability to pay via different options
- Add a clear cart button
- 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
- Mobile Stylings
- Colour Themes