⚡ BOOKIFY

The Neo-Brutalist Appointment Powerhouse

---

Demo video link :- https://www.youtube.com/watch?v=kqDsUq5zG3Q&feature=youtu.be

---

🏗️ 1. Orchestration Architecture

A high-level view of how Bookify handles requests, state, and external services.

graph TB
    subgraph Client ["Frontend (React + Vite)"]
        A[Neo-Brutalist UI Components]
        B[Context API State Store]
        C[Lucide Icon Library]
        A --> B
    end

    subgraph Server ["Backend (Node.js + Express)"]
        D[Express Router Layer]
        E[Auth Middleware: JWT + Protect]
        F[Business Logic Controllers]
        G[Prisma ORM Layer]
        D --> E
        E --> F
        F --> G
    end

    subgraph Infrastructure ["External Ecosystem"]
        H[(PostgreSQL Database)]
        I((Stripe API))
        J((SMTP / Nodemailer))
        K((Socket.io Engine))
    end

    User((User)) <--> Client
    Client <-->|RESTful API / HTTPS| Server
    Server <--> H
    Server <-->|Payment Intents| I
    Server <-->|Transactional Mail| J
    Server <-->|Real-time Events| K

Loading

---

🔐 2. Security & Onboarding Sequence

Securing the platform with Two-Factor Verification (2FA) and JWT-based sessions.

sequenceDiagram
    autonumber
    participant U as User
    participant B as Backend
    participant E as SMTP
    participant DB as Postgres

    U->>B: POST /api/register
    B->>DB: Save User (status: PENDING_VERIFICATION)
    B->>B: Generate Secure 6-Digit OTP
    B->>E: Send OTP to User Inbox
    E-->>U: "Verify your Bookify Account"
    U->>B: POST /api/verify-otp
    B->>DB: Match OTP & Set status: ACTIVE
    B-->>U: SUCCESS: Issue Bearer JWT Token
    U->>B: Authenticated Request (JWT Header)

Loading

---

📂 3. The Resource Model

How services and providers are structurally linked within the platform.

graph LR
    subgraph Core_Owner
        OU[Organiser Account]
    end

    subgraph Service_Logic
        OU --> S1[Service: Consulting]
        OU --> S2[Service: Workshop]
    end

    subgraph Slot_Engine
        S1 --> R1[Resource: Senior Consultant]
        S1 --> R2[Resource: Junior Associate]
        
        R1 --> WH[Weekly Working Hours]
        R1 --> Slots[Dynamic Slot Generator]
        
        S1 --> Q[Questions Config: 'Project Type', 'Budget']
    end

Loading

---

🔄 4. Booking Lifecycle & State Engine

The step-by-step state machine of an appointment request.

stateDiagram-v2
    [*] --> DRAFT: Customer Begins Flow
    DRAFT --> PENDING_PAYMENT: If 'RequireAdvancePayment' is ON
    PENDING_PAYMENT --> CONFIRMED: Verified via Stripe Webhook
    PENDING_PAYMENT --> CANCELLED: Payment Failed/Abandoned
    
    DRAFT --> CONFIRMED: If 'Auto-Confirm' is ON (Free)
    DRAFT --> PENDING_APPROVAL: If 'ManualConfirm' is ON
    
    PENDING_APPROVAL --> CONFIRMED: Organiser explicitly Approves
    PENDING_APPROVAL --> REJECTED: Organiser explicitly Declines
    
    CONFIRMED --> COMPLETED: Date Elapsed
    CONFIRMED --> CANCELLED: Cancelled by User/Admin
    
    CANCELLED --> [*]
    COMPLETED --> [*]
    REJECTED --> [*]

Loading

---

💳 5. Payment Transaction Flow

Our secure implementation of the Stripe "Headless" Checkout system.

flowchart TD
    A([User clicks 'Confirm & Pay']) --> B[Backend: Create Stripe PaymentIntent]
    B --> C[Backend: Return Client_Secret to Client]
    C --> D[Frontend: Mount Stripe Elements]
    D --> E[User: Enters Card Details & Submits]
    E --> F{Stripe: Valid Card?}
    F -- No --> G[Show Error Card]
    F -- Yes --> H[Stripe: Dispatch Webhook to Backend]
    H --> I[Backend: Verify Stripe Signature]
    I --> J[Backend: Update DB - PAID]
    J --> K[Backend: Update Booking status - CONFIRMED]
    K --> L([Success Confirmed])

Loading

---

🛡️ 6. Administrator Moderation Hierarchy

The tools available to platform owners for ecosystem health.

graph TD
    subgraph Dashboard_Modules
        A[Admin Dashboard] --> B[User Management]
        A --> C[Service Moderation]
        A --> D[Global Analytics]
    end

    subgraph User_Actions
        B --> B1[Suspend/Activate User]
        B --> B2[Role Promotion: Customer to Organiser]
        B --> B3[Email Verification Status]
    end

    subgraph Service_Actions
        C --> C1[Preview Public Service Page]
        C --> C2[Publish/Unpublish Toggle]
        C --> C3[Delete Malicious Service]
    end

Loading

---

📊 7. Database Entity Relationship (ERD)

The underlying relational structure managed by Prisma ORM.

erDiagram
    USER ||--o{ BOOKING : "generates"
    USER ||--o{ SERVICE : "creates"
    SERVICE ||--o{ RESOURCE : "owns"
    SERVICE ||--o{ QUESTION : "contains"
    RESOURCE ||--o{ SLOT : "manages"
    RESOURCE ||--o{ WORKINGHOURS : "defines"
    BOOKING ||--|| PAYMENT : "references"
    BOOKING ||--o{ ANSWER : "recorded"
    
    USER {
        string id PK
        string email
        string role "ADMIN | CUSTOMER | ORGANISER"
        boolean emailVerified
    }
    
    SERVICE {
        string id PK
        string name
        int duration
        decimal price
        boolean published
    }
    
    BOOKING {
        string id PK
        string status "PENDING | CONFIRMED | CANCELLED"
        string paymentStatus "PENDING | PAID"
        datetime date
    }

    PAYMENT {
        string id PK
        string stripeIntentId
        decimal amount
    }

Loading

---

� Project Structure

├── Backend/
│   ├── prisma/             # Database Schema & Migrations
│   ├── src/
│   │   ├── controllers/    # Business Logic
│   │   ├── routes/         # API Endpoint Definitions
│   │   ├── middleware/      # Auth & Global Logic
│   │   └── utils/          # Email & Socket Helpers
│   └── server.js           # Entry Point & Socket Init
├── Frontend/
│   ├── src/
│   │   ├── components/     # Reusable Neo-Brutalist UI
│   │   ├── context/        # Global Auth & Stripe Context
│   │   ├── pages/          # Dashboard & Public Views
│   │   └── App.jsx         # Routing & Main Layout

---

🚀 Installation & Local Development

1. Prerequisites

• Node.js: v18 or higher.
• PostgreSQL: Local instance or cloud (e.g., Supabase).
• Stripe Account: For API keys.

2. Configuration (.env)

Create a .env in the Backend/ folder:

DATABASE_URL="postgresql://user:pass@localhost:5432/bookify"
JWT_SECRET="your_ultra_secret_key"
STRIPE_SECRET_KEY="sk_test_xxx"
STRIPE_WEBHOOK_SECRET="whsec_xxx"
FRONTEND_URL="http://localhost:5173"
EMAIL_USER="your-gmail@gmail.com"
EMAIL_PASS="your-app-password"

3. Execution

# Set up Backend
cd Backend
npm install
npx prisma db push
npm run dev

# Set up Frontend
cd ../Frontend
npm install
npm run dev

---

Engineered for performance. Designed for impact.