This is my first time using Next.js. After feeling confident in React, I wanted to make a Fullstack project with Next.js. I know the code isn't the best, but it works. I wanted to make a project that is focused on UX as a whole and little QOL (Quality of life) stuff. I would appreciate and encourage anyone to find a bug/issue and submit it through issues tab.
- Next.js
- Prisma (First and last time using prisma. Drizzle FTW)
- PostgreSQL
- Tailwind
- Typescript
- Context API
- Credentials Authentication
I wanted to use Credentials because I already had some experience using OAUTH in express. And since Credentials is a bit of pain to customize it seemed like a good challenge.
- Instagram like routing
When clicking on a product it opens as a modal, but the url changes to the product's specific page. So if you wanted to share a product without going to its specific page you can just copy the url and when the url is opened it opens the product's specific page. (Not the modal)
- The items inside the cart are saved to local storage
Just a simple QOL feature.
- Instant feedback on UI
I used react-hot-toast for notifications and feedback for better UX.
- Users can create and edit their own custom profile
When logged in, users are redirected to their profile page. If they don't have a profile page then they are redirected to the profile edit route where they can create their profile.
- Sessions and Middleware
After logging in users are not allowed to see login or register page. And to reach profile routes they need to be logged in.
- Search with suggestions
Instant feedback when typing into searchbar.
I came across this landing page design on dribbble. Unfortunately I lost the link to the design. The reason for the inconsistency between the design of the landing page and other pages because the design only consisted of landing page, so I had to improvise, but I also didn't want to spend so much time on design and I put that time into functionality.
The most-time consuming thing to implement was Credentials Authentication and customizing it. I am certain implementing OAUTH would have been much easier. After that I spend a lot of time searching for example code or tutorials for how to implement instagram like routing. Fortunately Vercel had a repo just for that, I just customized it to my liking.
- The website is made for around 1600px and 1900px. Some of the components are responsive till 1200px. Will add full responsiveness and mobile design.
- Make the design more visually appealing.