FreeRun e-commerce website

Full-stack modern e-commerce prototype project, this is the Front-end repo which was developed using ReactJS/Hooks, React Router, Sass, Bulma and PayPal checkout for payments.

Live Link · Report Bug · Request Feature

• About the Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Contributing
• License
• Contact

This project is a PROTOTYPE of a real e-commerce that I have previously developed, it's a full-stack mobile responsive app with a React front-end and a Ruby on Rails API back-end with AWS S3 for images' storage via active storage, it has a PayPal checkout integration and the cart is saved in the browser's local storage. This is the front-end repo and you could find the back-end code on https://github.com/Redvanisation/FreeRunAPI.

• ReactJS
• React Hooks
• React Router
• JWT
• Sass
• Bulma

To get a local copy up and running follow these simple steps.

• npm

npm install npm@latest -g

• yarn

npm install yarn -g

1. Clone the repo and cd into it

git clone [email protected]:Redvanisation/FreeRun.git

cd freerun

2. Install Yarn packages

yarn install

3. Run the development server with only one of the below commands

yarn start

• On the website you will fin a list of products, as a guest user clicking on each product will take you to its page which has an add to cart button that adds the product to the cart if the stock is more than 0 and the button is visible.
• As a regular user(logged in user) by clicking on a product it would take you to its page which would have an additional add to wishlist button which would add the product to the user's wishlist where you can view or delete products from it.
• The admin user has the ability to add products from the menu bar, as well as updating or removing them (available from every single product's page).
• Once on the cart you can increase or decrease each product's quantity or remove it from the cart, you can also empty the whole cart or pay with the PayPal checkout button.
• By clicking the PayPal checkout button a window will pop-up that uses PayPal sandbox (mocking the real payment features) you can copy/paste the following credentials to test the payment functionality and how the app handles it:
• PayPal Sandbox Email: [email protected]
• PayPal Sandbox Password: Vp?7l8an
• After the payment you will be redirected to the home page and each quantity you bought will be deducted from the product's stock.
• As a regular user you will also have the ability to view your previous orders and the history of the purchased products in every order.

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Distributed under the MIT License. See LICENSE for more information.

Radouane Khiri - @redvanisation - LinkedIn - [email protected]