Fashgram Store is an ecommerce-store where users can shop for latest trends in fashion.
To view the live demo, visit: Fashgram Store
- ReactJS
- Mockbee (for mock backend)
| Pages |
|---|
| Homepage |
| Product Listing Page |
| Cart Page |
| Wishlist Page |
| Login Page |
| Signup Page |
| User Profile Page |
- Hero/Banner - A CTA banner with a tagline and clicking on the Shop Now button will take you to the Product Listing Page with all products.
- Featured Categories - On clicking on any of them, user will be taken to the product listing Page with only that category filtered.
- Sale Banner with CTA
- Custom carousel featuring brands
- Customer testimonials
- Navbar has links to navigate to shop, cart, wishlist and userpage
- The badges on cart and wishlist update as soon as items get added to cart, removed from cart, added to wishlist or removed from wishlist.
- The navbar shows user icon when no user is logged in and shows an avatar when user is logged in.
- The search bar can be used to search for any product. It will redirect to the products page. The search will be fired on submitting the search query.
- Includes filter section and product listings
- Filter section (responsive) - Includes filter by price, rating (high to low), categories, price, ratings, out of stock.
- Clear all button can be clicked to clear all filters.
- Product card contains a primary CTA - "Add to cart" which will add the item to the cart & once added it will show "Go to Cart" on the product card.
- Product card also contains a secondary CTA (heart icon) - To add product to wishlist.
- Maximum 6 products will be visible per page. Pages can be changed by clicking the chevron icons.
- Displays items in cart and total checkout value
- If item is added, item is shown with options to increase or decrease quantity and/or to remove the item or to move it to wishlist.
- Cart totals and total cart items are also dynamically updated.
- When wishlist CTA is selected from cart product, the cart will be moved to wishlist from the cart.
- Items added to wishlist show here.
- Items in wishlist have "Add to cart" CTA which deletes it from wishlist and adds it to cart.
- If the cart already contains that item, it only increases the quantity.
- User can see a sign-up page from where they can sign-up using email, first name, last name, password & confirm password.
- User can see a login page from where they can log in using my email & password.
- A login modal opens when the user clicks on add to cart without logging in.
-
Alerts can be seen on user interactions.
-
Loading spinners can be seen when the data is loading.
- The user profile includes details containing the email Id, address, etc.
All pages are made responsive to mobile screens. Navbar is also made responsive on mobile screens with a hamburger/close icon to toggle the full navbar.