Appointment Booking Application

A full-stack appointment booking system built with Express.js backend and React frontend. This application allows users to schedule appointments and integrates with Google Calendar and email notifications.

Project Structure

appointment-booking/
├── backend/           # Express.js server
├── frontend/          # React + Vite application
└── README.md         # This file

Features

• Appointment Scheduling: Book appointments with an intuitive form interface
• Google Calendar Integration: Sync appointments with Google Calendar
• Form Validation: Client-side validation with React Hook Form
• Toast Notifications: User-friendly feedback with React Hot Toast
• CORS Support: Secure cross-origin communication

Tech Stack

Backend

• Node.js with Express.js
• Google APIs to send emails
• CORS for cross-origin requests
• dotenv for environment configuration

Frontend

• React 19 with Vite
• React Hook Form for form management
• React Hot Toast for notifications
• Vite for fast development and building

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• Google OAuth credentials (for calendar integration)
• Email service credentials (for Nodemailer)

Installation

Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Install dependencies:

   npm install

3. Create a .env file based on .env.example:

   cp .env.example .env

4. Configure your environment variables:

   • Google OAuth credentials
   • Other necessary configurations

Frontend Setup

1. Navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install

Running the Application

Development Mode

Backend:

cd backend
npm start

The backend server will start on http://localhost:3000 (or your configured port).

Frontend:

cd frontend
npm run dev

The frontend will start on http://localhost:5173 (default Vite port).

Production Build

Frontend:

cd frontend
npm run build

This creates an optimized production build in the dist/ directory.

Frontend Preview:

cd frontend
npm run preview

Environment Configuration

Copy .env.example to .env and configure:

Backend Variables

• PORT - Server port (default: 3000)
• Google cloud API credentials (Gmail API)

Project Files

• backend/server.js - Express server entry point
• backend/get-refresh-token.js - Google OAuth token management
• frontend/src/App.jsx - Main React component
• frontend/src/components/BookingForm.jsx - Appointment booking form
• frontend/vite.config.js - Vite configuration

Getting Google OAuth Credentials

Using get-refresh-token.js

The get-refresh-token.js script helps you obtain a refresh token for Gmail API integration. This token is required for the application to send appointment emails.

How to use:

1. Ensure you have Google OAuth credentials (Client ID and Client Secret) from Google Cloud Console

2. Add these to your .env file:

   CLIENT_ID=your_client_id_here
   CLIENT_SECRET=your_client_secret_here
   

3. Run the script from the backend directory:

   cd backend
   node get-refresh-token.js

4. The script will display an authorization URL. Open it in your browser and authorize the application.

5. Copy the authorization code from the callback page and paste it into the terminal prompt.

6. The script will output your refresh token. Add it to your .env file:

   GMAIL_REFRESH_TOKEN=your_refresh_token_here
   

Important: Keep your refresh token secure and never commit it to version control. The refresh token allows the application to send emails on your behalf.

API Endpoints

GET /health

Health check endpoint to verify the server is running.

Response:

{ "ok": true }

POST /book

Books an appointment and sends a calendar invite via Gmail.

Request Body:

{
  "name": "string",
  "email": "string",
  "date": "YYYY-MM-DD",
  "time": "HH:MM"
}

Response:

{
  "success": true,
  "id": "gmail_message_id"
}

Error Response:

{
  "success": false,
  "error": "error_message"
}

Contributing

1. Create a new branch for your feature
2. Make your changes
3. Commit with clear messages
4. Push to your branch
5. Create a pull request

License

ISC

Author

ArianMakiabadi