Hot N' Fast Website

Overview

This is a full-stack CRUD application I created for an imaginary fast-food restaurant named "Hot N' Fast". The reason I am creating this website is to get my hands dirty and get a feel for the full-stack development process. NOTE: I used the similar products as McDonalds to populate my menu. There are going to be 3 pages for menu: Breakfast, Sandwiches & Wraps and Snacks & Sides

⚙️ Tech Stack used for this website

This is the tech stack I used for this project. It was inspired by the T3 stack, namely:

• Next.js
• TailwindCSS
• TypeScript
• Prisma
• NextAuth.js
• Zustand State Management
• React Query

Additionally, I used PostgreSQL (namely Vercel Postgres) as the database.

🧰 Features

• Product browsing. Explore 3 categories of products (Breakfast, Burgers & Wraps, Snacks & sides)
• User authentication and authorization. Utilized NextAuth.js to ensure secure access to user-specific features. There are 2 roles; admin and customer
• Cart Management. Used Zustand state management to update the cart
• Add/delete/update products. Admins can perform CRUD operations to maintain the store. I also utilized Cloudinary to store product images in the cloud
• Online payments via Stripe API. Customers can perform mock payments using the fake credentials here.

🔑 Admin and Customer Accounts

Here is the credentials to log in to the test admin account and see the admin-specific features:

Email: [email protected]
Password: demo1234

To view the screen for a regular customer, you can sign up and create an account yourself OR use the following credentials for a test customer:

Email: [email protected]
Password: testing123

💳 Testing the Stripe API

To test the Stripe API, you can use the following credentials:

Card Number: 4242 4242 4242 4242
Expiration Date: Can be anything as long as the expiration year is NOT in the past.
CVC: Can be anything
Address form: You can fill the address form with an abitrary address