https://github.com/mirayatech/bogetta
A full-stack e-commerce site focused on sunglasses 😎
https://github.com/mirayatech/bogetta
ecommerce framer-motion fullstack nextjs postgresql prisma react stripe sunglasses tailwindcss typescript ui ux zustand
Last synced: 3 months ago
JSON representation
A full-stack e-commerce site focused on sunglasses 😎
- Host: GitHub
- URL: https://github.com/mirayatech/bogetta
- Owner: mirayatech
- Created: 2023-04-16T09:46:30.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-22T18:31:35.000Z (about 3 years ago)
- Last Synced: 2026-01-03T14:24:20.305Z (6 months ago)
- Topics: ecommerce, framer-motion, fullstack, nextjs, postgresql, prisma, react, stripe, sunglasses, tailwindcss, typescript, ui, ux, zustand
- Language: TypeScript
- Homepage:
- Size: 2.12 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Bogetta 👓
Bogetta is a fully functional e-commerce platform that specializes in high-quality, luxury sunglasses. The website is created using modern technologies to make sure that customers have a smooth and safe shopping experience online.
## Dependencies 🛠️
Bogetta is built with the following dependencies:
- `stripe`
- `Next.js 13`
- `TypeScript`
- `Prisma`
- `PostgreSQL`
- `Tailwind`
- `Zustand`
## What I Learned 🧠
While building Bogetta, the I learned a lot of things such as:
- Framer Motion: AnimatePresence
- The new method for fetching data in Next.js 13
- How to create schemas that connect with each other.
- Connect NextAuth.js with Prisma as Google authentication.
- Fetching data with the API routes and how to handle incoming requests.
- Use NextAuth.js, connected with Google Cloud, for Google authentication.
- How to create a payment intent via Stripe and add it to the Prisma schema
- What Stripe webhooks are and how to use them to get real-time updates on payment status changes.
- How to create a hydrate component to ensure the client and server are in sync when rendering pages
And much more!
### 🎥 Demo Video
https://user-images.githubusercontent.com/71933266/236698495-1c3edce1-741a-4bcb-b9f0-2afb5793b782.mov
### 📸 Demo Images
#
#
#
#
#
#
