🪴Jack's Garden Online Store

An online plant store website created with react and react-bootstrap.

Customers can register, login, logout to the site, view products, add products to the cart and place online orders.

Backend: https://github.com/2016lisali/jacks_garden_server

Admin panel: https://github.com/2016lisali/jacks_garden_admin_panel

(back to top)

Try it

You can find the demo here

(back to top)

Features

• PWA site, load fast, and can be installed as a mobile app
• with dark mode
• responsive design, display well on mobiles, tablets, laptops and desktops
• all input data will be sanitized in frontend and validated at backend
• the password will be hashed before inserted into database

(back to top)

Build With

• MYSQL
• Express.js
• Node.js
• React
• React-router-dom
• Redux
• Redux/toolkit
• Service Workers
• React-bootstrap
• Sass
• JWT
• React-hook-form
• parcel
• parcel/service-worker
• yup
• axios
• bcrypt

(back to top)

How to run the app

1. Either clone or download the app and open the folder in the CLI

   git clone https://github.com/2016lisali/jacks_garden

2. Install all dependencies

   npm install

3. Create a .env file in root folder and enter following fields

    REACT_APP_STRIPE_KEY = YOUR_STRIPE_KEY
    PORT = YOUR_PORT_NUMBER
    REACT_APP_BASE_URL = YOUR_SERVER_URL (this is the address of the server, make sure the server is running)
    REACT_APP_CLIENT_URL = http://localhost:YOUR_PORT_NUMBER

4. Cd to client folder in terminal and start client server

   npm start

The webpage will be served at http://localhost:YOUR_PORT_NUMBER

(back to top)

Roadmap

• [x] Add 'Help' page (22/05/2022)
• [x] Add Breadcrumb (25/05/2022)
• [x] Add Sort function for product list (25-05-2022)
• [x] Add order details modal in 'my account' page (10-06-2022)
• [x] Add 'You may also like' section in product page (30-06-2022)
• [ ] Allow anonymous user to add product to shopping cart (15-07-2022)
• [ ] Add update user details functionality in 'my Account' page (15-07-2022)
• [ ] Update Stripe (31-07-2022)
• [ ] Display more images for each product (15-08-2022)

(back to top)