fastcom is a fully functional Ecommerce application which has different pages That is home, My products, Single product page, My Cart, My wishlist, Login and signup page.
Step 1. Firstly fork the repository.
Step 2. Now open that repo in your Editor(Vs code)
Step 3. Now to run the project install yarn in the project root folder using the command npm install yarn. Because backend is using yarn package.
Step 4. Now run the project using the command npm start
Finally. Project will run on your local system
- Home page
- Products page
- Single Product page
- Wishlist page
- Cart page
- Login page
- Signup page
-
Authentication
- Users can sign-up for your app
- Users can log in to your app
- Users can logout from your app
-
Users can see a landing page with the featured categories
-
Users can view & filters product
-
Cart Management
- Users can add items to the cart
- Users can increase & decrease the quantity of an item
- Users can remove the items from the cart
- Users can add items to wishlist from the cart
-
Wishlist Management
- Users can add or remove items
- Users can move items from wishlist to cart
- We can see a landing page with Deals of the day which contains the poducts having discount 50% or above.
- If We click on any one of the categories We will be redirected to the product list page with the selected category filter.
We can see a product listing page where all the products are listed with a section of filters. We can see multiple filters on the product listing page including,
- Search:In the navbar, We can search products by brand name, category and and product title.
- Price: A radio button to sort from low to high & high to low.
- Price Range Slider- We can sort products by price range slider.
- Category: A checkbox with various categories-
- Mens
- Womens
- Summer
- Winter
- Rating: A radio buttons to see products according to-
- Price Sort From Low to High
- Price Sort From High to Low
- Discount: A radio buttons to see the products of discount according to customer needs.
We can see a button to clear filters from where I can clear all the applied filters.
On the product cards, I can see two call-to-action buttons, Add to Cart: I can click on the "Add to Cart" primary button which will add the item to the cart & once added shows "Go to Cart" on the product card. Add to Wishlist: I can click on a "Add to Wishlist" "Wishlist" secondary icon button where if I click adds the item in the wishlist & vice-verse.
When the user click on any of the product on the products page then user will land on to the single product page. User can see the detailed information about the product on that page and can also perform the all the features like add to cart, add to wishlist features.
From the navbar, I can navigate to the cart where all the products that I want to buy are mentioned. On the product card, I can see the quantity of a particular product. I can Increase or Decrease the quantity of a particular product. Remove the product from the cart Add the product to the Wishlist I can see the price details card of the cart containing a button to checkout which will show the total price of the products with its quantity.
From the navbar, I can navigate to my wishlist where all the products that I would like to buy are mentioned. On the product card, I can remove the item from the wishlist Add the item to the cart If the cart already contains that item, it's only increasing the quantity.
I can see a sign-up page from where I can sign-up using my email, first name, last name and password.
I can see a login page from where I can log in using my email & password.
I can see a logout button from where I can log out from the app on the header navbar.
This folder contains the Mock Backend created for E-Commerce App. It contains different API end-points and database configuration for building E-Commerce; so that you can focus on building Frontend.
- Adding pagination
- Adding a payment gateway like Razorpay
- Twitter – @aggarwalmohit
- LinkedIn – /mohit-kumar-aggarwal/
- Other Links – /mohitkumar.in/