# EasyApply Installation Scheduler A standalone, premium MERN stack Appointment Scheduling Module. This application allows customers to book dates and time slots for physical internet installations, enforcing real-world lead-time and scheduling constraints. ## Tech Stack - **Database**: MongoDB & Mongoose - **Backend**: Node.js & Express.js (with `express-validator` input validation) - **Frontend**: React & Vite (styled with custom premium **Vanilla CSS**) - **Icons**: Lucide React --- ## Features 1. **Interactive Premium Calendar**: - Built a custom date-picker interface from scratch (Vanilla CSS/JS) to allow styling flexibility. - **Lead Time Rule**: Enforces that the earliest selectable installation date must be at least **48 hours** from the current date and time. - **Off Days Rule**: **Sundays** are disabled and marked unselectable (crossed out). 2. **Dynamic Slot Selector**: - Fetches Morning, Afternoon, and Evening availability live from the backend API for the selected date. - Enforces a maximum capacity of **10 appointments per slot**. - Cards display capacity counters (e.g., `3/10`) and turn into red `FULL` disabled states once the limit is reached. 3. **Robust Backend API**: - Enforces all business rules and validation checks on the backend (48-hour check, Sunday check, slot capacity check) in addition to frontend validation for maximum reliability. - Leverages `express-validator` to sanitize and validate input fields. 4. **Admin Dashboard**: - Access a complete listing of all booked installations. - Filter listings by status (`Scheduled`, `Completed`, `Failed`) or search by customer name or application reference. - Live refresh option to pull current DB records. 5. **Toast Notification System**: - Floating success/error feedback toasts for form submissions, inputs, and database connectivity. --- ## Directory Structure ```text appointment-scheduling/ ├── backend/ │ ├── config/db.js # MongoDB Connection Setup │ ├── controllers/ # Express Request Handlers │ ├── models/Appointment.js # Mongoose Schema Definitions │ ├── routes/ # Express REST Routes │ ├── .env # Server Port & MongoDB URI │ ├── server.js # Server Entrypoint │ └── package.json # Backend dependencies ├── frontend/ │ ├── src/ │ │ ├── components/ │ │ │ ├── BookingForm.jsx # Interactive Calendar & Booking Panel │ │ │ └── Dashboard.jsx # Admin Dashboard Listings & Filters │ │ ├── App.jsx # Tabs layout & Toast System │ │ ├── index.css # Premium Custom Vanilla CSS styles │ │ └── main.jsx # React Mounting │ ├── index.html # Head metadata and fonts import │ ├── vite.config.js │ └── package.json # Frontend dependencies └── README.md ``` --- ## Getting Started ### Prerequisites - **Node.js**: Ensure Node.js (v18+) is installed. - **MongoDB**: Ensure a local MongoDB instance is running at `mongodb://127.0.0.1:27017/` (or update the `.env` configuration file with your MongoDB Atlas connection string). ### Running the Backend Server 1. Navigate to the `backend/` directory: ```bash cd backend ``` 2. Setup/review the environment file `.env` (already configured to default localhost): ```env PORT=5000 MONGODB_URI=mongodb://127.0.0.1:27017/appointment_scheduler ``` 3. Run the development server: ```bash npm run dev ``` *The server will start listening on port `5000`.* ### Running the Frontend React App 1. Navigate to the `frontend/` directory: ```bash cd frontend ``` 2. Start the Vite dev server: ```bash npm run dev ``` *The app will launch locally (typically at `http://localhost:5173`).* --- ## 🌐 Production Deployment Guide Follow these steps to deploy the full stack application to the cloud for free using **MongoDB Atlas**, **Render** (for the backend), and **Vercel** (for the frontend). ### 1. Database Setup (MongoDB Atlas) 1. Go to [MongoDB Atlas](https://www.mongodb.com/cloud/atlas) and sign up for a free account. 2. Create a new project and select the free **M0 Cluster** tier. Choose your preferred cloud provider and region. 3. Once the cluster is created: - Go to **Security > Database Access** and add a new database user. Choose a username and a strong password (keep note of them). - Go to **Security > Network Access** and click **Add IP Address**. Choose **Allow Access from Anywhere** (`0.0.0.0/0`) so that Render can connect to your database (Render uses dynamic IP addresses). 4. Go to **Database > Connect** and choose **Drivers** (Node.js). Copy the connection string. It will look like this: `mongodb+srv://:@cluster0.xxxx.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0` 5. Replace `` with the database user's password and append `appointment_scheduler` after the slash `/` to specify the database. --- ### 2. Backend Deployment (Render) 1. Go to [Render](https://render.com) and sign up. 2. Push your project files to a public or private **GitHub Repository**. 3. In the Render Dashboard, click **New > Web Service**. 4. Connect your GitHub repository. 5. Configure the Web Service settings: - **Name**: `easyapply-scheduler-backend` - **Root Directory**: `backend` - **Runtime**: `Node` - **Build Command**: `npm install` - **Start Command**: `npm start` - **Instance Type**: `Free` 6. Click **Advanced** to add **Environment Variables**: - `MONGODB_URI`: *Your MongoDB Atlas connection string* - `PORT`: `10000` (Render will override this automatically, but defining it is a good practice) 7. Click **Create Web Service**. 8. Once the build finishes and reports success, copy the URL of your deployed backend service (e.g. `https://easyapply-scheduler-backend.onrender.com`). --- ### 3. Frontend Deployment (Vercel) 1. Go to [Vercel](https://vercel.com) and sign up. 2. Click **Add New > Project** and import your GitHub repository. 3. Configure the Project settings: - **Framework Preset**: `Vite` (will auto-select) - **Root Directory**: Select `frontend` (Vercel will build from here) - **Build Command**: `npm run build` - **Output Directory**: `dist` 4. Expand **Environment Variables** and add: - **Key**: `VITE_API_URL` - **Value**: *Your deployed Render backend URL (e.g., `https://easyapply-scheduler-backend.onrender.com`)* 5. Click **Deploy**. Vercel will build and launch your application, giving you a custom domain name! # appointment-scheduler # appointment-scheduling # appointment-scheduling # appointment-scheduler