fahisayub/dates-and-nuts-webapp

This is a full-fledged e-commerce website which sells dates, nuts and spices.

Dates & Nuts E-Commerce Web App

What is this project all about?

Dates and Nuts is an ecommerce website that that sells Dates,Nuts,Spices,Seeds and related values added products. This Project is Basically an implementation of React with Firebase as backend along with Redux reduxthunks and Chakra-UI.This Project is hosted on Netlify.

Deployment Link : https://datesandnutsapp.netlify.app

Features

• Authentication for User and Admin
• User can Filter and Sort Products
• User can select the quantity
• Can add Products to cart and update the quantity
• User add multiple shipping addresses
• Order status is visible and can be udpated by admin
• Adimin can add,update and delete products
• In mobile screen bottom navbar is added for convenience

TODO

• Need to Improve the UI
• Need to add Payment methods
• User should be able to cancel the order
• Make the user profile visible

How to use it?

1. You can clone the repository and run the command npm install
2. You need to to create your own firebase project.
3. Add the firebase-config that is given while linking this to your firebase project.
4. then go to the utils folder inside the src folder and replace the dummyfirebase-config.js with your firebase-config.js file.
5. enable signin with email and password in firebase project
6. now run npm start here we go...

now you can make changes as you need.

How it works?

As the user get into the website the product are fetched from the firestore products collection and as the user applies filters it will send the query request to firestore for the products with filtered types.

On clicking on any products it will navigate to the single product page where the user can add the product to cart, if the user is not logged in then user will be redirected to the login page.

In cart user can update the quantity of the product and the shipping address.On clicking on checkout button a modal will appear form were the user can place order. On payment the user will be redirected to the order page.

In order page the user can view th order status

Author

Muhammed Fahiz

Dependencies

• redux
• redux-thunk
• react-redux
• react-router-dom
• chakra-UI
• chakra-ui-bottom-navigation
• firebase

dates-and-nuts-webapp's Issues

choose a better approach for shipping address form

make the footer good looking-need more fine tuning

put cart button outside menu

sort should be from Api call not on frontend

there is an issue in click on menu items

Redesign single product page

Intergrade admin and user and make dashboard visible only if user is admin

fix the white space before the filter in desktop screen

Redesign product card

every form should have form validation

Replace the profile button with username on login: try making it gost varient

add user profile page

Show Login Error if user add to cart without login

add a cancel button in add shipping address button

Add form validation on signup and login

change position of alerts to top, such as payment success alert

redesign admin panel

• use a sidebar based design
• redesign the cards
• add form validation

redesign cart page

redesign my orders page

redesign payment flow, use razopay

redesign the home page - make it looking modern, think about something new