In this project, I built a Nxt Trendz Online Shopping Website using React library and a few third-party npm packages.
Click to view
Login
- User is Authenticated by making an HTTP POST request to the NxtTrendzLoginApiUrl. If authentication is successful a JWT Token is sent in response for further authorization and directed to HOME Page. If authentication fails an ERROR message will be displayed.
Home
- In the home page by using the Navigation Menu a user can navigate to different pages like Products, Cart, and Login.
- And a description of clothes to get you started Shopping.
Products
-
Products data is fetched by making an HTTP GET request to NxtTrendzAllProductsApiUrl and the fetched data will be rendered.
-
Another HTTP GET request is made to the NxtTrendzPrimeDealsApiUrl to get Prime Deals. If the user is of prime type all prime deals are fetched and rendered. If the user is non-prime API call is rejected, the rejection will be handled and a banner will be displayed.
Features
- Filter the products based on category, rating, and price.
- Search for a product.
Specific Product
- Product data is fetched by making an HTTP GET request to the NxtTrendzProductDetailsApiUrl and data is rendered
- You can find all details about product price, description, availability, rating, reviews, brand.
- Select your desired Quantity and add the product to your Cart.
- You can also find similar products related to the product.
Cart
-
User can find all the products that we're added to the Cart.
Features
- User has the flexibility to change to desired quantity of a particular product.
- User can remove all products from the cart.
- The price of a product item is calculated dynamically when a user changes quantity.
- Order total price is displayed at the of cart products.
Not Found
- When a user enters any url other than the defined paths(urls), not-found route will be rendered.
Click to view
-
Prime User credentials
username: rahul password: rahul@2021 -
Non-Prime User credentials
username: raja password: raja@2021
Colors
Hex: #0b69ff
Hex: #171f46
Hex: #616e7c
Hex: #ffffff
Font-families
- Roboto
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
