E-COMMERCE-NEXT.JS-PROJECT

Typescript e-commerce app, made with next.js to better understanding front-end development.

Table of Contents

1. About the project
2. Built With
3. Features
4. Comments
5. License

About The Project

As mentioned above, the main goal of this project was to gain practical knowledge of building a web application using the next.js framework. I chose this technology due to the possibility of using various pre-rendering techniques (SSG, SSR), more transparent routing compared to pure react and easier use of SEO improvement methods. The application is a typical example of an online store that sells items of various categories. More information below

(back to top)

Built With

• Next.js 13
• Typescript
• Tailwind CSS
• React-hook-form
• Zod
• Redux toolkit
• Eslint
• Preetier
• Framer motion
• SWR
• Axios
• Vercel
• Card validator
• Immer
• Go-try

(back to top)

Features

Home page

• Browsing products
• Filtering products by category:
  • Men's Clothing
  • Women's Clothing
  • Jewelery
  • Electronics
• Sort by price:
  • low to high
  • high to low
• Use price range (e.g. less than 10, 10 to 100, etc.)

Product page

• Checking the detailed product information

Basket

• Adding/removing products from the cart
• Increasing the number of products in the basket

Order confirmation

• Filling out payment information

(back to top)

Comments

• Data download is intentionally delayed to show the loading screen
• Card validator is used to validate credit card details - however, it has been commented out and replaced with a simpler validator to show the order confirmation modal

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)