Barber Booking #129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

DevByRico wants to merge 20 commits into Technigo:main from DevByRico:main

.gitignore

-Original file line number
+Diff line change
@@ -1,15 +1,43 @@
-    node_modules
-    .DS_Store
+    # --- Node ---
+    node_modules/
+    **/node_modules/
+    # --- Build artifacts ---
+    dist/
+    build/
+    client/dist/
+    server/dist/
+    **/dist/
+    *.log
+    # --- Env (secrets) ---
     .env
+    *.env
+    **/.env
+    **/*.env
     .env.local
-    .env.development.local
-    .env.test.local
-    .env.production.local
+    client/.env
+    server/.env
+    # --- Package locks ---
+    package-lock.json
+    yarn.lock
+    pnpm-lock.yaml
+    # --- OS cruft ---
+    .DS_Store
+    Thumbs.db
+    # --- Editor ---
+    .vscode/
+    .idea/
-    build
+    # --- Vite cache ---
+    .vite/
+    **/.vite/
-    npm-debug.log*
-    yarn-debug.log*
-    yarn-error.log*
+    # --- Test coverage ---
+    coverage/
-    package-lock.json
+    # --- Misc ---
+    *.local

Procfile

This file was deleted.

README.md

This file was deleted.

README.txt

-Original file line number
+Diff line change
@@ -0,0 +1,129 @@
+    # 💈 Barber Booking – Final Project
+    A modern full-stack barber appointment app with real-time slot availability, email confirmations (ICS calendar invite), and a protected admin dashboard.
+    Built with a focus on clean code, accessibility, and responsive design.
+    **Live site:** [https://barber-rico.netlify.app](https://barber-rico.netlify.app)
+    **API (Render):** [https://project-final-it0v.onrender.com](https://project-final-it0v.onrender.com)
+    ---
+    ## 🆕 Project Update (Refactor Summary)
+    This version includes a full refactor and code cleanup based on feedback:
+    - Converted all components to **functional React** with hooks
+    - Simplified and reorganized file structure for readability
+    - Improved responsive design and dark/light theme consistency
+    - Ensured `.env` and `node_modules` are properly ignored in Git
+    - Verified all Technigo requirements are met
+    ---
+    ## ✨ Features
+    - Fast frontend (Vite + React + Tailwind)
+    - Dark/Light theme toggle (saved in localStorage)
+    - Calendar with selectable time slots (30-min increments)
+    - Smooth booking flow with confirmation screen
+    - Email confirmation + downloadable `.ics` calendar invite
+    - Admin dashboard (JWT-protected): list, mark as done, delete bookings
+    - Security middleware: rate limiting, Helmet, CORS
+    - SEO & PWA optimized (favicons, manifest, Open Graph tags)
+    ---
+    ## 🧱 Tech Stack
+    **Frontend**
+    - React (functional components)
+    - React Router
+    - Tailwind CSS
+    - Vite
+    **Backend**
+    - Node.js + Express
+    - MongoDB (Mongoose)
+    - Nodemailer (Mailtrap for dev)
+    - JWT authentication
+    **Hosting**
+    - Frontend → **Netlify**
+    - Backend → **Render**
+    ---
+    ## 📁 Project Structure
+    ```bash
+    project-final/
+    ├─ client/                 # React app (Vite)
+    │  ├─ public/              # Favicon, manifest, logo, SEO assets
+    │  ├─ src/
+    │  │  ├─ components/       # Header, ThemeToggle, ProtectedRoute, etc.
+    │  │  ├─ pages/            # SelectTime, DetailsPage, ConfirmPage, Admin
+    │  │  ├─ store/            # Contexts (Auth, Booking)
+    │  │  ├─ App.jsx, main.jsx, index.css, ...
+    │  └─ index.html
+    └─ server/                 # Express API
+       ├─ index.js             # Routes, email, DB connection
+       ├─ package.json
+       └─ .env                 # 🔒 private config (not committed)
+    ```
+    **Booking schema:**
+    ```js
+    // Unique index prevents double-booking
+    bookingSchema.index({ date: 1, time: 1 }, { unique: true });
+    ```
+    ---
+    ## 🔒 Security
+    - Admin JWT stored in **sessionStorage** (auto-clears when tab closes)
+    - Uses `helmet`, `cors`, and rate limiting
+    - MongoDB unique index on date+time
+    - `.env` is excluded from Git (with `.env.example` provided)
+    ---
+    ## 🌐 SEO & UX
+    - Semantic, accessible structure (WCAG friendly)
+    - `<title>` + meta descriptions and Open Graph tags
+    - Light/dark contrast verified
+    - Responsive across all breakpoints (320px → 1920px)
+    - Smooth transitions and animations for better UX
+    ---
+    ## 🛠 Troubleshooting
+    - **Admin login not working**
+      - Ensure `JWT_SECRET` exists in `.env` and restart server.
+    - **CORS error**
+      - Check that `CLIENT_URL` in `.env` matches your frontend URL.
+    - **Email not received**
+      - Use Mailtrap sandbox credentials in dev; check spam folder.
+    - **Duplicate booking**
+      - MongoDB unique index on date+time prevents double-booking (returns 409).
+    ---
+    ## ✅ Status
+    ✔ Functional React Components
+    ✔ Responsive and accessible UI
+    ✔ Code cleaned and organized after feedback
+    ✔ Meets all Technigo project requirements
+    ---
+    ## 🧩 Author
+    Built by **DevByRico** 🎨💻
+    _Refactored & improved based on Technigo feedback 2025._

backend/.babelrc

This file was deleted.

backend/README.md

This file was deleted.

backend/package.json

This file was deleted.

backend/server.js

This file was deleted.

client/index.html

-Original file line number
+Diff line change
@@ -0,0 +1,38 @@
+    <!-- client/index.html -->
+    <!doctype html>
+    <html lang="sv">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Bästa barbern – Boka</title>
+        <meta name="description" content="Boka klippning hos Bästa barbern. Skin fade, skägg, barnklippning och pensionärspriser. Enkelt bokningsflöde och snabb e-postbekräftelse." />
+        <link rel="canonical" href="http://localhost:5173/" />
+        <meta name="robots" content="index,follow" />
+        <meta property="og:title" content="Bästa barbern – Boka" />
+        <meta property="og:description" content="Boka klippning hos Bästa barbern. Skin fade, skägg, barnklippning och pensionärspriser." />
+        <meta property="og:type" content="website" />
+        <meta property="og:image" content="/web-app-manifest-512x512.png" />
+        <meta property="og:url" content="http://localhost:5173/" />
+        <meta name="theme-color" content="#0ea5e9" />
+        <link rel="icon" href="/favicon.ico" sizes="any" />
+        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+        <link rel="manifest" href="/site.webmanifest" />
+      </head>
+      <body>
+        <div id="root"></div>
+        <script>
+          // Starta i ljusläge om inget finns lagrat
+          (function () {
+            const saved = localStorage.getItem('theme');
+            const root = document.documentElement;
+            if (saved === 'dark') root.classList.add('dark');
+            else root.classList.remove('dark');
+          })();
+        </script>
+        <script type="module" src="/src/main.jsx"></script>
+      </body>
+    </html>

client/package.json

-Original file line number
+Diff line change
@@ -0,0 +1,28 @@
+    {
+      "name": "booking-client",
+      "private": true,
+      "version": "1.0.0",
+      "type": "module",
+      "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+      },
+      "dependencies": {
+        "dayjs": "^1.11.18",
+        "framer-motion": "^11.0.8",
+        "lucide-react": "^0.546.0",
+        "react": "^18.3.1",
+        "react-calendar": "^6.0.0",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.28.0"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-react": "^4.2.1",
+        "autoprefixer": "^10.4.19",
+        "postcss": "^8.4.38",
+        "tailwindcss": "^3.4.4",
+        "vite": "^5.2.0"
+      },
+      "proxy": "http://localhost:5000"
+    }

client/postcss.config.js

-Original file line number
+Diff line change
@@ -0,0 +1,6 @@
+    export default {
+      plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+      },
+    }

client/public/_redirects

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		/* /index.html 200

client/public/apple-touch-icon.png

Sorry, something went wrong. Reload?