JsTees

JsTees is an Ecom app for those who love T-shirt and Javascript. Build with React .

Take a look at Jstees

---

Table of Contents

1. Features
2. Run Locally
3. Todo
4. Demo
5. Reference
6. Author

---

Features

Login

• User able to login by entering email and password
• User can use guest credentials to login
• Form validation is done for login fields

Sign Up

• User able to create account and signup for the site
• Form validation is done for signup fields

Home page

• Landing page with list of featured categories of Tees
• Clicking on categories will take to product listing page with selected category.

Product listing page

• Product listing page with list of products card and filter
• Product card has button to wishlist and add to cart
• Clicking on each item on product page takes to single product page

Filters

• Filter by price - Range slider to filter the products based on price range.
• Filter by category - Filter based on available categories
• Filter by rating - Filter the products based on ratings
• Sort by price - Sort the products based on price

Wishlist page

• Wishlist page shows the list of wishlisted products by the user
• Remove from wishlist and add the product to cart

Cart page

• Cart page shows the list of products added to the cart
• Price card shows the actual price, discounted price, delivery charges and total price
• Can increase/decrease the quantity for each product
• Remove item from cart
• Move the product to wishlist from cart

Private Routes

• To wishlist and add items to cart you should be logged in.

Single product page

• Page for each product with detailed description about the product
• Button to wishlist and add to cart

Profile page

• User profile page with name and email id of the user
• Button to logout from the app.

Search

• Search bar in the navbar present for all the pages except auth pages
• Type the product name in search bar will show the list of products in drawer clicking on the that will take to the detailed product page

Loaders and Toasts

• Loaders and toast is provided as the acknowledgment to the users

Coupon

• User can apply the coupon on cart page
• Coupons will be shown in the popup based on cart value
• User can select any one coupon from the popup
• User can also remove the coupon and add other coupons

Checkout Page

• Checkout page shows summary of the product and delevering address
• Button to proceed payment.

Payment Integration

• Clicking on proceed to pay button on checkout page will open razor pay test payment
• After the successfull payment showing the message in toast, clearing the cart and redirecting to Home

As of now this app uses mock API as the backend, Hence the data can't be persisted on refresh. Will try to add backend in the future.

---

Run Locally

$ git clone https://github.com/manismk/jstees-react.git
$ cd jstees-react
$ npm install
$ npm start  

---

Todo

• Address management
• Order summary

---

Demo

---

Reference

Resources that help in building jstees includes

1. React Js
2. React Router
3. Google Fonts
4. Fontawesome
5. Mockbee
6. React toastify
7. Fastart component library

---

Author

• Manikandan
• Twitter
• Linkedin