Schedule App 📅⏰

---

🚀 Setup Guide

This document outlines the steps to set up and run the Schedule App on your local machine.

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher)
• pnpm (v8 or higher)
• MongoDB Community Edition download here

💻 Installation Steps

1. Install Node.js

• Download and install from nodejs.org
• Verify installation: node --version

2. Install pnpm

npm install -g pnpm

3. Install MongoDB

• Follow the download link: MongoDB Community Edition
• Download the appropriate version for your operating system
• Follow the installation wizard
• Add MongoDB to your path (if not added automatically)
• Start MongoDB service:
  • Windows: net start mongodb (or through services)
  • Mac/Linux: sudo systemctl start mongod

4. Clone the Repository

git clone <repository-url>
cd scheduleapp

5. Install Dependencies

pnpm install

6. Configure Environment Variables

The backend already has a .env file with default development settings. You can modify these if needed:

# backend/.env
PORT=5000
MONGODB_URI=mongodb://localhost:27017/scheduleapp
JWT_SECRET=your_jwt_secret_key_change_in_production
JWT_EXPIRES_IN=7d
NODE_ENV=development

7. Run the Application

Development mode (runs both frontend and backend):

pnpm dev

Run frontend only:

pnpm frontend

Run backend only:

pnpm backend

🔍 Application Structure

scheduleapp/
├── frontend/               # React frontend (Vite + TypeScript)
│   ├── src/                # Source code
│   │   ├── components/     # Reusable components
│   │   ├── assets/         # Static assets
│   │   └── lib/            # Utilities and helpers
├── backend/                # Express backend (TypeScript)
│   ├── src/
│   │   ├── config/         # Configuration
│   │   ├── middleware/     # Express middleware
│   │   ├── models/         # Mongoose data models
│   │   └── routes/         # API routes
└── package.json            # Root package.json with scripts

🧪 Status Dashboard

The application includes a status dashboard that shows:

• Frontend status (React, Tailwind)
• Backend connection
• MongoDB connection status

If MongoDB shows as "pending", try clicking the "refresh status" button on the dashboard.

🔧 Troubleshooting

MongoDB Connection Issues

If MongoDB status shows as "pending" or "error":

1. Ensure MongoDB service is running
2. Check if you can connect to MongoDB using Mongo shell:

   mongosh mongodb://localhost:27017/scheduleapp

3. Verify the MongoDB URI in backend/.env

Port Conflicts

If you encounter port conflicts:

• Frontend default port: 5173
• Backend default port: 5000

You can change these in:

• Backend port: Modify PORT in backend/.env
• Frontend port: Modify vite.config.ts in the frontend directory

🔌 Port Configuration

This application uses configurable ports for both frontend and backend:

Backend

• Configured through the backend/.env file
• Default port: 3000
• To change: update PORT=3000 to your preferred port

Frontend

• Configured through the frontend/.env file
• Default port: 5173 (Vite default)
• To change: update VITE_PORT=5173 to your preferred port
• Backend URL: update VITE_BACKEND_URL=http://localhost:3000 to match your backend port

Setup Steps

1. Copy example env files:

   cp frontend/.env.example frontend/.env
   cp backend/.env.example backend/.env

2. Customize ports in the .env files if needed

Common Port Conflicts

If you encounter port conflicts (error: EADDRINUSE: address already in use):

• Another application might be using the same port
• On Mac: AirPlay may use port 5000 by default
• Solution: change the port in the appropriate .env file and restart the server

---

Made with ❤️ using the MERN stack