Golden Coffee shop is a traditional coffee shop that allows users to learn more, register, and buy products. The purpose of building this website was to get more experience in building full stack applications using Next.JS, React, Postgresql, TypeScript, and Tailwind. This was also the first time I used AuthJS, formerly known as NextAuth. This was my first big project that was completely done alone and this project has taken me about 1.5 months. I will continue to work on this project over time and updating it with additional features. There will be a in development feature below on certain features that I still need to add or work on. I definitely learned a lot while working on this project. This was my first time setting up OAuth and using JWT and Session token to temporarily store the user cart. I got more comfortable creating reuseable components using React and not having to re-create new components for everything. During development, I spend several days trying to figure out the correct models to use for user cart and the correct relations to use. I definitely still need more practice with this. Overall, I loved working with this project and I learned so much from it.
){kind=icon}
If your README is long, add a table of contents to make it easy for users to find what they need.
The project is deployed using Vercel and is easily accessible through the link https://goldencoffee.shop/
The website is designed using a mobiel-first responsive approach. The website is pleasant to look at from any size device you are using.
The register page allows users to sign up with an email or by using their email/github. Users are not allowed to create an account with the same email used for OAuth or vice versa to ensure unique email in the database.
The settings page allows users to change their names, email, password, and enable 2 factor authentication. Users trying to change their email will be sent a new email verification for safety.
Users are able to add bakery items into their shopping carts and then proceed to checkout. They are able to adjust the quantity of items in their shopping cart and the estimated total will correctly reflect their changes.
Once the user clicks the checkout button, they will be redirected to the main checkout page where they will have a better view of everything in their cart and their total. Clicking the continue to checkout will send a request to the stripe API and proceed with the payment.
- Responsive Web Design
- Allow users to login using email or OAuth
- Email must be verified using verification tokens
- Allow users to enable 2FA for additional safety
- User carts are saved and will be automatically retreived upon login
- Session allows users to be able to stay logged in until it expires
- Middleware functions to protect certain routes until the user is successfully logged in
- Allow users to select between classic and seasonal menu for drinks
- Uses Stripe API for payment
- Add delete function to cart
- Automatically delete product from cart if quantity goes to 0
- Add proper function to receive message from contact page