A website where people can order coffee drinks to go from a coffee shop. Users can order coffee as a guest or use their created account. Authenticated users can also view their previous orders.
The goal of this project was to show the ability to use the tools mentioned below and implement the features also shown below. Another goal was to have experience with the Javascript frameworks and libraries I had learned. With these tools, I created a responsive website that communicates with the backend to fetch and store: cart sessions, available drinks, orders, and registered users. My decision to create a coffee shop website is due to my favorite morning hobby of drinking espresso drinks and making them.
The database used in this project is MongoDB. Originally the drinks and cart sessions were in Firebase, but I wanted more experience working with MongoDB. I also started with only ReactJS, but then decided to create a full-stack project with NextJS. With NextJS, it was easy to host the project on Vercel for production and implement serverless functions.
The features mentioned below started as to do features I wanted to implement (Please see my previous commits to see how that process went through). I started out with a project I did partially guided by Maximilian's React course in the project named Food Order Page. The first page I had was the menu page, then the home page, then the authentication page, and finally the account page. These four pages have multiple React components and CSS modules for the styling.
Each time I finished a page, I move to debug and checked how many times a component rendered to make sure I was not making unnecessary renders, and if so, I would try to change my component structure first and then use React’s hooks like Callback, React.memo, and useMemo. I also checked how many times the backend server was called and restructured my code to minimize server calls, like using Vercel’s SWR hook for data caching.
- Typescript and NodeJS
- CSS modules
- ReactJS component framework
- NextJS fullstack/production framework using serverless functions
- MongoDB database
- NextAuth user authentication
- Redux state management
- bcryptjs cryptography
- Framer Motion animation
- Vercel hosting
- Prisma ORM for MongoDB
- Zod validation
Click the website link above to try out the project. Try out on your phone too to experience the mobile layout. Use the app as a registered user or a guest user. If you do not want to create an account, then try the following demo account provided for you:
demo@gmail.com 1234567
The following features are in check list order due to they were to do to lists but are now completed, hence the checkmark.
- Ported to NextJS
- React Context states to Redux State
- Page animation using framer motion
- Menu list animation using framer motion
- Cart Button animation when cart item was added/removed using framer motion
- Droplist amount for a drink item
- Modal animation using framer motion
- Drink items in cart animation using framer motion
- Loading Animation
- Cart button animation on hover
- Empty Cart Button when viewing the cart module
- Remove item completely from the list with trash icon as button when viewing cart
- Underline the current page in the navigation bar
- Backend connection using MongoDB for orders, drinks, and previous cart sessions
- Status message display orders if it is successful, invalid, or a server error occurred
- Environmental Variables to use for MongoDB credentials
- Form validation at the front-end and back-end
- Welcome and Menu Pages
- Drink images in the drink list using NextJS Image
- CSS rework
- Mobile compatible
- Icons: tab and bookmark
- Create accounts (Authentication)
- Display status message for signing or creating an account if it is successful, invalid input, or a server error occurred
- Status message display for sign in or creating an account if it is successful, invalid input, or server error
- Change account password
- Status message display for changing a password if it is successful, invalid input, or server error occurred
- Greet signed in user in the home page
- Password hashing to store in MongoDB using bcryptjs
- Orders created from guests or sessions
- API routes protected (unauthorized users)
- Hovering on pictures shows the source/link to the source
- User is asked to checkout as guest/sign in if they are not already signed in
- MongoDB Vercel optimization
- Cart sessions from user sessions stored in the server
- Cart sessions from guest sessions stored in the browser's local storage
- Cart session saved in authenticated user database if logged in after saving cart items while in guest session
- Receipt after checkout
- Past Order History from the profile page
- Past Order animation using framer motion
- React 18 Migration
- Typescript Migration
- Redesigned mobile Navigation Bar for easier access for mobile users
- Next.js 13 Migration
- Replace Mongoose with Prisma
- Migrated backend to typescript
- Add Zod library to validate
- Confirm password on change
- Delete an account
- Checkmark/button acceptance that no order is actually placed
-
Decrease about 10% the bundle size from v2.0 to 2.1
-
Increase content loading times
Screenshot from Vercel using Checkly integration
