Bloom is a modern and user-friendly webshop that offers a carefully selected range of flowers and plants for both indoors and outdoors. We focus on quality and simplicity. Customers should be able to easily find, order and have their favorite plants delivered to their home. With a clear category system, personal shopping cart and a smooth checkout, BLOOM makes it easy to spread green joy – all year round.
The project is built using Next.js and Server Actions, TypeScript, Tailwind CSS, and ShadCN UI, with Zustand for cart state management, Prisma for database interaction, and Zod for form validation. Additionally, Framer Motion is used to enhance the UI with animations.
Check out the "package.json"-file for scripts and dependencies.
| Technology | Purpose and documentation |
|---|---|
| Next.js | React framework for SSR & SSG https://nextjs.org/docs |
| Tailwind CSS | Utility-first CSS framework for styling https://tailwindcss.com/docs |
| ShadCN UI | Component library for UI elements https://ui.shadcn.com |
| Framer Motion | Animations and UI transitions https://www.framer.com/motion |
| Zustand | State management for cart functionality https://docs.pmnd.rs/zustand |
| Prisma | ORM for database management https://www.prisma.io/docs |
| Zod | Form validation and schema definition https://zod.dev |
git clone https://github.com/magmarion/api-slutprojektet.git
cd api-slutprojektetnpm installyarn installpnpm installbun installCreate a .env.local file in the project root and add the necessary API keys, credentials and URLs:
# Prisma Accelerate connection
DATABASE_URL=your_database_url
# Better Auth secret and URL
BETTER_AUTH_SECRET=your_secret_key
BETTER_AUTH_URL=http://localhost:5173
# GitHub OAuth credentials
GITHUB_CLIENT_ID=your_client_id
GITHUB_CLIENT_SECRET=your_secret_key
# Google OAuth credentials
GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_secret_keyIf you're using Prisma, apply migrations:
npx prisma migrate devnpm run devyarn devpnpm devbun run dev- Alla sidor skall vara responsiva – Implementerat med Tailwind CSS och responsiv design
- Arbetet ska implementeras med NextJS – Bygger helt på Next.js App Router och Server Components
- Backenden ska ha validering på samtliga endpoints (även Server Actions) – Zod används för validering i alla Server Actions
- Skapa ett ER diagram som ska ha visats vid idégodkännandet – ER-diagram skapades utifrån Prisma-modellen
- Beskriv er företagsidé i en kort textuell presentation – Se projektbeskrivningen ovan om Bloom Webshop
- All data ska vara sparad i en SQL databas (produkter, beställningar, konton, mm) med undantaget av bilder – PostgreSQL via Prisma ORM
- Inga lösenord får sparas i klartext i databasen – Säker lösenordshantering med Better Auth
- Sidans produkter ska delas upp i kategorier, en produkt ska tillhöra minst en kategori, men kan tillhöra flera – Många-till-många-relation mellan produkter och kategorier
- Besökare ska kunna lägga produkterna i en kundkorg, som är sparad i local-storage på klienten – Zustand state manager med local storage
- En besökare som gör en beställning ska få möjligheten att registrera sig samt logga in – Sign-up/sign-in via Better Auth
- Användaren måste vara inloggad som kund innan beställningen skapas – Auth-verifiering i checkout
- Checkoutflödet i frontendapplikationen ska ha validering på samtliga fält – Validering med Zod och React Hook Form
- När man är inloggad som kund ska man kunna se sina gjorda beställningar och om de är skickade eller inte – "My Orders"-sektion för inloggade användare
- Från hemsidan ska man kunna se en lista över alla produkter – Produktlistning på startsidan
- Man ska kunna lista bara de produkter som tillhör en kategori – Kategorifiltrering med dynamiska routes
- En besökare ska kunna beställa produkter från sidan, detta ska uppdatera lagersaldot i databasen – Checkout-flöde med lagersaldouppdatering
- Man ska kunna logga in som administratör i systemet – Admin-roll i auth-systemet och skyddade routes
- Administratörer ska kunna uppdatera antalet produkter i lager – Lagerhantering via admin-dashboard
- Administratörer ska kunna se en lista på alla gjorda beställningar – Orderlista i admin-panelen
- Administratörer ska kunna redigera produkter – CRUD-operationer för produkter via admin-gränssnitt
- Administratörer ska kunna lägga till och ta bort produkter – Formulär för att skapa/ta bort produkter
- Administratörer ska kunna markera beställningar som skickade – Orderstatusuppdatering i admin-panelen