- This is a full-stack app for a small online clothing store with authentication.
- Website: https://clothing-store-mu.vercel.app/
- Stack: React, Redux, Next.js, Material UI, HTML, CSS, Framer Motion, Node.js, MongoDB, NextAuth, bryptjs
Clothing Store is a full-stack application that is made with Next.js.
The application has an authentication, which is implemented via a custom form on the frontend and the NextAuth package on the backend. User input verification is handled both by the frontend and the backend, providing the best possible user experience for error handling. Should one not want to create a new account, there is a demo account "TestUser" available, and its credentials are shown as helper text below the input fields.
On the webpage, the user can use various filters to sort the items by price or category as desired.
The user of an application can add items to the cart or mark them as favorites. Once the item is added to the cart, a new menu is opened, where one can check what is in the cart, adjust the quantity if needed, and place an order. If the user is authenticated, he will be redirected to the profile page; otherwise, the user has to enter his credentials since the profile route is protected.
Finally, on the profile page user can browse the orders that were previously placed as well as change the current password and logout. User input verification regarding the old and new passwords is done both by the frontend and the backend. After the user logs out, the auth token is removed from the cookies, therefore, protected routes become no longer accesible.
The application supports the following API routes:
| /api/auth/signup |
|---|
{ method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({username, password}) } |
| /api/change-password |
|---|
{ method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({oldPassword, newPassword}) } |
| /api/add-order |
|---|
{ method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(items) } |
- Download the zip file or clone the repo
- Install and run
npm install
npm run dev