STUDYBUDDY

A PROJECT REPORT

Submitted by

HARSHAD KUMAR S [RA2411003010734]

JERISH [RA2411003010755]
DIVYANK SINGH [RA2411003010755]
Under the Guidance of

Dr. Vijaykumar K

In partial fulfillment of the requirements for the degree of

BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE ENGINEERING
with specialization in (CORE)

DEPARTMENT OF COMPUTING TECHNOLOGIES

COLLEGE OF ENGINEERING ANDTECHNOLOGY
SRMINSTITUTEOFSCIENCEANDTECHNOLOGY
KATTANKULATHUR-603203

NOVEMBER 2025
 SRM INSTITUTE OF SCIENCE AND TECHNOLOGY
KATTANKULATHUR–603 203

BONAFIDE CERTIFICATE

Certified that 21CSC203P– Advanced Programming Practice [Project

Report] titled “STUDYBUDDY” is the bonafide work of “HARSHAD KUMAR S
[RA2411003010734], JERISH [RA2411003010732], DIVYANK SINGH[RA2411003010755]”
who carried out the project work under my supervision.

SIGNATURE

SUPERVISOR
 ABSTRACT
The StudyBuddy project aims to bridge the academic support gap among students by
providing a structured, peer-to-peer learning platform. Many students struggle with
inaccessible tutoring options, scattered study resources, and a lack of organized
collaboration networks. StudyBuddy addresses these issues by connecting learners seeking
academic assistance with peers offering guidance, thereby fostering a collaborative and
supportive learning environment. The platform offers diverse features such as assignment
help, exam preparation, project collaboration, presentation practice, and resource sharing
through both virtual and offline meetups. With an intuitive web interface built using
HTML, CSS, Java, and SQL, StudyBuddy ensures scalability, security, and real-time
interaction. Beyond improving academic performance, it promotes networking, stress
reduction, and holistic student development. Future enhancements include integrating
premium tutoring, skill exchanges, and career mentorship, positioning StudyBuddy as a
comprehensive hub for academic and personal growth.
 TABLEOFCONTENTS
ABSTRACT v

TABLE OF CONTENTS vi

CHAPTER TITLE PAGE

NO. NO.

1 INTRODUCTION
1.1 General (Introduction to Project) 1
1.2 0- Motivation 2
1.3 Objectives 3
1.4 Scope 4
1.5 Sustainable Development Goal of the Project 5

2 SYSTEM REQUIRMENTS 5
2.1Hardware requirement 12
2.2Software requirement 13
3 SYSTEM DESIGN
3.1 System architecture diagram 15
3.2 Use case diagram
3.3 class diagram
4 MODULE DESCRIPTION 21
3.1Module 1 Description
3.2 Module 2 Description
3.3 Module 3 Description
3.4 Module 4 Description
3.5 Result 29
42
5CONCLUSION
REFERENCES 46
APPENDIX
A CODING 48
 CHAPTER 1

INTRODUCTION

1.1 INTRODUCTION TO PROJECT

In today’s fast-paced academic environment, students often struggle to find affordable and effective
learning support beyond the classroom. Traditional tutoring options can be costly, while online resources
are scattered and unorganized, making it difficult for learners to get timely help. StudyBuddy is designed
to address these challenges by creating a structured peer-to-peer learning platform that connects students
seeking academic assistance with those willing to offer help.

The platform enables users to collaborate on assignments, prepare for exams, work on projects, and
practice presentations. It promotes a culture of shared learning, where students can exchange knowledge
and improve their understanding through interaction and teamwork. By combining technology with
community-driven support, StudyBuddy helps students overcome isolation and enhances both their
academic performance and confidence.

Technically, StudyBuddy is developed using a secure and scalable architecture that integrates HTML, CSS,
Java, and SQL. It provides features such as Q&A forums, Google Meet integration for virtual sessions,
verified offline study locations, and secure file sharing. The user-friendly interface ensures smooth
communication and collaboration among students across all devices.

Looking ahead, StudyBuddy aims to evolve into a complete academic ecosystem by introducing features
like premium tutoring, skill-sharing modules, and career mentorship. Overall, the project aspires to build
a connected student community that learns, grows, and succeeds together through collaboration and
technology.

1
1.2 MOTIVATION

The motivation behind developing StudyBuddy arises from the growing challenges students
face in accessing reliable and affordable academic support. In today’s competitive
education system, many learners struggle with understanding complex subjects,
completing assignments on time, and preparing effectively for exams. While some students
can afford private tutoring, many cannot, leading to a widening gap in learning
opportunities. Moreover, academic resources are often fragmented across various
platforms, making it difficult for students to find structured guidance in one place.

Another major issue is the lack of organized peer-to-peer collaboration. Students

frequently study in isolation, missing out on the benefits of interactive learning, discussion,
and shared problem-solving. Collaborative learning not only improves academic
understanding but also builds teamwork, communication, and leadership skills — qualities
essential for personal and professional success.

StudyBuddy was conceptualized to overcome these barriers by creating a unified platform

where students can connect, share knowledge, and support one another. The idea is to
make learning more accessible, interactive, and community-driven. By leveraging
technology to enable real-time communication, resource sharing, and verified study
meetups, StudyBuddy aims to foster a culture of cooperation and continuous learning.

This motivation drives the project’s vision — to redefine academic support by empowering
students to learn better together, anytime and anywhere.

2
 1.3 OBJECTIVES

The primary objective of the StudyBuddy project is to develop a comprehensive peer-to-peer learning
platform that enhances collaboration and academic support among students. The project focuses on
bridging the gap between learners who seek academic help and those who are willing to offer guidance,
thereby promoting an interactive and supportive educational environment.

The specific objectives of StudyBuddy are as follows:

1. To create a digital platform that enables students to post academic queries and receive timely
assistance from peers.
2. To promote collaborative learning through virtual and offline study groups, project discussions,
and resource sharing.
3. To integrate modern technology such as real-time communication, Google Meet connectivity, and
secure file sharing for a seamless user experience.
4. To reduce academic stress by providing accessible, affordable, and community-driven learning
solutions.
5. To encourage holistic student development by fostering teamwork, communication, and leadership
skills through peer interaction.
6. To build a scalable and secure system architecture using technologies like HTML, CSS, Java, and
SQL for reliability and performance.
7. To expand the platform’s scope in the future by introducing premium tutoring, skill exchange, and
mentorship programs.

Through these objectives, StudyBuddy aims to transform academic assistance into a collaborative,
engaging, and technology-driven experience for students.

3
1.4 SCOPE

The StudyBuddy project encompasses the design and development of an innovative peer-to-peer
academic support platform aimed at improving the overall learning experience of students. The
scope extends beyond simple tutoring by integrating collaboration, communication, and
community building into one unified system. It provides a digital space where students can seek
academic assistance, share resources, and collaborate on assignments, projects, and exam
preparation through both online and offline modes.

The platform’s scope includes features such as real-time query posting, peer responses, discussion
forums, virtual meetups via Google Meet, verified offline study locations, and secure file sharing.
The system will be developed using web technologies including HTML, CSS, Java, and SQL to
ensure scalability, reliability, and ease of access across devices.

In addition to addressing academic challenges, StudyBuddy also focuses on enhancing essential soft
skills such as teamwork, communication, and leadership through peer engagement. The project
can be implemented across schools, colleges, and universities to promote collaborative learning
and reduce dependency on expensive private tutoring.

In the future, the platform can be expanded to include premium tutor services, skill exchange
modules, and career mentorship programs. Thus, the scope of StudyBuddy extends from
immediate academic support to fostering long-term personal and professional growth among
students.

4
1.5 SUSTAINABLE DEVELOPMENT GOAL OF THE PROJECT

The StudyBuddy project primarily aligns with the United Nations Sustainable Development Goal
4: Quality Education.

Goal 4 – Quality Education:

“Ensure inclusive and equitable quality education and promote lifelong learning opportunities for
all.”

This goal emphasizes equal access to affordable and quality education, as well as the promotion of
lifelong learning through innovative and inclusive methods. StudyBuddy supports this objective by
creating a digital peer-to-peer platform that enables students to share knowledge, collaborate on
academic tasks, and access academic help regardless of their financial or geographical limitations.

By fostering a culture of mutual learning, StudyBuddy ensures that education becomes more
inclusive, interactive, and community-driven. The platform helps reduce educational inequality,
encourages collaborative problem-solving, and promotes continuous learning — key principles of
sustainable education.

In addition, StudyBuddy indirectly contributes to:

 SDG 9 – Industry, Innovation, and Infrastructure, by utilizing modern web technologies to

improve access to learning resources.
 SDG 17 – Partnerships for the Goals, by building collaborative networks among students,
educators, and institutions.

Thus, StudyBuddy contributes meaningfully toward achieving the global vision of sustainable,
accessible, and quality education for all.

5
 5.

SYSTEM REQUIREMENT

2.1 HAREWARE REQUIREMENT

Hardware Requirements
Minimum Requirement Recommended Specification
Component
Intel Core i3 / AMD Ryzen 3 Intel Core i5 or higher
Processor (CPU)
4 GB 8 GB or more
RAM
250 GB HDD 512 GB SSD
Storage
1366×768 resolution Full HD (1920×1080)
Display

Required for API calls and cloud sync Stable broadband connection
Internet Connection

6
2.2 SOFTWARE REQUIREMENT

Frontend (Client-Side)
 [Link] (v18+)
 HTML5, CSS3, JavaScript (ES6+)
 React Router DOM (for navigation)
 Axios (for API calls)
 [Link] (v16+) & npm (for running frontend and managing packages)
 VS Code (for development)
Backend (Server-Side)
 Java 11+
 Spring Boot (v2.7+)
 Spring Security with JWT (for authentication)
 Spring Data JPA / Hibernate (for ORM)
 Maven (for dependency management)
 IntelliJ IDEA / Eclipse IDE (for backend development)
Database
 MySQL 8.0+ (local or cloud-hosted)
Development & Testing Tools
 Git & GitHub – Version control
 Postman – API testing
 Browser (Chrome/Edge) – For running and testing frontend
Optional / Future Enhancements
 AWS RDS / Google Cloud SQL – for cloud database
 WebSocket / SQL – for real-time features
 React Native / Flutter – for mobile extension

7
 SYSTEM DESIGN
3.1 SYSTEM ARCHITECHTURE DIAGRAM

┌────────────────────────────┐
│ CLIENT SIDE │
│ (Student / User Computer) │
│────────────────────────────│
│ • Web Browser ([Link]) │
│ • HTML, CSS, JS Interface │
│ • Internet Connectivity │
└─────────────┬──────────────┘
│ HTTP/HTTPS (REST API Calls)
▼
┌────────────────────────────┐
│ APPLICATION SERVER │
│ (Backend - Spring Boot) │
│────────────────────────────│
│ • Java 11+ Runtime Env. │
│ • Spring Boot Framework │
│ • Authentication (JWT) │
│ • Business Logic Layer │
│ • API Endpoints (/api/*) │
└─────────────┬──────────────┘
│ JDBC / JPA Connection
▼
┌────────────────────────────┐
│ DATABASE SERVER │
│ (MySQL 8.0+) │
│────────────────────────────│
│ • Users Table │
│ • Queries Table │
│ • Study Groups Table │
│ • Responses & Files │
└────────────────────────────┘

8
3.2USE CASE DIAGRAM

9
3.3 CLASS DIAGRAM

Class: User
 Attributes:
o id: int
o name: String
o email: String
o password: String
o createdAt: Date
 Methods:
o register()
o login()
o joinGroup()
o postQuery()
Class: Query
 Attributes:
o id: int
o title: String
o description: String
o createdAt: Date
o userId: int
 Methods:
o addResponse()
o viewQuery()
Class: Response
 Attributes:
o id: int
o content: String
o createdAt: Date
o userId: int
o queryId: int
 Methods:
o replyToQuery()
Class: StudyGroup
 Attributes:
o id: int
o name: String
o description: String
o createdBy: int
o createdAt: Date
 Methods:
o addMember()
o shareFile()

10
Class: UserGroup
 Attributes:
o userId: int
o studyGroupId: int
 Methods:
o joinGroup()
o leaveGroup()
Class: File
 Attributes:
o id: int
o filename: String
o fileUrl: String
o fileType: String
o fileSize: float
o uploadedAt: Date
o userId: int
 Methods:
o upload()
o download()

11
 4. MODULE DESCRIPTION

4.1 Module 1: User Authentication and Registration

Description:
This module manages the secure registration and login of users. It allows students
to create accounts using their email and password, which are securely stored in the
database with encryption.
The authentication process uses JWT (JSON Web Token) for maintaining secure
sessions between the frontend and backend. Users can log in, stay authenticated,
and access protected routes like dashboards and study groups.
Key Features:
 User registration and login forms
 Password encryption and token-based authentication
 Session management using JWT
 Validation for unique email and secure password handling

12
4.2 Module 2: Academic Query Management
Description:
This module allows students to post academic questions and respond to others’
queries. Each post includes a title and description stored in the database. The
system maintains the relation between the query and the user who created it, and all
queries are displayed dynamically on the dashboard.
Key Features:
 Post, view, and delete queries
 Add and view responses for each query
 Dynamic update using Axios and React state
 Database linkage through RESTful APIs

13
4.3 Module 3: Study Group Collaboration
Description:
This module focuses on group-based learning. Students can create or join Study
Groups to collaborate with peers who share similar subjects or interests. Each
group stores member information and group details, enabling organized and topic-
based learning communities.
Key Features:
 Create and join study groups
 View members of each group
 Share academic materials within groups
 Many-to-many mapping using UserGroup table

14
4.4 Module 4: File Sharing and Resource Management
Description:
This module enables users to upload and share learning resources such as notes,
PDFs, and documents. Files are stored in the server with metadata such as file
name, type, and upload time. Students can access shared files within their study
groups for efficient peer learning.
Key Features:
 Upload and download files (PDF, DOC, etc.)
 Manage and view shared resources
 File metadata management in the database
 Secure access to shared materials

15
4.5 Result
The StudyBuddy Platform successfully integrates all modules into a seamless web-
based system. Students can register, authenticate, collaborate through queries and
groups, and share academic resources securely.
The final system demonstrates effective peer-to-peer academic collaboration, with
dynamic data updates and a responsive interface.
Performance testing shows smooth interaction between the frontend, backend, and
database, proving the efficiency of the implemented architecture.

16
5 CONCLUSION:

The StudyBuddy Academic Collaboration Platform was successfully designed and

developed as a full-stack web application that connects students in a structured
digital environment for peer-to-peer learning. The system integrates modern
technologies such as [Link], Spring Boot, and MySQL, ensuring a responsive
interface, secure authentication, and efficient data management.
Through its modules — User Authentication, Query Management, Study Group
Collaboration, and File Sharing — the platform promotes interactive and
community-driven learning. It allows students to post academic queries, share study
materials, and collaborate in organized study groups, thereby overcoming the
limitations of informal and unstructured online discussions.
The project demonstrates the effective application of RESTful APIs, JWT-based
security, and three-tier architecture to create a scalable and user-friendly solution. It
can be further enhanced by integrating features like real-time chat, notifications,
and cloud deployment to extend accessibility and interactivity.
In conclusion, StudyBuddy successfully meets its objective of fostering academic
collaboration among students, proving to be a practical and reliable platform for
digital learning communities.

17
 REFERENCES

[1] Ning, X., and Lovell, M. R., “On the Sliding Friction Characteristics of Unidirectional Continuous
FRP Composites,” ASME J. Tribol., 124(1), pp. 5-13, 2002.
[2] Barnes, M., “Stresses in Solenoids,” J. Appl. Phys., 48(5), pp. 2000–2008, 2001.
[3] Jones, J., (2000), Contact Mechanics, Cambridge University Press, Cambridge, UK, Chap. 6.
[4] Lee, Y., Korpela, S. A., and Horne, R. N., “Structure of Multi-Cellular Natural Convection in a
Tall Vertical Annulus,” Proc. 7th International Heat Transfer Conference, U. Grigul et al., eds.,
Hemisphere, Washington, DC, 2, pp. 221–226, 1982.
[5] Hashish, M., “600 MPa Waterjet Technology Development,” High Pressure Technology, PVP-
Vol. 406, pp. 135-140, 2000.
[6] Watson, D. W., “Thermodynamic Analysis,” ASME Paper No. 97-GT-288, 1997. [7] Tung, C. Y.,
(1982), “Evaporative Heat Transfer in the Contact Line of a Mixture,” Ph.D. thesis, Rensselaer
Polytechnic Institute, Troy, NY.

18
 APPENDIX

1. Project Overview

StudyBuddy is a web-based platform designed to help students connect, collaborate, and learn
together.

It allows users to register, post questions, answer others’ queries, and connect with verified peers
through a virtual meetup feature.

The project aims to simplify academic collaboration by combining question-answer functionality

and study partner matching in a single platform.

2. Technology Stack

Component Technology Used

Frontend HTML, CSS, JavaScript
Backend Java (Spark Framework)
Database MySQL
Build Tool Maven
IDE Visual Studio Code / IntelliJ IDEA
Version Control Git

3. Database Schema

The system uses a MySQL database named studybuddy which consists of three main tables:

Users, Questions, and Answers.

Users Table

 Stores user details like username, email, and course information.

 Primary key: id

Questions Table

 Stores questions posted by users.

 Includes title, body, category, tags, likes, views, and answer count.
 Primary key: id

Answers Table

 Stores responses to questions.

 Each answer references a question through question_id as a foreign key.
19
  Primary key: id

Relationships:

 One user can post many questions.

 One question can have multiple answers.

4. Features Implemented

 User registration and login authentication.

 Question posting and display in a centralized feed.
 Popup form for asking questions dynamically.
 Modal-based answer submission system.
 Virtual Meetup page displaying verified students with messaging and meeting options.
 Profile popup showing user details and logout functionality.
 Aesthetic and responsive UI with consistent color palette and modern button design.

5. Screenshots:

Login Screen:

20
Register Screen:

Home Screen:

21
22
Study Locations Screen:

Resources Screen:

23
Virtual Meetup Screen:

6. Limitations

 Google Meet integration is currently simulated.

 No password encryption implemented (for demonstration purposes).
 Real-time updates (chat, new posts) are not yet supported.
 Minimal backend validation and error handling.

7. Future Enhancements

 Integrate Google Meet API for real video sessions.

 Implement real-time chat and notifications using WebSockets.
 Create an admin dashboard for managing users and questions.
 Add password encryption for secure authentication.
 Allow users to customize their profiles and upload study materials.

24
 CODING

[Link]:
package [Link];

import static [Link].*;

import [Link];
import [Link].*;
import [Link].*;

public class Main {

static Connection conn;
static Gson gson = new Gson();

public static void main(String[] args) throws Exception {

// Connect MySQL (change root/root if needed)
String url = "jdbc:mysql://localhost:3306/studybuddy";
String user = "root";
String pass = "Harsh@0401";
conn = [Link](url, user, pass);

port(8080);
[Link]("/public");

before("/api/*", (req, res) -> {

[Link]("Access-Control-Allow-Origin", "*");
[Link]("Access-Control-Allow-Methods", "GET,POST,OPTIONS");
[Link]("Access-Control-Allow-Headers", "Content-Type");
});

get("/api/health", (req, res) -> {

[Link]("application/json");
return "{\"ok\":true}";
});

// Register user
post("/api/register", (req, res) -> {
Map<String, String> body = [Link]([Link](), [Link]);
PreparedStatement ps = [Link](
"INSERT INTO users(username,fullname,email,password) VALUES (?,?,?,?)");
[Link](1, [Link]("username"));
[Link](2, [Link]("fullname"));
[Link](3, [Link]("email"));
[Link](4, [Link]("password"));
[Link]();

25
 [Link]("application/json");
return "{\"success\":true}";
});

// Login
post("/api/login", (req, res) -> {
Map<String, String> body = [Link]([Link](), [Link]);
PreparedStatement ps = [Link](
"SELECT * FROM users WHERE username=? AND password=?");
[Link](1, [Link]("username"));
[Link](2, [Link]("password"));
ResultSet rs = [Link]();
boolean ok = [Link]();
[Link]("application/json");
return "{\"success\":" + ok + "}";
});

// Get all users

get("/api/users", (req, res) -> {
List<Map<String, String>> users = new ArrayList<>();
Statement st = [Link]();
ResultSet rs = [Link]("SELECT id,username,fullname,email,course,year FROM users");
while ([Link]()) {
Map<String, String> u = new HashMap<>();
[Link]("id", [Link]("id"));
[Link]("username", [Link]("username"));
[Link]("fullname", [Link]("fullname"));
[Link]("email", [Link]("email"));
[Link]("course", [Link]("course"));
[Link]("year", [Link]("year"));
[Link](u);
}
[Link]("application/json");
return [Link](users);
});

// Get all questions

get("/api/questions", (req, res) -> {
List<Map<String, Object>> questions = new ArrayList<>();
Statement st = [Link]();
ResultSet rs = [Link]("SELECT * FROM questions ORDER BY created_at DESC");
while ([Link]()) {
Map<String, Object> q = new HashMap<>();
[Link]("id", [Link]("id"));
[Link]("title", [Link]("title"));
[Link]("body", [Link]("body"));
[Link]("category", [Link]("category"));
[Link]("tags", [Link]("tags"));
[Link]("username", [Link]("username"));
[Link]("created_at", [Link]("created_at").toString());
[Link]("views", [Link]("views"));
[Link]("likes", [Link]("likes"));
[Link]("answers", [Link]("answers"));
[Link](q);
}

26
 [Link]("application/json");
return [Link](questions);
});

// Post a new question

post("/api/questions", (req, res) -> {
Map<String, String> body = [Link]([Link](), [Link]);
PreparedStatement ps = [Link](
"INSERT INTO questions(title,body,category,tags,username) VALUES(?,?,?,?,?)",
Statement.RETURN_GENERATED_KEYS);
[Link](1, [Link]("title"));
[Link](2, [Link]("body"));
[Link](3, [Link]("category"));
[Link](4, [Link]("tags"));
[Link](5, [Link]("username"));
[Link]();
ResultSet generatedKeys = [Link]();
Map<String, Object> q = new HashMap<>();
if ([Link]()) {
int id = [Link](1);
Statement st2 = [Link]();
ResultSet rs2 = [Link]("SELECT * FROM questions WHERE id=" + id);
if ([Link]()) {
[Link]("id", [Link]("id"));
[Link]("title", [Link]("title"));
[Link]("body", [Link]("body"));
[Link]("category", [Link]("category"));
[Link]("tags", [Link]("tags"));
[Link]("username", [Link]("username"));
[Link]("created_at", [Link]("created_at").toString());
[Link]("views", [Link]("views"));
[Link]("likes", [Link]("likes"));
[Link]("answers", [Link]("answers"));
}
}
[Link]("application/json");
return [Link](q);
});
// Get answers for a question
get("/api/questions/:id/answers", (req, res) -> {
int qid = [Link]([Link](":id"));
PreparedStatement ps = [Link](
"SELECT id, body, username, created_at FROM answers WHERE question_id=? ORDER BY
created_at ASC");
[Link](1, qid);
ResultSet rs = [Link]();

List<Map<String, Object>> answers = new ArrayList<>();

while ([Link]()) {
Map<String, Object> a = new HashMap<>();
[Link]("id", [Link]("id"));
[Link]("body", [Link]("body"));
[Link]("username", [Link]("username"));
[Link]("created_at", [Link]("created_at").toString());
[Link](a);

27
 }

[Link]("application/json");
return [Link](answers);
});

// Post a new answer

post("/api/questions/:id/answers", (req, res) -> {
int qid = [Link]([Link](":id"));
Map<String, String> body = [Link]([Link](), [Link]);

PreparedStatement ps = conn
.prepareStatement("INSERT INTO answers(question_id, body, username) VALUES(?,?,?)");
[Link](1, qid);
[Link](2, [Link]("body"));
[Link](3, [Link]("username"));
[Link]();

// increment answers count in questions table

PreparedStatement ps2 = [Link]("UPDATE questions SET answers = answers
+ 1 WHERE id=?");
[Link](1, qid);
[Link]();

[Link]("application/json");
return [Link]([Link]("success", true));
});
}
}

[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home – Study Buddy</title>
<link rel="stylesheet" href="/[Link]" />
</head>
<body>
<header class="navbar">
<div class="logo">📘 <span>StudyBuddy</span></div>
<nav>
<a class="active" href="/[Link]">Questions</a>
<a href="/[Link]">Study Locations</a>
<a href="/[Link]">Resources</a>
<a href="/[Link]">Virtual Meetup</a>
</nav>
<div class="avatar-wrapper">
<div class="avatar">H</div>
<div class="profile-popup" id="profilePopup">
<p><strong>Rohan Sharma</strong></p>
<p>rohan.s@[Link]</p>

28
 <button id="logoutBtn">Logout</button>
</div>
</div>
</header>

<main class="container">
<h2>Questions</h2>
<div class="toolbar">
<input placeholder="Search questions..." />
<button class="btn">Search</button>
<select>
<option>All Categories</option>
</select>
<button class="btn" onclick="openModal()">+ Ask Question</button>
</div>

<!-- This div gets filled dynamically by [Link] -->

<div id="questionsList"></div>
<!-- Question Detail & Answers Modal -->
<div class="modal" id="answersModal">
<div class="modal-content">
<h3 id="modalQuestionTitle"></h3>
<p id="modalQuestionBody"></p>
<div id="answersSection"></div>

<!-- Answer form -->

<h4>Write Your Answer</h4>
<form id="answerForm">
<textarea
name="body"
rows="3"
required
placeholder="Type your answer..."
></textarea>
<input name="username" placeholder="Your name" required />

<div class="modal-buttons">
<button type="submit" class="btn">Submit Answer</button>
<button
type="button"
class="btn btn-secondary"
onclick="closeAnswersModal()"
>
Close
</button>
</div>
</form>
</div>
</div>

<!-- Ask Question Modal -->

<div class="modal" id="askModal">
<div class="modal-content">
<h3>Ask a Question</h3>
<form id="askForm">

29
 <label
>Title
<input
name="title"
required
placeholder="Enter your question title"
/>
</label>
<label
>Description
<textarea
name="body"
rows="4"
placeholder="Provide details about your question"
></textarea>
</label>
<label
>Category
<select name="category">
<option>Exam</option>
<option>Project</option>
<option>Placement</option>
<option>General</option>
</select>
</label>
<label
>Tags (comma separated)
<input name="tags" placeholder="e.g. DSA, Java" />
</label>
<label
>Your Name
<input name="username" required placeholder="Enter your name" />
</label>
<div class="modal-actions">
<button type="submit" class="btn">Post Question</button>
<button type="button" class="btn cancel" onclick="closeModal()">
Cancel
</button>
</div>
</form>
</div>
</div>
</main>

<script src="/[Link]"></script>
</body>
</html>

30
[Link]:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Study Buddy</title>
<link rel="stylesheet" href="/[Link]" />
</head>
<body>
<header>
<h1>📚 Study Buddy</h1>
<p>Find your perfect study partner!</p>
</header>

<main>
<p><a href="/[Link]">Login</a></p>
<p><a href="/[Link]">Register</a></p>
<p><a href="/[Link]">View Users</a></p>
</main>
</body>
</html>

[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Study Locations – Study Buddy</title>
<link rel="stylesheet" href="/[Link]" />
</head>
<body>
<header class="navbar">
<div class="logo">📘 <span>StudyBuddy</span></div>
<nav>
<a href="/[Link]">Questions</a>
<a class="active" href="/[Link]">Study Locations</a>
<a href="/[Link]">Resources</a>
<a href="/[Link]">Virtual Meetup</a>
</nav>
<div class="avatar-wrapper">
<div class="avatar">H</div>

31
 <div class="profile-popup" id="profilePopup">
<p><strong>Rohan Sharma</strong></p>
<p>rohan.s@[Link]</p>
<button id="logoutBtn">Logout</button>
</div>
</div>
</header>

<main class="container">
<h2>Study Locations</h2>
<p class="subtitle">
Verified locations for in-person study sessions and collaboration
</p>

<div class="location-card">
<h3>Tech Park 2 – Activity Room <span class="badge">Verified</span></h3>
<p class="address">📍 Tech Park 2, Main Campus</p>
<p>
Spacious activity room for group discussions and collaborative study.
</p>
<p>👥 Capacity: 40 students</p>
<p>Amenities:</p>
<div class="tags">
<span class="tag">WiFi</span>
<span class="tag">Clean Room</span>
<span class="tag">AC</span>
</div>
</div>

<div class="location-card">
<h3>Central Library <span class="badge">Verified</span></h3>
<p class="address">📍 University Central Library, Campus Center</p>
<p>
Quiet study space with individual desks and plenty of natural light.
</p>
<p>👥 Capacity: 50 students</p>
<p>Amenities:</p>
<div class="tags">
<span class="tag">WiFi</span>
<span class="tag">Power outlets</span>
<span class="tag">Quiet</span>
<span class="tag">AC</span>
</div>
</div>

<div class="location-card">
<h3>Tech Park Cafe <span class="badge">Verified</span></h3>
<p class="address">📍 Tech Park, Ground Floor</p>
<p>Casual cafe space suitable for relaxed study sessions.</p>
<p>👥 Capacity: 30 students</p>
<p>Amenities:</p>
<div class="tags">
<span class="tag">WiFi</span>
<span class="tag">Snacks</span>
<span class="tag">Open Seating</span>

32
 </div>
</div>
</main>

<script src="/[Link]"></script>
</body>
</html>

[Link]:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login – Study Buddy</title>
<link rel="stylesheet" href="/[Link]" />
</head>
<body class="auth">
<div class="auth-card">
<h1>Login</h1>
<p class="subtitle">Login to your Study Buddy account</p>

<form id="loginForm">
<label
>Username
<input name="username" placeholder="Enter your username" required />
</label>
<label
>Password
<input
type="password"
name="password"
placeholder="Enter your password"
required
/>
</label>
<button type="submit" class="btn full">Login</button>
</form>

<p class="switch">
Don’t have an account? <a href="/[Link]">Register here</a>
</p>
</div>
<script src="/[Link]"></script>
</body>
</html>

33
[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Register – Study Buddy</title>
<link rel="stylesheet" href="/[Link]" />
</head>
<body class="auth">
<div class="auth-card">
<h1>Register</h1>
<p class="subtitle">Create an account to join Study Buddy</p>

<form id="registerForm">
<label
>Username
<input name="username" placeholder="Choose a username" required />
</label>
<label
>Full Name
<input name="fullname" placeholder="Enter your full name" required />
</label>
<label
>Email
<input
type="email"
name="email"
placeholder="Enter your email"
required
/>
</label>
<label
>Password
<input
type="password"
name="password"
placeholder="Choose a password"
required
/>
</label>
<label
>Confirm Password
<input
type="password"
name="confirm"
34
 placeholder="Re-enter password"
required
/>
</label>
<button type="submit" class="btn full">Register</button>
</form>

<p class="switch">
Already have an account? <a href="/[Link]">Login here</a>
</p>
</div>
<script src="/[Link]"></script>
</body>
</html>

[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Virtual Meetup – Study Buddy</title>
<link rel="stylesheet" href="/[Link]" />
</head>
<body>
<header class="navbar">
<div class="logo">📘 <span>StudyBuddy</span></div>
<nav>
<a href="/[Link]">Questions</a>
<a href="/[Link]">Study Locations</a>
<a href="/[Link]">Resources</a>
<a class="active" href="/[Link]">Virtual Meetup</a>
</nav>
<div class="avatar-wrapper">
<div class="avatar">H</div>
<div class="profile-popup" id="profilePopup">
<p><strong>Rohan Sharma</strong></p>
<p>rohan.s@[Link]</p>
<button id="logoutBtn">Logout</button>
</div>
</div>
</header>

<main class="container">
<h2>Virtual Meetup</h2>
<p class="subtitle">
Connect with fellow students, schedule study sessions, or join a Google
Meet.
</p>

<!-- Search and filter -->

<div class="toolbar">

35
 <input id="studentSearch" placeholder="Search students..." />
<select id="subjectFilter">
<option value="">All Subjects</option>
<option value="DSA">DSA</option>
<option value="DBMS">DBMS</option>
<option value="Java">Java</option>
</select>
<button class="btn" onclick="filterStudents()">Search</button>
</div>

<!-- Student cards -->

<div id="studentList" class="student-cards">
<div class="student-card">
<div class="student-info">
<h3>Rohan Sharma <span class="badge">Verified</span></h3>
<p>📧 rohan.s@[Link]</p>
<p>📘 Subject: DSA</p>
<p>👥 Students helped: 15</p>
<p>🕒 Availability: Evenings</p>
</div>
<div class="student-actions">
<button class="btn" onclick="sendMessage('Rohan Sharma','DSA')">💬 Message</button>
<a href="[Link] target="_blank">
<button class="btn btn-secondary">📎 Join Meet</button>
</a>
</div>
</div>

<div class="student-card">
<div class="student-info">
<h3>Ananya Verma <span class="badge">Verified</span></h3>
<p>📧 ananya.v@[Link]</p>
<p>📘 Subject: DBMS</p>
<p>👥 Students helped: 20</p>
<p>🕒 Availability: Weekends</p>
</div>
<div class="student-actions">
<button class="btn" onclick="sendMessage('Ananya Verma','DBMS')">💬 Message</button>
<a href="[Link] target="_blank">
<button class="btn btn-secondary">📎 Join Meet</button>
</a>
</div>
</div>

<div class="student-card">
<div class="student-info">
<h3>Karan Mehta</h3>
<p>📧 karan.m@[Link]</p>
<p>📘 Subject: Java</p>
<p>👥 Students helped: 8</p>
<p>🕒 Availability: Mornings</p>
</div>
<div class="student-actions">
<button class="btn" onclick="sendMessage('Karan Mehta','Java')">💬 Message</button>
<a href="[Link] target="_blank">

36
 <button class="btn btn-secondary">📎 Join Meet</button>
</a>
</div>
</div>
</div>
</main>

<script src="/[Link]"></script>
</body>
</html>

[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Resources – Study Buddy</title>
<link rel="stylesheet" href="/[Link]" />
</head>
<body>
<header class="navbar">
<div class="logo">📘 <span>StudyBuddy</span></div>
<nav>
<a href="/[Link]">Questions</a>
<a href="/[Link]">Study Locations</a>
<a class="active" href="/[Link]">Resources</a>
<a href="/[Link]">Virtual Meetup</a>
</nav>
<div class="avatar-wrapper">
<div class="avatar">H</div>
<div class="profile-popup" id="profilePopup">
<p><strong>Rohan Sharma</strong></p>
<p>rohan.s@[Link]</p>
<button id="logoutBtn">Logout</button>
</div>
</div>
</header>

<main class="container">
<h2>Resources</h2>
<p class="subtitle">
Curated study materials, guides, and practice sets to help you succeed.
</p>

<div class="resource-card">
<h3>📘 Data Structures Cheat Sheet (PDF)</h3>
<p>
A compact one-page summary of key Data Structures concepts for quick
revision.
</p>
<a href="#" class="btn-link">Download</a>
</div>

37
 <div class="resource-card">
<h3>📝 DBMS MCQ Bank</h3>
<p>
200+ multiple-choice questions with detailed solutions for database
exams.
</p>
<a href="#" class="btn-link">Download</a>
</div>

<div class="resource-card">
<h3>💻 LeetCode Placement Practice</h3>
<p>
Curated 50 coding problems from LeetCode to prepare for interviews and
placements.
</p>
<a href="[Link] target="_blank" class="btn-link"
>Open</a
>
</div>
</main>

<script src="/[Link]"></script>
</body>
</html>

[Link]:
const API = [Link] + "/api";

// Fetch all users from backend

async function fetchUsers() {
const res = await fetch(API + "/users");
return [Link]();
}

// Render users in the table

async function initUsers() {
const data = await fetchUsers();
const tbody = [Link]("#usersTable tbody");
if (!tbody) return;
[Link] = [Link](u =>
`<tr>
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>${[Link] || ""}</td>
<td>${[Link] || ""}</td>
</tr>`
).join('');
}
38
// Handle login
function initLogin() {
const form = [Link]("#loginForm");
if (!form) return;
[Link]("submit", async e => {
[Link]();
const fd = new FormData(form);
const body = [Link]([Link]());
const res = await fetch(API + "/login", {
method: "POST",
headers: {"Content-Type":"application/json"},
body: [Link](body)
});
const data = await [Link]();
if ([Link]) {
alert("Login successful!");
[Link] = "/[Link]";
} else {
alert("Invalid username or password");
}
});
}

// Handle register
function initRegister() {
const form = [Link]("#registerForm");
if (!form) return;
[Link]("submit", async e => {
[Link]();
const fd = new FormData(form);
const body = [Link]([Link]());
const res = await fetch(API + "/register", {
method: "POST",
headers: {"Content-Type":"application/json"},
body: [Link](body)
});
const data = await [Link]();
if ([Link]) {
alert(`Registration successful! Welcome to StudyBuddy, ${[Link]}!`);
[Link] = "/[Link]";
} else {
alert("Registration failed");
}
});
}

// Initialize based on page

[Link]("DOMContentLoaded", () => {
if ([Link]("#usersTable")) initUsers();
if ([Link]("#loginForm")) initLogin();
if ([Link]("#registerForm")) initRegister();
});

// Modal controls

39
function openModal() {
[Link]("askModal").[Link] = "flex";
}
function closeModal() {
[Link]("askModal").[Link] = "none";
}

// Handle Ask Question form

[Link]("DOMContentLoaded", () => {
const askForm = [Link]("#askForm");
if (askForm) {
[Link]("submit", async e => {
[Link]();
const fd = new FormData(askForm);
const body = [Link]([Link]());
const res = await fetch(API + "/questions", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: [Link](body)
});
const data = await [Link]();
if (data && ([Link] === true || [Link])) {
alert("Question posted successfully!");
closeModal();
[Link]();
const updated = await fetchQuestions();
renderQuestions(updated);
} else {
alert("Failed to post question.");
}
});
}
});

// ===== Questions feed (Home) =====

let questionsCache = [];

async function fetchQuestions() {

const res = await fetch(API + "/questions");
if (![Link]) {
[Link]("Failed to fetch /api/questions", [Link]);
return [];
}
const data = await [Link]();
questionsCache = data;
return data;
}

function renderQuestions(list) {
questionsCache = list;
const container = [Link]("#questionsList");
if (!container) return;
[Link] = [Link](q => {
const dateText = (q.created_at ? String(q.created_at) : new Date().toISOString()).split(" ")[0].split("T")
[0];

40
 const tagsHtml = [Link] ? String([Link]).split(",").map(t => `<span class="tag">$
{[Link]()}</span>`).join("") : "";
return `
<div class="question-card" data-id="${[Link]}">
<h3>${[Link]}</h3>
<p>${[Link] || ""}</p>
<div class="meta">
<span>${[Link] || 0} 👍</span>
<span class="answers-count">${[Link] || 0} answers</span>
<span>${[Link] || 0} views</span>
<span>asked by ${[Link] || "Anonymous"} · ${dateText}</span>
</div>
<div class="tags">
${[Link] ? `<span class="tag">${[Link]}</span>` : ""}
${tagsHtml}
</div>
</div>`;
}).join("");
}

async function initHome() {

try {
const data = await fetchQuestions();
renderQuestions(data);
} catch (e) {
[Link]("initHome error", e);
}
}

// When on [Link], populate questions list

[Link]("DOMContentLoaded", () => {
if ([Link]("#questionsList")) {
initHome();
const listEl = [Link]("#questionsList");
if (listEl) {
[Link]("click", (e) => {
const card = [Link](".question-card");
if (!card) return;
const id = Number([Link]);
const q = [Link](x => Number([Link]) === id);
if (q) openAnswersModal(q, card);
});
}
}
});

// ===== Answers Modal =====

let currentQuestionId = null;
let currentCardEl = null;

function openAnswersModal(question, cardEl) {

const modal = [Link]("answersModal");
[Link] = "flex";
[Link]("modalQuestionTitle").textContent = [Link];
[Link]("modalQuestionBody").textContent = [Link] || "";

41
 currentQuestionId = [Link];
currentCardEl = cardEl;
loadAnswers([Link]);
}

function closeAnswersModal() {
[Link]("answersModal").[Link] = "none";
currentQuestionId = null;
currentCardEl = null;
[Link]("answersSection").innerHTML = "";
}

async function loadAnswers(qid) {

const res = await fetch(API + `/questions/${qid}/answers`);
const answers = await [Link]();
const container = [Link]("answersSection");
if (![Link]) {
[Link] = "<p>No answers yet. Be the first to answer!</p>";
return;
}
[Link] = [Link](a => `
<div class="answer-card">
<p>${[Link]}</p>
<div class="meta">by ${[Link] || "Anonymous"} · ${a.created_at.split(" ")[0]}</div>
</div>
`).join("");
}

// Submit new answer

[Link]("DOMContentLoaded", () => {
const answerForm = [Link]("answerForm");
if (answerForm) {
[Link]("submit", async e => {
[Link]();
const fd = new FormData(answerForm);
const body = [Link]([Link]());
const res = await fetch(API + `/questions/${currentQuestionId}/answers`, {
method: "POST",
headers: {"Content-Type": "application/json"},
body: [Link](body)
});
const data = await [Link]();
if ([Link]) {
[Link]();
loadAnswers(currentQuestionId);
if (currentCardEl) {
const countEl = [Link](".answers-count");
if (countEl) {
const m = [Link](/(\d+)/);
const curr = m ? parseInt(m[1], 10) : 0;
[Link] = (curr+1) + " answers";
}
}
}
});

42
 }
});
// ===== Profile popup & logout =====
[Link]("DOMContentLoaded", () => {
const avatar = [Link](".avatar");
const popup = [Link](".profile-popup");
const logoutBtn = [Link]("#logoutBtn");

if (avatar && popup) {

[Link]("click", () => {
[Link] = [Link] === "block" ? "none" : "block";
});
[Link]("click", (e) => {
if ( && ) {
[Link] = "none";
}
});
}

if (logoutBtn) {
[Link]("click", () => {
alert("Logged out successfully!");
[Link] = "/[Link]";
});
}
});

// ===== Virtual Meetup Message functionality =====

function sendMessage(name, subject) {
const prebuilt = [
`Hey ${name}, want to study ${subject} together?`,
`Hi ${name}, free for a quick ${subject} session?`,
`Hello ${name}, can we schedule a ${subject} discussion?`
];
const msg = prebuilt[[Link]([Link]() * [Link])];
alert(`Message sent to ${name}: "${msg}"`);
}

[Link]:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Users – Study Buddy</title>
<link rel="stylesheet" href="/[Link]" />
</head>
<body>
<header>
<h1>All Users</h1>
43
 </header>

<main>
<table id="usersTable" border="1" cellspacing="0" cellpadding="6">
<thead>
<tr>
<th>ID</th>
<th>Username</th>
<th>Full Name</th>
<th>Email</th>
<th>Course</th>
<th>Year</th>
</tr>
</thead>
<tbody></tbody>
</table>
</main>

<script src="/[Link]"></script>
</body>
</html>

[Link]:

@import url('[Link]

/* General page styles */

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f9fafb;
color: #111;
}

/* Header */
header {
background: #2563eb;
color: white;
padding: 16px;
text-align: center;
}

/* Auth pages (login/register) */

.auth {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f3f4f6;
}
44
.auth-card {
background: white;
padding: 24px 32px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
width: 350px;
max-width: 90%;
}
.auth-card h1 {
margin: 0 0 10px;
text-align: center;
}
.auth-card .subtitle {
margin: 0 0 20px;
font-size: 14px;
color: #555;
text-align: center;
}
.auth-card label {
display: block;
font-size: 14px;
margin-bottom: 12px;
}
.auth-card input {
width: 100%;
padding: 10px;
margin-top: 4px;
border: 1px solid #ccc;
border-radius: 6px;
}
.auth-card button {
margin-top: 12px;
width: 100%;
padding: 10px;
background: #2563eb;
border: none;
color: white;
font-weight: bold;
border-radius: 6px;
cursor: pointer;
}
.auth-card button:hover {
background: #1e4db7;
}
.switch {
text-align: center;
margin-top: 16px;
font-size: 14px;
}
.switch a {
color: #2563eb;
text-decoration: none;
}

/* Users table */

45
table {
width: 90%;
margin: 20px auto;
border-collapse: collapse;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
th, td {
padding: 12px;
border-bottom: 1px solid #eee;
text-align: left;
}
th {
background: #f1f5f9;
}
tr:hover td {
background: #f9fafb;
}
/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 24px;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.navbar .logo {
font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
font-weight: 700;
font-size: 24px;
color: #2563eb;
letter-spacing: 0.5px;
}
.navbar .logo span {
font-weight: 700;
}
.navbar nav a {
margin: 0 8px;
text-decoration: none;
color: #333;
padding: 6px 10px;
border-radius: 6px;
}
.navbar nav [Link],
.navbar nav a:hover {
background: #111;
color: #fff;
}
.navbar .avatar {
background: #111;
color: #fff;
width: 32px;

46
 height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}

/* Container & toolbar */

.container {
max-width: 800px;
margin: 20px auto;
padding: 0 16px;
}
.toolbar {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.toolbar input {
flex: 1;
padding: 8px;
border: 1px solid #ddd;
border-radius: 6px;
}
.toolbar button,
.toolbar select {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 6px;
cursor: pointer;
}

/* Questions list */
#questionsList {
display: flex;
flex-direction: column;
gap: 12px;
}
.question-card {
background: #fff;
padding: 16px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.question-card h3 {
margin: 0 0 8px;
}
.question-card p {
margin: 0 0 8px;
color: #444;
}
.question-card .meta {
font-size: 13px;
color: #666;
display: flex;

47
 gap: 12px;
flex-wrap: wrap;
}
.tag {
background: #eee;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
margin-right: 6px;
}
/* Study Locations */
.location-card {
background: #fff;
padding: 16px;
margin-bottom: 16px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.location-card h3 {
margin: 0 0 6px;
}
.location-card .address {
font-size: 14px;
color: #666;
margin-bottom: 6px;
}
.badge {
background: #28a745;
color: #fff;
font-size: 12px;
padding: 2px 8px;
border-radius: 12px;
margin-left: 6px;
}

/* Resources */
.resource-card {
background: #fff;
padding: 20px;
margin-bottom: 16px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.resource-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.resource-card h3 {
margin: 0 0 10px;
}
.resource-card p {
margin: 0 0 12px;
color: #444;
}

48
.btn-link {
display: inline-block;
padding: 8px 14px;
background: #2563eb;
color: #fff;
border-radius: 6px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
}
.btn-link:hover {
background: #1e4db7;
}
/* Virtual Meetup */
.student-card {
background: #fff;
padding: 16px;
margin-bottom: 16px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.student-info {
max-width: 70%;
}
.student-info h3 {
margin: 0;
}
.student-info .badge {
background: #2563eb;
color: #fff;
font-size: 12px;
padding: 2px 8px;
border-radius: 12px;
margin-left: 6px;
}
.student-info p {
margin: 4px 0;
color: #444;
font-size: 14px;
}
.student-actions {
display: flex;
flex-direction: column;
gap: 6px;
}
.student-actions button {
padding: 6px 10px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 600;

49
}
.student-actions .msg-btn {
background: #2563eb;
color: #fff;
}
.student-actions .msg-btn:hover {
background: #1e4db7;
}
.student-actions .meet-btn {
background: #28a745;
color: #fff;
}
.student-actions .meet-btn:hover {
background: #1e7a34;
}
/* Profile popup */
.avatar-wrapper {
position: relative;
display: inline-block;
cursor: pointer;
}
.profile-popup {
position: absolute;
right: 0;
top: 40px;
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
padding: 12px;
display: none;
min-width: 200px;
z-index: 100;
}
.profile-popup p {
margin: 4px 0;
font-size: 14px;
color: #333;
}
.profile-popup button {
margin-top: 8px;
width: 100%;
padding: 8px;
background: #dc2626;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
}
.profile-popup button:hover {
background: #b91c1c;
}
/* Modal styles */
.modal {

50
 position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(4px);
display: none;
justify-content: center;
align-items: center;
z-index: 200;
}
.modal-content {
background: #fff;
padding: 24px;
border-radius: 10px;
max-width: 500px;
width: 90%;
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.modal-content h3 {
margin-top: 0;
margin-bottom: 16px;
}
.modal-content label {
display: block;
margin-bottom: 12px;
font-size: 14px;
}
.modal-content input,
.modal-content textarea,
.modal-content select {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 6px;
margin-top: 4px;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 16px;
}
.modal-actions .[Link] {
background: #ccc;
color: #111;
}
.modal-actions .[Link]:hover {
background: #aaa;
}
/* Make question cards larger and more aesthetic */
.question-card {
padding: 20px;
margin: 20px 0;
border-radius: 8px;
background: #fff;

51
 box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.question-card h3 {
font-size: 1.4em;
margin-bottom: 0.6em;
}

.question-card p {
font-size: 1.1em;
margin-bottom: 1em;
line-height: 1.5;
}

.question-card .meta {
font-size: 0.9em;
color: #666;
margin: 0.8em 0;
display: flex;
flex-wrap: wrap;
gap: 16px;
}

.question-card .tags .tag {

display: inline-block;
background: #f0f0f0;
color: #333;
padding: 4px 8px;
margin: 6px 6px 0 0;
border-radius: 4px;
font-size: 0.85em;
}
#answersSection {
margin: 12px 0;
padding: 10px;
border-top: 1px solid #eee;
}
.answer-card {
background: #f9fafb;
padding: 10px;
margin: 8px 0;
border-radius: 6px;
}
.answer-card p {
margin: 0 0 4px;
}
.answer-card .meta {
font-size: 12px;
color: #666;
}

/* Global button styles */

.btn {
display: inline-block;
padding: 10px 18px;

52
 border: none;
border-radius: 6px;
font-size: 15px;
cursor: pointer;
background: #2563eb; /* professional blue */
color: #fff;
font-weight: 500;
transition: background 0.2s ease, transform 0.1s ease;
}

.btn:hover {
background: #1e4ed8;
transform: translateY(-1px);
}

.btn:active {
background: #1c3faa;
transform: translateY(0);
}

/* Secondary button */
.btn-secondary {
background: #e5e7eb;
color: #111;
}
.btn-secondary:hover {
background: #d1d5db;
}

/* Full width button */

.[Link] {
width: 100%;
}

/* Modal answer form adjustments */

#answerForm textarea,
#answerForm input {
margin-bottom: 12px;
}

#answerForm .modal-buttons {
display: flex;
justify-content: space-between;
margin-top: 12px;
gap: 12px;
}

[Link]:

<project xmlns="[Link]
xmlns:xsi="[Link]
53
 xsi:schemaLocation="[Link] [Link]
[Link]">
<modelVersion>4.0.0</modelVersion>
<groupId>[Link]</groupId>
<artifactId>study-buddy</artifactId>
<version>1.0.0</version>
<properties>
<[Link]>17</[Link]>
<[Link]>17</[Link]>
</properties>

<dependencies>
<dependency>
<groupId>[Link]</groupId>
<artifactId>spark-core</artifactId>
<version>2.9.4</version>
</dependency>

<dependency>
<groupId>[Link]</groupId>
<artifactId>gson</artifactId>
<version>2.10.1</version>
</dependency>

<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.33</version>
</dependency>
</dependencies>

<build>
<plugins>
<plugin>
<groupId>[Link]</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>3.5.0</version>
<configuration>
<mainClass>[Link]</mainClass>
</configuration>
</plugin>
</plugins>
</build>
</project>

[Link]:

# StudyBuddy

A simple web-based platform for connecting students, asking questions, and collaborating on study
sessions.
54
## Requirements
- Java 11 or higher
- Maven
- MySQL

## Setup Instructions

1. **Clone or extract the project**

```bash
git clone <repo-url>
# or unzip the `[Link]`
cd study-buddy
```

2. **Set up the database**

- Create a MySQL database named `studybuddy`.
- Update username and password in `[Link]` if needed:
```java
String url = "jdbc:mysql://localhost:3306/studybuddy";
String user = "root";
String pass = "yourpassword";
```
- Run the SQL scripts to create the tables:
```sql
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) UNIQUE,
fullname VARCHAR(100),
email VARCHAR(100),
password VARCHAR(100),
course VARCHAR(100),
year VARCHAR(10)
);

CREATE TABLE questions (

id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(255),
body TEXT,
category VARCHAR(100),
tags VARCHAR(255),
username VARCHAR(50),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
views INT DEFAULT 0,
likes INT DEFAULT 0,
answers INT DEFAULT 0
);

CREATE TABLE answers (

id INT AUTO_INCREMENT PRIMARY KEY,
question_id INT,
body TEXT,
username VARCHAR(50),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (question_id) REFERENCES questions(id)

55
 );
```

3. **Build and run the project**

```bash
mvn clean compile exec:java
```

4. **Access the app**

- Open your browser and go to:
```
[Link]
```

## Notes
- You may need to install Maven if not already installed.
- Ensure MySQL service is running before starting the app.
- To change port, edit `[Link]` (default: 8080).

## Features
- User registration and login system.
- Post, view, and answer questions dynamically.
- Modern UI with interactive modals.
- Virtual Meetup section with dummy student profiles.
- Profile popup with logout functionality.
- Fully responsive and easy to deploy.

## Developer
**Harshad Kumar**
**Jerish**
**Divyank**
[Link] CSE Core
SRM University

56
57