Explore the key features and interface of Bhemu Calendar through these interactive screenshots.
Main calendar interface showing week view with drag-and-drop functionality for seamless event management
Sidebar interface for managing goals and tasks with category organization and priority levels
Drag tasks from sidebar directly to calendar slots to create events with color-coded categories
A full-stack calendar web application similar to Google Calendar, built with React, Redux, Node.js, and MongoDB. Features a comprehensive goals and tasks management system with intuitive drag-and-drop functionality.
git clone <repository-url>
cd Bhemu-Calendar
cd server
npm install
cd ../client
npm install
Create a .env file in the server directory:
MONGO_URI=mongodb://localhost:27017/bhemu-calendar
PORT=4000
NODE_ENV=development
For MongoDB Atlas, use your connection string:
MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/bhemu-calendar
Backend server (Terminal 1):
cd server
npm run dev
# Server will run on http://localhost:4000
Frontend application (Terminal 2):
cd client
npm run dev
# Application will run on http://localhost:5173
http://localhost:5173Bhemu-Calendar/
āāā client/ # React frontend application
ā āāā src/
ā ā āāā components/ # React components
ā ā ā āāā WeekView.jsx # Main calendar grid
ā ā ā āāā EventModal.jsx # Event creation/editing
ā ā ā āāā GoalsSidebar.jsx # Goals and tasks panel
ā ā ā āāā TimeSlot.jsx # Individual time slots
ā ā āāā redux/ # State management
ā ā ā āāā store.js # Redux store configuration
ā ā ā āāā reducers/ # Feature-based reducers
ā ā āāā services/ # API communication
ā ā āāā styles/ # CSS stylesheets
ā āāā package.json
āāā server/ # Node.js backend API
ā āāā src/
ā ā āāā controllers/ # Request handlers
ā ā āāā models/ # MongoDB schemas
ā ā āāā routes/ # API route definitions
ā ā āāā index.js # Server entry point
ā āāā package.json
ā āāā vercel.json # Deployment configuration
āāā README.md
GET /events - Retrieve all eventsPOST /events - Create a new eventPUT /events/:id - Update an existing eventDELETE /events/:id - Delete an eventGET /goals - Retrieve all goalsPOST /goals - Create a new goalPUT /goals/:id - Update an existing goalDELETE /goals/:id - Delete a goalGET /tasks - Retrieve all tasksGET /tasks/goal/:goalId - Get tasks for a specific goalPOST /tasks - Create a new taskPUT /tasks/:id - Update an existing taskDELETE /tasks/:id - Delete a task{
title: String (required),
category: ['exercise', 'eating', 'work', 'relax', 'family', 'social'],
date: Date,
startTime: Date,
endTime: Date,
createdAt: Date
}
{
title: String (required),
description: String,
category: ['exercise', 'eating', 'work', 'relax', 'family', 'social'],
createdAt: Date,
updatedAt: Date
}
{
title: String (required),
description: String,
status: ['todo', 'in-progress', 'completed'],
priority: ['low', 'medium', 'high'],
dueDate: Date,
goalId: ObjectId (reference to Goal)
}
#ff7eb9)#7afcff)#feff9c)#fff740)#dcb0ff)#b4f8c8)npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLint
npm run dev # Start development server with nodemon
npm start # Start production server
The project is configured for Vercel deployment:
vercel.json configurationclient directory to Vercel or any static hosting serviceMONGO_URI in your deployment platformDependencies not installed:
# If you see "UNMET DEPENDENCY" errors
cd client && npm install
cd ../server && npm install
MongoDB connection issues:
mongodMONGO_URI in the .env filePort conflicts:
40005173CORS errors:
client/src/services/api.jsgit checkout -b feature/amazing-feature)git commit -m 'Add amazing feature')git push origin feature/amazing-feature)