https://github.com/petekgithub/cocktailviewer

https://github.com/petekgithub/cocktailviewer

authentication nextjs saas typescript

Last synced: 27 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/petekgithub/cocktailviewer
• Owner: petekgithub
• Created: 2024-08-02T22:05:00.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-08-18T20:09:39.000Z (5 months ago)
• Last Synced: 2024-11-08T13:16:49.288Z (3 months ago)
• Topics: authentication, nextjs, saas, typescript
• Language: TypeScript
• Homepage: https://cocktailviewer.vercel.app
• Size: 134 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


In this task you will create a cocktail viewer using The Cocktail DB. You are required to use Next.JS (App Router). Try using server components as much as you can.

1. Cocktail Search Page [MUST]

Create a page with a search bar that takes in the cocktail name and lists the result cards below. You can style the cards the way you please. They must have a button for adding the cocktail into the cocktail basket. This basket must be in RAM and clear after a page refresh. Your basket component should have a save button that will add the cocktails into the saved cocktails page.

2. Saved Cocktails [MUST]

This page must contain the cocktails that have been saved by the user. The cards here must be persistent and not clear after a page refresh. The user can remove a card from the list if they wish.

3. Login Page [OPTIONAL]

Create a login page with a dummy user. Login-wall your application by redirecting the user back to auth page if they try to visit the cocktail pages.

Notes

You must use Next.JS 14 with App router for this task. The less client-side components you use the better. Here are the things you can use/implement to get bonus points:

CSS Modules

SASS

Environment Variables (if needed)

Ask for confirmation when user wants to add a cocktail to a basket or remove it