🪴Jack's Garden Admin Panel

Admin Panel of Jack's Garden Online Store created with react and react-bootstrap.

Via the admin panel, the admin can:

• login, logout to the site
• create/read/update/delete product
• create/read/update/delete user account (exclude password)
• read/delete orders and update order status.
• read mailing list, send emails to customers

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

Online Store: https://github.com/2016lisali/jacks_garden

(back to top)

Try it

You can find the demo here

(back to top)

Features

• responsive design, display well on mobiles, tablets, laptops and desktops
• all input data will be sanitized in frontend and validated at backend before inserted into database.
• the password will be hashed before inserted into database.

(back to top)

Build With

• React
• React-router-dom
• Redux
• Redux/toolkit
• React-bootstrap
• react-chartjs-2
• Sass
• 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_admin_panel.git

2. Install all dependencies

   npm install

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

   PORT = YOUR_PORT_NUMBER
   REACT_APP_BASE_URL_LOCAL = YOUR_SERVER_URL (this is the address of your local server, make sure the server is running)
   REACT_APP_SERVICE_ID = YOUr_EMAILJS_SERVICE_ID
   REACT_APP_TEMPLATE_ID = YOUr_EMAILJS_TEMPLATE_ID
   REACT_APP_PUBLIC_KEY = YOUr_EMAILJS_PUBLIC_KEY

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

   npm start

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

(back to top)

Roadmap

• Add Pagination
• Add search bar for products, customers and orders section (30-04-2022)
• Add mailing list section and the functionality of sending emails to the email addresses in the list (20-05-2022)
• Add Filter and Sort function for products/customers/orders pages (30-06-2022)
• Create function to allow editing Announcement message in admin panel, fetching and displaying the message in online store. (30-06-2022)
• Add logging page (15-07-2022)
• Allow admin upload multiple product images (31-07-2022)
• delete images in the server (15-08-2022)

(back to top)