🌸 Flower Delivery App

Full-stack test project: flower shop platform with cart, favorites, and delivery management.
Built with React + TypeScript (frontend) and Node.js + Express + Prisma (backend).

---

🛠️ Tech Stack

Frontend

Backend

Deployment

• Frontend
• Render (backend + PostgreSQL)

---

📂 Project Structure

flower-delivery-app/
│── backend/ # API server (Node.js, Express, Prisma)
│── frontend/ # React client (Vite + React + TypeScript)
│── README.md # Project documentation

---

🚀 Features

🔹 Frontend

• React 18 + TypeScript
• Routing with React Router
• State management with custom hooks (useCart, useFavorites)
• Pagination & sorting (by price and date)
• Responsive design with CSS modules
• Favorites & Cart functionality
• Google Maps integration:
  • Display delivery map with marker
  • Autocomplete delivery address (Google Places API)
  • Store coordinates (lat/lng) with orders

🔹 Backend

• Node.js + Express + TypeScript
• Prisma ORM (with SQLite in dev, PostgreSQL in prod)
• Endpoints for:
  • Shops
  • Flowers
  • Cart & Favorites
  • Orders (with delivery address + coordinates)
• Pagination and filtering

---

⚙️ Installation (Production)

-Frontend: https://flower-delivery-app.vercel.app
-Backend API: https://flower-delivery-app-84aa.onrender.com

---

⚙️ Installation (Local Development)

1. Clone repository

git clone https://github.com/OlesiaKubska/flower-delivery-app.git
cd flower-delivery-app

2. Backend setup

cd backend
npm install

Configure .env:

DATABASE_URL="file:./dev.db"
PORT=4000

Run migrations:

npx prisma migrate dev

Start backend:

npm run dev

---

3. Frontend setup

cd frontend
npm install

Configure .env:

VITE_GOOGLE_MAPS_API_KEY=your_google_maps_api_key

Start frontend:

npm run dev

• Frontend: http://localhost:5173

• Backend: http://localhost:4000

---

🔑 Google Maps API Setup

1. Go to Google Cloud Console

2. Create project flower-delivery

3. Enable APIs:

• Maps JavaScript API

• Places API

• Directions API

• Geocoding API

4. Create API key → restrict by domain (http://localhost:5173)

5. Add key to frontend/.env

---

📡 API Endpoints (Production)

• GET /shops – list shops
• GET /flowers – list all flowers
• POST /orders – create order (address + coordinates)
• GET /orders/:id – order details

---

📖 Author

👩‍💻 Olesia Kubska

Full Stack Developer | Flower Delivery Test Project

---