Samarth Samaj’s

S. H. JONDHALE POLYTECHNIC
DOMBIVLI (WEST), DIST (THANE)

A PROJECT REPORT ON
TO-DO LIST WEB-APPLICATION

SUBMITTED BY

1547 - AFTAB SHAIKH

GUIDED BY
MRS. N. D. Moholkar

DEPARTMENT OF COMPUTER ENGINEERING

S.H. JONDHALE POLYTECHNIC

DOMBIVLI (WEST)

2024 – 2025

1
 MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

CERTIFICATE

This is to certify that Aftab Shaikh(1547) of Sixth Semester of Diploma in

Computer Engineering of Institute S. H. Jondhale polytechnic have successfully
completed Major project work entitled “To-Do List Web-Application” in sunject
Capstone Project Planning (22060) for the academic year 2024-2025 as
prescribed in the I-Scheme Curriculum.

PROJECT GUIDE H.O.D PRINCIPAL

EXTERNAL EXAMINER

2
 ACKNOWLEDGEMENT

It is indeed the matter of great pleasure and privilege to be able to

present this report on “To-Do List with Alarm Scheduling” under the
valuable guidance of Mr. D.D Shelke, Project Guide of Computer
Department in S. H. Jondhale Polytechnic Dombivli (West).

We also express our gratitude and thanks to all our teachers and other
faculty members of Computer Department, S.H Jondhale Polytechnic
for their sincere co-operation in completing this Major project.

We would like to express our sincere gratitude to our teammates who

shared their valuable time and suggestions and edits in making of this
Major project.

3
 ABSTRACT

This project presents a comprehensive web-based To-Do List manager

integrated with a real-time chatbot interface to enhance daily
productivity. Developed using the MERN stack (MongoDB,
Express.js, React.js, Node.js), it offers features such as secure account
authentication, Google Calendar synchronization, and instant chat
using Socket.io. The platform supports 32 customizable themes,
enabling a personalized user experience. Stripe is used for payment
processing and Cloudinary for media storage. The system is designed
to streamline task organization, improve user interaction, and provide
a centralized solution for task and schedule management. Integration
with third-party APIs, real-time messaging, and scalable architecture
highlight its real-world applicability in productivity-focused
environments. The project stands as a robust foundation for future
enhancements like AI-powered assistance, mobile applications, and
multilingual support.

4
 CONTENTS

1. INTRODUCTION---------------------------------------------- 7-8
1.1 Motivation
1.2 Problem definition
1.3 Objective of Project
1.4 Scope of the Project

2. LITERATURE SURVEY--------------------------------------9-10
2.1 Existing System
2.2 Disadvantages of Existing system
2.3 Proposed System

3. ANALYSIS------------------------------------------------------ 11-14
3.1 Software Requirement Specification
3.1.1 User requirement
3.1.2 Software requirement
3.1.3 Hardware requirement

4. DESIGN--------------------------------------------------------- 14-22
4.1 DFD/ER diagram
4.2 ER – Diagram
4.3 Modules

5
5. IMPLEMENTATION & RESULTS--------------------- 23-43
5.1 Implementation Methodology
5.2 Code
5.3 Output Screens

6. COST ANALYSIS------------------------------------------- 44-45

6.1 Direct Cost Analysis
6.2 In-Direct Cost Analysis
6.3 Miscellaneous Cost Analysis
6.4 Production Cost Analysis

7. CONCLUSION----------------------------------------------- 46 -47

REFERENCES-------------------------------------------------- 48

6
1. INTRODUCTION

In the era of digital transformation, where productivity and efficiency are at the
forefront of both personal and professional life, managing tasks effectively has
become increasingly essential. Traditional to-do applications offer basic
functionalities but lack integration with communication tools, leading to
fragmented workflows. As teams become more distributed and the need for
seamless collaboration grows, the demand for a unified system that incorporates
task scheduling, communication, and calendar synchronization is more evident
than ever. This project addresses these modern requirements by combining
multiple functionalities into a single, user-friendly web application

1.1 Problem Definition

In today’s fast-paced world, managing daily tasks can be overwhelming.

Traditional task management systems often fail to integrate communication
features, making team collaboration cumbersome. The lack of task prioritization,
reminders, and calendar synchronization further adds to inefficiency.
Additionally, the absence of a streamlined solution that supports real-time
updates and communication in task management systems is a significant
limitation.

1.2 Objective of Project

The primary objective of this project is to develop a Web-based To-Do List

integrated with real-time chat functionality. The system will allow users to:

• Manage and prioritize tasks.

• Set alarms and reminders for tasks.

• Communicate with other users through real-time chat.

7
 • Sync with calendars for better task tracking.

• Provide an intuitive, user-friendly interface.

1.3 Limitations of Project

• The system does not support offline functionality; it requires an internet

connection to operate.

• The real-time chat feature is limited to text-based communication only and

does not support audio and videos.

• Calendar sync is based on the Google Calendar API, and its features are
limited to what is available within this integration.

1.4 Scope of the Project

• To build a unified platform that allows users to manage tasks, collaborate,

and stay organized efficiently.

• Integrates Google Calendar for seamless scheduling and reminders.

• Enables real-time chat for team communication and accountability.

• Provides personalization through themes and profile settings.

• Incorporates user authentication and secure login with password reset

functionality.

• Enhances usability with cloud storage for file attachments and reporting
tools.

8
2. LITERATURE SURVEY

2.1 Existing System

There are several existing task management and productivity tools such as
Todoist, Microsoft To Do, Trello, and Google Tasks that help users organize their
daily tasks. These systems provide basic features like task creation, due dates,
and reminders. Some of them offer limited calendar integration, while others
support collaboration on shared tasks. However, most of these applications
operate in silos and often lack real-time communication features and deeper
calendar synchronization. Additionally, customization in terms of themes or UI
is very limited.

Other platforms like Slack or Microsoft Teams offer chat and team collaboration,
but task tracking is secondary or dependent on third-party integrations. Users
often have to switch between multiple tools to manage their tasks, communicate
with others, and handle reminders or events, which can reduce overall
productivity.

2.2 Disadvantages of Existing System

Despite their popularity, the current systems face several drawbacks:

1. Limited Integration – Lack of full synchronization with Google Calendar

or external tools.

2. No Built-in Communication – Absence of real-time chat or interaction

between users within the task platform.

3. Poor Customization – Minimal UI/UX flexibility and lack of theme

personalization.

9
 4. Inefficient Workflow – Users are required to manage tasks, chat, and
calendar events in separate apps.

5. Lack of User Control – Users often don’t have control over how their tasks
are displayed or sorted.

6. No Analytics or Reporting – Most apps don’t provide task completion stats

or user productivity reports.

7. Security Concerns – Not all systems provide secure authentication or

password recovery options.

2.3 Proposed System

To overcome the limitations of the existing systems, the proposed To-Do List Web
App is developed with the following advanced features:

1. Google Calendar Integration – Seamless sync of tasks with Google

Calendar for timely reminders and scheduling.

2. Real-Time Chat – Built-in messaging system for direct user

communication and collaboration.

3. Multi-Theme Support – 32 customizable themes to personalize the user

interface.

4. Secure Authentication – JWT-based login system with a password reset

option for enhanced security.

5. Task Management – Create, update, and track tasks with priority, due dates,
and completion status.

6. User Analytics & Reporting – Visual reports and stats on user activity, task
trends, and productivity.

7. Scalability – Designed to support multiple users, and roles efficiently.

10
 3. ANALYSIS

3.1 Software Requirement Specification (SRS)

The Software Requirement Specification defines the complete set of functional

and non-functional requirements for the system. It serves as a guideline for the
development and validation of the To-Do List Web Application with Chat and
Calendar Sync.

3.1.1 User Requirements

This section outlines the essential functionalities expected by the end users of the
system:

• Task Management: The system should allow users to create, update, and
delete to-do tasks with appropriate details such as title, description, date,
and time.

• Task Prioritization: Users must be able to categorize tasks as either

“Urgent” or “Important” to better organize their workflow.

• Reminders and Alarms: The system must provide users with the ability to
set reminders for tasks to receive timely notifications.

• Real-Time Communication: Users should be able to communicate with one

another through an in-app real-time chat interface without refreshing the
page.

• Calendar Synchronization: The application must enable users to sync tasks

with their Google Calendar, allowing them to view tasks along with other
scheduled events.

11
 • User Authentication: Only registered users should be allowed access to the
system. Secure login and session management must be in place.

• Theme Customization: Users should have the ability to switch between

themes (light/dark) for a personalized user experience.

3.1.2 Software Requirements

This section lists the technologies and tools required to build and run the
application:

• Frontend Technologies:

o HTML5: Used for structuring web pages.

o CSS3: Used for styling the application with responsive and

interactive layouts.

o JavaScript (React.js): React is used to develop dynamic UI

components and handle client-side logic.

• Backend Technologies:

o Node.js: Used as the server-side JavaScript runtime environment.

o Express.js: A lightweight web framework used to manage routes,

middleware, and APIs.

• Database:

o MongoDB: A NoSQL database used to store user information, task

data, chat history, and theme preferences.

• Real-Time Communication:

o Socket.io: Facilitates bi-directional real-time messaging for the chat

module.

12
 • Calendar Integration:

o Google Calendar API: Allows users to sync their tasks with Google
Calendar and receive notifications.

• Other Tools:

o Postman: For testing RESTful APIs.

o VS Code: Preferred code editor for development.

o Git & GitHub: Version control and source code management.

The system also maintains a master database to store hidden to-do entries that are
not visible to users but necessary for internal operations.

3.1.3 Hardware Requirements

These are the minimum hardware specifications required for running and testing
the application on both server and client ends:

• Client-Side Requirements:

o Processor: Dual-core 2.0 GHz or higher

o RAM: Minimum 4 GB

o Browser: Latest version of Chrome, Firefox, or Edge

o Internet Connection: Required for real-time communication and

calendar API access

• Server-Side Requirements:

o Server with Node.js runtime environment

o Installed MongoDB server (local or cloud-based like MongoDB

Atlas)

13
 o Minimum 8 GB RAM, 100 GB storage

o Stable internet connection to handle Socket.io and API calls

4. DESIGN

4.1 DFD/ER Diagram

DFD Level 0

Overview:

This is the highest-level view of the system. It shows the entire system as a single
process and its interaction with external entities.

Flow Explanation:

• User interacts with the To-Do List with Chat system.

14
 • The system receives or sends:

o User Data (account information)

o Task Data (task creation, updates)

o Message Data (chat messages)

o Calendar Data (events, reminders synced with calendar)

DFD Level 1

15
Overview:

This breaks the single process from Level 0 into sub-processes showing more
detailed interaction.

Flow Explanation:

1. User:

o Sends Tasks to the system → handled by 1.1 Manage Tasks.

o Sends Messages → goes to 1.2 Chat.

o Makes Theme Selection → goes to 1.4 Apply Theme.

2. System Processes:

o 1.1 Manage Tasks stores/fetches data from Task Data.

o 1.2 Chat fetches and stores User Data for chatting context.

o 1.4 Apply Theme fetches and stores Theme Select preferences.

16
DFD Level 2

Overview:

Shows even deeper breakdown of the internal operations and data flows between
processes.

Flow Explanation:

1. User logs in or signs up:

o Goes to 1.1 Authentication → verifies/creates Account Data.

o If forgotten password, handled by 1.2 Password Recovery using

account data.

2. 1.3 Task Management:

17
 o Manages tasks and calendar events.

o Stores tasks in To-Do Tasks database.

o Integrates with Google Calendar API to sync calendar data.

3. 1.4 Chat:

o Sends/receives messages.

o Can reset tasks or respond based on system status.

4. Databases/External Interfaces:

o To-Do Tasks: Stores task details.

o Google Calendar API: Syncs user’s calendar events.

o Messages: Flow to/from Chat module.

18
4.2 ER-Diagram :

4.3 Modules

1. Authentication Module

This module is responsible for handling user login, registration, and session
control. It ensures secure access and protects user data with encrypted password
storage.

a) User Registration – Allows new users to sign up with email and password.

19
 b) User Login – Validates credentials to provide access to the dashboard.

c) Session Management – Maintains the user's login status during usage.

2. Task Management Module

This module provides users with tools to manage their daily tasks. It supports
basic operations along with task prioritization and alerts.

a) Add Task – Users can create new tasks with title, date, and description.

b) Edit/Delete Task – Allows updating or removing tasks at any time.

c) Prioritization – Supports tagging tasks as “Urgent” or “Important”.

d) Alarms & Reminders – Users can set alerts to be notified on due time.

3. Real-Time Chat Module

This module enables users to communicate instantly through chat. It is built using
Socket.io for real-time, event-based communication.

a) Chat Interface – Provides a clean and responsive messaging area.

b) Socket.io Integration – Enables instant delivery of messages.

c) Online Status – Displays current presence (online/offline) of users.

4. Calendar Sync Module

This module connects the task list with Google Calendar. It ensures tasks are
reflected in the user's calendar for better scheduling.

a) Google API Integration – Authorizes the user’s Google account for syncing.

b) Task-to-Calendar Mapping – Converts tasks into calendar events.

c) Event Reminders – Users receive timely alerts via calendar notifications.

5. Settings Module

20
This module allows the customization of UI themes to enhance user experience.
It saves preferences for consistency in future sessions.

a) Theme Selection – Offers light, dark, and additional UI themes.

b) Persistent Settings – Stores user theme preferences locally or in the database.

c) User Interface Control – Enables basic layout adjustments for accessibility.

4.4 Pseudocode :

Initialize Application

Load frontend interface

Connect to backend server

User Registration/Login

If new user:

Prompt user to create account

Save user credentials to database

Else:

Authenticate user credentials

Dashboard Load

Fetch user's to-do items from backend

21
 Display items in UI

Add Task

User inputs new task

Send task data to backend

Store in database

Refresh task list

Edit/Delete Task

On user action, update or delete task

Send update to backend

Update database

Refresh task list

Chat Functionality

User opens chat window

Send/receive messages via backend

Display real-time chat updates

Logout

Clear session/auth token

Redirect to login page

22
 5. IMPLEMENTATION & RESULTS

5.1 Implementation Methodology

The project follows the Agile development methodology, which emphasizes

iterative development and regular feedback. The system was developed in phases,
starting with user authentication and task management, followed by the real-time
chat and calendar synchronization features.

5.2 Code

App.jsx

import Navbar from "./component/Navbar";

import HomePage from "./pages/HomePage";

import LoginPage from "./pages/LoginPage";
import ProfilePage from "./pages/ProfilePage";
import SettingPage from "./pages/SettingPage";
import SignUpPage from "./pages/SignUpPage";
import TodoPage from "./pages/TodoPage";

import { Routes,Route,Navigate } from "react-router-dom";

import { useAuthStore } from "./store/useAuthStore";
import { useThemeStore } from "./store/useThemeStore";
import { useEffect } from "react";

import {Loader} from "lucide-react";

23
import {Toaster} from "react-hot-toast";

const App = () => {

const {authUser,checkAuth,isCheckingAuth, onlineUsers}= useAuthStore();
const {theme}= useThemeStore();
console.log({ onlineUsers });

useEffect(() => {
checkAuth()
}, [checkAuth]);

console.log({ authUser });

if(isCheckingAuth && !authUser) return(

<div className="flex items-center justify-center h-screen">
<Loader className="size-10 animate-spin" />
</div>
);
return (
<div data-theme={theme}>
<Navbar />

<Routes>
<Route path="/" element={authUser ? <TodoPage /> : <Navigate
to="/login" />} />
<Route path="/signup" element={!authUser ? <SignUpPage /> :
<Navigate to="/" />} />
<Route path="/login" element={!authUser ? <LoginPage /> : <Navigate
to="/" />} />
<Route path="/todo" element={authUser ? <TodoPage /> : <Navigate
to="/login" />} />

24
 <Route path="/chat" element={authUser ? <HomePage /> : <Navigate
to="/login" />} />
<Route path="/settings" element={<SettingPage />} />
<Route path="/profile" element={authUser ? <ProfilePage /> : <Navigate
to="/login" />} />
</Routes>
<Toaster />
</div>
);
};

export default App;

Homepage.jsx :
import { useChatStore } from "../store/useChatStore";

import Sidebar from "../component/Sidebar";

import NoChatSelected from "../component/NoChatSelected";
import ChatContainer from "../component/ChatContainer.jsx";

const HomePage = () => {

const { selectedUser } = useChatStore();

return (
<div className="h-screen bg-base-200">
<div className="flex items-center justify-center pt-20 px-4">
<div className="bg-base-100 rounded-lg shadow-cl w-full max-w-6xl h-
[calc(100vh-8rem)]">
<div className="flex h-full rounded-lg overflow-hidden">
<Sidebar />

25
 {!selectedUser ? <NoChatSelected />: <ChatContainer /> }
</div>
</div>
</div>
</div>
);
};
export default HomePage;

LoginPagw.jsx :

import { useState } from "react";

import { useAuthStore } from "../store/useAuthStore";
import AuthImagePattern from "../component/AuthImagePattern.jsx";
import { Link } from "react-router-dom";
import { Eye, EyeOff, Loader2, Lock, Mail, MessageSquare } from "lucide-
react";

const LoginPage = () => {

const [showPassword, setShowPassword] = useState(false);
const [formData, setFormData] = useState({
email: "",
password: "",
});
const { login, isLoggingIn } = useAuthStore();

const handleSubmit = async (e) => {

e.preventDefault();
try {

26
 await login(formData); // ✅ Await it
} catch (error) {
console.log("Login failed:", error); // Optional extra safety
}
};

return (
<div className="h-screen grid lg:grid-cols-2">
{/* Left Side - Form */}
<div className="flex flex-col justify-center items-center p-6 sm:p-12">
<div className="w-full max-w-md space-y-8">
{/* Logo */}
<div className="text-center mb-8">
<div className="flex flex-col items-center gap-2 group">
<div
className="w-12 h-12 rounded-xl bg-primary/10 flex items-center
justify-center group-hover:bg-primary/20
transition-colors"
>
<MessageSquare className="w-6 h-6 text-primary" />
</div>
<h1 className="text-2xl font-bold mt-2">Welcome Back</h1>
<p className="text-base-content/60">Sign in to your account</p>
</div>
</div>

{/* Form */}

<form onSubmit={handleSubmit} className="space-y-6">
<div className="form-control">
<label className="label">

27
 <span className="label-text font-medium">Email</span>
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center
pointer-events-none">
<Mail className="h-5 w-5 text-base-content/40" />
</div>
<input
type="email"
className={`input input-bordered w-full pl-10`}
placeholder="[email protected]"
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value
})}
/>
</div>
</div>

<div className="form-control">
<label className="label">
<span className="label-text font-medium">Password</span>
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center
pointer-events-none">
<Lock className="h-5 w-5 text-base-content/40" />
</div>
<input
type={showPassword ? "text" : "password"}
className={`input input-bordered w-full pl-10`}

28
 placeholder="••••••••"
value={formData.password}
onChange={(e) => setFormData({ ...formData, password:
e.target.value })}
/>
<button
type="button"
className="absolute inset-y-0 right-0 pr-3 flex items-center"
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? (
<EyeOff className="h-5 w-5 text-base-content/40" />
):(
<Eye className="h-5 w-5 text-base-content/40" />
)}
</button>
</div>
</div>

<button type="submit" className="btn btn-primary w-full"

disabled={isLoggingIn}>
{isLoggingIn ? (
<>
<Loader2 className="h-5 w-5 animate-spin" />
Loading...
</>
):(
"Sign in"
)}
</button>

29
 </form>

<div className="text-center">
<p className="text-base-content/60">
Don&apos;t have an account?{" "}
<Link to="/signup" className="link link-primary">
Create account
</Link>
</p>
</div>
</div>
</div>

{/* Right Side - Image/Pattern */}

<AuthImagePattern
title={"Welcome back!"}
subtitle={"Sign in to continue your conversations and catch up with your
messages."}
/>
</div>
);
};
export default LoginPage;

SettingPage.jsx :

import { THEMES } from "../constants";

import { useThemeStore } from "../store/useThemeStore";
import { Send } from "lucide-react";

30
const PREVIEW_MESSAGES = [
{ id: 1, content: "Hey! How's it going?", isSent: false },
{ id: 2, content: "I'm doing great! Just working on some new features.", isSent:
true },
];

const SettingsPage = () => {

const { theme, setTheme } = useThemeStore();

return (
<div className="h-screen container mx-auto px-4 pt-20 max-w-5xl">
<div className="space-y-6">
<div className="flex flex-col gap-1">
<h2 className="text-lg font-semibold">Theme</h2>
<p className="text-sm text-base-content/70">Choose a theme for your
chat interface</p>
</div>

<div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2">

{THEMES.map((t) => (
<button
key={t}
className={`
group flex flex-col items-center gap-1.5 p-2 rounded-lg transition-
colors
${theme === t ? "bg-base-200" : "hover:bg-base-200/50"}
`}
onClick={() => setTheme(t)}
>
<div className="relative h-8 w-full rounded-md overflow-hidden"
data-theme={t}>

31
 <div className="absolute inset-0 grid grid-cols-4 gap-px p-1">
<div className="rounded bg-primary"></div>
<div className="rounded bg-secondary"></div>
<div className="rounded bg-accent"></div>
<div className="rounded bg-neutral"></div>
</div>
</div>
<span className="text-[11px] font-medium truncate w-full text-
center">
{t.charAt(0).toUpperCase() + t.slice(1)}
</span>
</button>
))}
</div>

{/* Preview Section */}

<h3 className="text-lg font-semibold mb-3">Preview</h3>
<div className="rounded-xl border border-base-300 overflow-hidden bg-
base-100 shadow-lg">
<div className="p-4 bg-base-200">
<div className="max-w-lg mx-auto">
{/* Mock Chat UI */}
<div className="bg-base-100 rounded-xl shadow-sm overflow-
hidden">
{/* Chat Header */}
<div className="px-4 py-3 border-b border-base-300 bg-base-100">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-full bg-primary flex items-center
justify-center text-primary-content font-medium">
J
</div>

32
 <div>
<h3 className="font-medium text-sm">John Doe</h3>
<p className="text-xs text-base-content/70">Online</p>
</div>
</div>
</div>

{/* Chat Messages */}

<div className="p-4 space-y-4 min-h-[200px] max-h-[200px]
overflow-y-auto bg-base-100">
{PREVIEW_MESSAGES.map((message) => (
<div
key={message.id}
className={`flex ${message.isSent ? "justify-end" : "justify-
start"}`}
>
<div
className={`
max-w-[80%] rounded-xl p-3 shadow-sm
${message.isSent ? "bg-primary text-primary-content" : "bg-
base-200"}
`}
>
<p className="text-sm">{message.content}</p>
<p
className={`
text-[10px] mt-1.5
${message.isSent ? "text-primary-content/70" : "text-base-
content/70"}
`}
>

33
 12:00 PM
</p>
</div>
</div>
))}
</div>

{/* Chat Input */}

<div className="p-4 border-t border-base-300 bg-base-100">
<div className="flex gap-2">
<input
type="text"
className="input input-bordered flex-1 text-sm h-10"
placeholder="Type a message..."
value="This is a preview"
readOnly
/>
<button className="btn btn-primary h-10 min-h-0">
<Send size={18} />
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
34
export default SettingsPage;

Backend :
index.js :

import express from "express";

import dotenv from "dotenv";
import cookieParser from "cookie-parser";
import cors from "cors";

import { connectDB } from "./lib/db.js";

import authRoutes from "./routes/authRoutes.js"

import chatRoutes from "./routes/chatRoutes.js"
import todoRoutes from './routes/todoRoutes.js';

import googleRoutes from './routes/google.js';

import { app, server } from "./lib/socket.js";

dotenv.config();

const PORT =process.env.PORT;

app.use(express.json());
app.use(cookieParser());
app.use(cors({
origin: 'http://localhost:5173', // Vite frontend
credentials: true, // if you're using cookies or auth headers
}));
35
app.use("/api/auth", authRoutes);
app.use("/api/chat", chatRoutes);
app.use('/api/todos', todoRoutes);

app.use('/api/google', googleRoutes);

server.listen(PORT, () => {
console.log("server is running on port:" +PORT);
connectDB();
})

authRoutes.js :

import express from "express";

import { signup, login, logout, updateProfile, checkAuth } from
"../controllers/authController.js"
import { protectRoute } from "../middleware/auth.middleware.js";

const router = express.Router();

router.post("/signup",signup);

router.post("/login",login);

router.post("/logout",logout);

router.put("/update-profile", protectRoute, updateProfile);

36
router.get("/check", protectRoute,checkAuth);

// authRoutes.js
router.get('/profile', protectRoute, (req, res) => {
res.json({
id: req.user.id,
email: req.user.email,
googleTokens: req.user.googleTokens,
});
});

router.get('/sub', protectRoute, (req, res) => {

res.json({
});
});

export default router

chatRoutes.js :

import express from "express";

import { protectRoute } from "../middleware/auth.middleware.js";
import { getMessages, sendMessage, getUsersForSidebar } from
"../controllers/chatController.js";
const router =express.Router();
router.get("/user", protectRoute, getUsersForSidebar);
router.get("/:id",protectRoute, getMessages);
router.post("/send/:id",protectRoute, sendMessage);
export default router;

37
google.js :

import express from 'express';

import { getAuthUrl, getTokens } from '../lib/googleOAuth.js';
import { protectRoute } from "../middleware/auth.middleware.js";

const router = express.Router();

// Endpoint to get the Google OAuth URL

router.get('/auth-url', protectRoute, (req, res) => {
const url = getAuthUrl();
res.json({ url });
});

// Endpoint to handle OAuth callback; expects a "code" query parameter

router.get('/callback', protectRoute, async (req, res) => {
const code = req.query.code;
if (!code) {
return res.status(400).json({ error: 'Code not provided' });
}
try {
const tokens = await getTokens(code);
req.user.googleTokens = tokens;
await req.user.save();

// Redirect to the frontend with a success flag

res.redirect('http://localhost:5173/todo?google_connected=true');
} catch (error) {
// Redirect to frontend with an error flag
res.redirect(`http://localhost:5173/todo?google_error=${error.message}`);
38
 }
});

router.post('/disconnect', protectRoute, async (req, res) => {

try {
req.user.googleTokens = undefined;
await req.user.save();
res.json({ message: "Google Calendar disconnected" });
} catch (error) {
res.status(500).json({ error: error.message });
}
});
export default router;

todoRoutes.js :
import express from 'express';
import { protectRoute } from "../middleware/auth.middleware.js";
import {
getTodos,
createTodo,
updateTodo,
deleteTodo,
} from '../controllers/todoController.js';
const router = express.Router();
// Apply protectRoute middleware to all routes
router.use(protectRoute);
router.get('/', getTodos);
router.post('/', createTodo);
router.put('/:id', updateTodo);
router.delete('/:id', deleteTodo);
39
export default router;

5.3 Output Screens

Signup page

Login page

40
User Account

Home page (To-do creation page )

41
Google signin page

Profile page

42
Chat section

Settings page

43
 6. COST ANALYSIS

6.1 Direct Cost Analysis

Sr. No. Components Cost/Unit Cost

1 Development Cost ₹100 / Hour ₹16,000

2 Hosting Cost (Render/Vercel) ₹1,000 / Month ₹1,000

3 Third-party API Costs (Google, Stripe, Cloudinary) ₹500 / Month ₹500

4 Software Tools (DB Clients, Code Editors, etc.) ₹200 / License ₹400

5 Testing & Deployment Tools ₹300 / Month ₹300

6 Project Documentation & Printing ₹10 / Page ₹1,000

Total ₹19,200

6.2 Indirect Cost Analysis

Sr. No. Components Cost/Unit

1 Internet & Electricity ₹1,500 / Month

2 Backup Storage ₹300 / Month

(Cloudinary)

3 Security Services (OAuth, ₹400 / Month

JWT)

4 Mentorship / Review ₹500 / Month

Sessions

Total

44
6.3 Miscellaneous Cost Analysis

Sr. No. Components Cost

1 Stationery (notebooks, pens, rough work) ₹300

2 Project File & Binding ₹400

3 Internet Café Usage (for testing/demo) ₹300

4 Snacks/Refreshments during development ₹200

5 Transport (for group meetings) ₹300

Total ₹1,500

6.4 Production Cost Analysis

Sr. No. Components Cost/Unit Monthly Cost

1 Final Hosting ₹1,000 / Month (e.g., Vercel Pro, Render, or ₹1,000

AWS Free Tier + add-ons)

2 Maintenance ₹500 / Month (developer time for bug fixes, ₹500

updates, monitoring)

Total ₹1,500

45
 7. CONCLUSION

The To-Do List Web Application with real-time chat and calendar
synchronization is a comprehensive solution for task management and team
collaboration. It addresses the common limitations of traditional task
management systems by combining task management, communication, and
integration with external tools like Google Calendar. The system is built using
modern technologies such as Node.js, React.js, and MongoDB, ensuring
scalability and maintainability. The project successfully meets the objectives set
out, and it has the potential for further expansion with additional features such as
task sharing, notifications, and advanced chat functionalities.

Future Scope

• AI-based Task Suggestions: Recommend task priorities and scheduling

based on user behavior.

• Mobile App Version: Expand platform accessibility through cross-

platform mobile apps.

• Advanced Analytics: Visual reports for task completion, user engagement,

and productivity trends.

• Multi-language Support: Reach a broader user base with multilingual

interfaces.

• Two-Factor Authentication: Enhance account security for premium users.

• Voice Commands Integration: Hands-free task addition and reminders

using voice assistants.

46
COURSE OUTCOMES (COS)

The theory, practical experiences and relevant soft skills associated with this
course are to be taught and implemented, so that the student demonstrates the
following industry oriented COs associated with the above mentioned
competency:

a. Identify your entrepreneurial traits.

b. Identify the business opportunities that suits you.

C. Use the support systems to zero down to your business idea.

d. Develop comprehensive business plans.

e. Prepare plans to manage the enterprise effectively

47
REFERENCES

https://youtube.com/@codesistency

https://youtube.com/@brocodez

https://youtube.com/@javascriptmastery

https://youtube.com/@freecodecamp

https://reactjs.org/docs/getting-started.html

https://nodejs.org/en/docs

https://developers.google.com/calendar/api

48