DEPARTMENT OF COMPUTER

SCIENCE & ENGINEERING

CS209: Software Engineering

Project Documentation

Topic: Alumni Portal Management System

SUBMITTED TO: SUBMITTED BY:

MS. ANJALI SINGH KSHITIJ SINHA (23/CS/225)

MADHAV MISHRA (23/CS/236)

MAYANK YADAV (23/CS/250)

NEAL SAXENA (23/CS/275)

 Software Life-Cycle Model Followed
This software was developed using the Iterative Enhancement Model, as it was
conceived as a series of several small releases; each containing a fully
functional module/sub-part of the proposed final software.

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 2
 Requirement Analysis
List of Requirements

The client has made the requirements listed under the “Normal Requirements”
sub-heading, those under the “Exciting Requirements” have been provided from
the developers’ end as extra, but useful features.

● Normal Requirements
○ Profile Management: Creation, updation and deletion of profiles of
both students, and alumni.
○ Different methods for connecting alumni and their possible
mentees, such as video call mentorship sessions, and text chat.
○ Functionality to allow alumni to post job vacancies and referral
posts, giving students the option to apply for them.
● Expected Requirements
○ Login interface with two-factor authentication, role-based access
control, session management, and auto time-out
○ Centralised database of alumni and other users, with efficient
fetching
● Exciting Requirements
○ A startup incubation module with features like startup profiles,
networking, and creation of a fund to support startups.
○ An event management module to handle event-creation, crowd-
handling, notifications related to events; hosted both by alumni and
students

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 3
 IEEE Standard For SRS Template
The final product of the requirement phase is the document called Software
Requirements Specifications (SRS). Given below is the IEEE standard template
for creating the formal SRS document.

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 4
 Use Case Diagram
The following Use Case Diagram demonstrates the actors (Admin, Alumni,
Student) interacting with the various modules of the software. It highlights the
different access levels of each type of user, as a user of a specific type can only
access some specific modules of the software. Each module serves distinct user
needs and is interconnected to provide a cohesive user experience.

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 5
Actors:

● Alumni: Former students who use the portal to connect, update profiles,
attend events, mentor students, and share job opportunities.
● Student: Current students who can register, search for mentors, apply for
jobs, attend events, and connect with alumni.
● Admin: Portal administrator responsible for managing user access,
approving registrations, and overseeing events and other functionalities.

Use Cases:

● Fund Allocation: This use case handles the transfer of endowed funds to
provide incubations for various startups. This module is only accessible
by the Admin level user.
● Create/Delete Profile: This use case handles the creation and deletion of
user profiles. It is also only accessible by the Admin level user.
● Login/Register: This use case is responsible for gaining access to one’s
account and to send a registration request. It is accessible by all levels of
users.
● Search Alumni: This module can be used to search for the Alumni level
users, by the Student level users.
● Announce/Register for events: This is used to post about any upcoming
event or to register for an upcoming/ongoing event. It is accessible by
both the Student and Admin level users.
● Vacancies/Referral for Jobs: It is used by the Alumni to post for any
vacancies and by the Student to apply for a referral from an Alumni
● Mentor Students: This use case is for the Alumni level user to choose
from a pool of Students and provide mentorship to them
● Networking for startup incubation: This is used by both the Alumni
level user and Student level user to network with one other and exchange
information about the funding and the startup ideas.

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 6
 Use Case Template
1 Create / Delete Profile

1.1 Brief Description

This use case allows the actor with the role “Admin” to maintain profile
information. This includes adding, changing and deleting profile information
from the system.

1.2 Actors
The following actor(s) interact and participate in this use case:
Admin
Alumni
Student

1.3 Flow of Events

1.3.1 Basic Flow

This use case starts when the Admin wishes to add, change, and/or delete profile
information from the system.
1. The system requests that the Admin specify the function he/she would
like to perform (either Add a Profile, Update a Profile, or Delete a
Profile).
2. Once the Admin provides the requested information, one of the sub-flows
is executed.
● If the Admin has selected “Add a Profile”, the Add a Profile sub-
flow is executed.
● If the Admin has selected “Update a Profile”, the Update a Profile
sub-flow is executed.
● If the Admin has selected “Delete a Profile”, the Delete a Profile
sub-flow is executed.

1.3.1.1 Add a Profile

1. The system requests that the Admin enter the profile information. This
includes:

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 7
 (a) Name
(b) Official Mail-ID
(c) Year of Admission
2. Once the Admin provides the requested information, the profile is added
to the system and an appropriate message is displayed.

1.3.1.2 Update a Profile

1. The system requests that the Admin enters the Official Mail-ID of the
user.
2. The Admin enters the Official Mail-ID. The system retrieves and displays
the profile information.
3. The Admin makes the desired changes to the profile information. This
includes any of the information specified in the Add a Profile sub-flow.
4. Once the Admin updates the necessary information, the system updates
the profile record with the updated information.

1.3.1.3 Delete a Profile

1. The system requests that the Admin enters the Official Mail-ID of the
user.
2. The Admin enters the Official Mail-ID. The system retrieves and displays
the profile information.
3. The system prompts the Admin to confirm the deletion of the profile.
4. The Admin confirms the deletion.
5. The system deletes the profile record.

2.3.2 Alternative Flows

2.3.2.1 User Not Found

If in the Update a Profile or Delete a Profile sub-flows, a profile with the
specified Official Mail-ID does not exist, the system displays an error message.
The Admin can then enter a different Official Mail-ID or cancel the operation,
at which point the use case ends.

2.3.2.2 Update Cancelled

If in the Update a Profile sub-flow, the Admin decides not to update the profile
information, the update is cancelled and the Basic Flow is restarted at the
beginning.

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 8
2.3.2.3 Delete Cancelled
If in the Delete a Profile sub-flow, the Admin decides not to delete the profile
information, the delete is cancelled and the Basic Flow is restarted at the
beginning.

2.4 Special Requirements

None

2.5 Pre-Conditions
The Admin must be logged onto the system before this use case begins.

2.6 Post Conditions

If the use case was successful, the profile information is added, updated, or
deleted from the system. Otherwise, the system state is unchanged.

2.7 External Points

None

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 9
 Context Diagram (Level 0 DFD)
This is a Level 0 Data Flow Diagram (DFD) for an Alumni Portal Management
System, depicting the overall interactions between external entities and the
system.

● Admin:
○ The Admin is responsible for managing profiles, overseeing fund
allocation, and updating fund allocation details within the system.
○ The Admin entity provides "Fund Allocation Details" and "Profile
Management" information to the Alumni Portal Management
System.

● Student:
○ The Student entity interacts with the system by providing "Student
Details," uploading their "CV," sharing "Startup Details," and
viewing "Event Details."

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 10
 ○ The system provides students with "Account Details," "Event
Details," and other relevant information.

● Alumni:
○ Alumni are involved with the system by sharing "Employment
Details," managing contributions to the "Endowment Fund," and
posting or viewing "Job Vacancies."
○ Alumni can also access "Event Details" through the system to stay
updated on alumni-related events.
○ The system shares details about accounts, events, jobs, and funds
with alumni.

● Alumni Portal Management System:

○ This central system manages data and interactions between
students, alumni, and the admin.
○ The system processes various inputs like fund allocation, event
details, employment details, and student profiles to generate
corresponding outputs.
○ It serves as a hub for managing account information, job details,
event updates, and fund records for students and alumni.

Overall, the Level 0 DFD illustrates the fundamental functions and data flows
within the Alumni Portal Management System, showing the roles of different
entities in providing and receiving information.

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 11
 Level - 1 Data Flow Diagram
This level 1 Data Flow Diagram (DFD) represents a system that manages
different interactions and processes among students, alumni, and an admin within
a university.

Here’s a breakdown of the components and flows in the DFD:

● Login: Users (Student, Alumni, Admin) begin by logging into the system,
providing their User ID, Password, and Role, which then grants them
access to various functionalities based on their roles.
● Profile Management:
○ Admin can enter user information into the system.

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 12
 ○ Users can manage and update their profile details, which is stored
and managed in the Profile Management section.
● Student Activities:
○ Upload CV: Students can upload their CV to the system.
○ Seek Mentorship: Students can request mentorship, which facilitates
connections with mentors.
○ Register/Attend Events: Students are able to register for or attend
events managed by the Event Management section.
○ Startup Incubation: Students can enter startup details to request
incubation support, and if approved, funds can be allocated to
support the startup.
● Alumni Activities:
○ Endow Fund: Alumni have the option to endow funds to support
various initiatives, such as startup incubation.
○ Post Job Vacancies/Referrals: Alumni can post job vacancies or
provide referrals, which then become part of the Employment
Opportunities available to students.
○ Register/Attend Events: Alumni are able to register for or attend
events managed by the Event Management section.
○ Provide Mentorship: Alumni can offer mentorship to students,
strengthening alumni-student relationships.
● Employment Opportunities: A central component where employment
details, job vacancies, and referrals are stored and managed. These
opportunities are accessible to students for career support.

● Mentor-Mentee Connect: A function allowing mentors to connect with

students, providing guidance and support.
● Event Management: Users can register and attend various events. Event
Management maintains event details and handles registration.
● Fund Allocation and Management: The system manages funds, from
receiving contributions from alumni to allocating them for approved
startup projects.

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 13
 Entity Relation Diagram
This is an Entity-Relationship Diagram (ERD) for an Alumni Portal
Management System, detailing the relationships between key entities within the
system.

● Student:
○ Attributes: Name, Year of Admission, Branch.
○ Relationships:
■ Applies to Job Vacancies/Referrals, connecting students
with potential job opportunities posted on the portal.
■ Requests incubation fund for startup.
■ Registers for events, thereby helping with networking and
building relationships with alumni.

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 14
 ● Alumni:
○ Attributes: Name, Year of Admission, Branch, Job/Business.
○ Relationships:
■ Posts Job Vacancies/Referrals in the system, providing
students with employment or internship opportunities.
■ Can Donate to the Incubation Fund, supporting new startups
or projects within the community.
■ Registers for events, thereby helping with networking and
building relationships with students and other alumni.

● Admin:
○ Attributes: Name.
○ Relationships:
■ Manages Profile to keep administrative information
updated.
■ Manage Donations to the Incubation Fund for funding
student projects or initiatives.

● Job Vacancies/Referrals:
○ Attributes: Job Description, Role, Company.
○ Relationships:
■ Posted by Alumni and Applied for by Students.
■ Serves as a medium to connect alumni with students looking
for career opportunities.

● Events:
○ Attributes: Date, Time, Venue.
○ Relationships:
■ Registered for by Students and Alumni, available for both to
attend, participate or organise.
■ Represents networking, informational, or recruiting events
within the alumni network.

● Incubation Fund:

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 15
 ○ Attribute: Balance.
○ Relationships:
■ Receives Endowment from Alumni to support
entrepreneurial ventures or initiatives proposed by students.
■ Allocation and Management of Funds done by Admin
■ Provides financial assistance to student startups and
innovative projects, strengthening alumni-student relations.

In summary, this ERD shows how different entities like students, alumni, and
admins interact within the Alumni Portal Management System, sharing
resources, information, and opportunities to foster a collaborative network.

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 16
 IEEE Standard For SDD Template
The final product of the design phase is the document called Software Design
Description (SDD). Given below is a standard template for creating the formal
SDD document.

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 17
 Class Diagram
This is a Class Diagram for an Alumni Portal Management System, illustrating
the primary classes (entities) within the system, their attributes, and their
functions (methods). Each class represents a core component of the system with
specific data fields and operations.

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 18
Classes and Descriptions

● Student:
○ Attributes:
■ Name: Student's name.
■ Year of Admission: Year the student enrolled.
■ Branch: Department or field of study.
■ College Mail-ID and Personal Mail-ID: Contact details.
○ Methods:
■ Login(): Allows the student to log in.
■ Register for Event(): Registers the student for an event.
■ Upload CV(): Uploads the student's resume.
■ Pitch a Startup Idea(): Submits a startup idea.
■ Request for Funds(): Requests funding for a startup.
■ Apply for Jobs(): Submits applications for job openings.
■ Gain Mentorship(): Connects the student with mentors.

● Admin:
○ Attributes:
■ Name: Name of the admin.
■ Official Mail-ID: Contact email for the admin.
○ Methods:
■ Add Profile(): Adds a new profile to the system.
■ Update Profile(): Updates the profile details of existing
users.
■ Delete Profile(): Deletes a user profile from the system.
■ Allocate Funds(): Allocates funds to approved startup
requests.

● Alumni:
○ Attributes:
■ Name: Alumni name.
■ Year of Admission: Alumni's year of entry.
■ Branch: Alumni's field of study.
■ Official Mail-ID and Personal Mail-ID: Contact information.

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 19
 ○ Methods:
■ Login(): Allows alumni to log in.
■ Register for Event(): Registers alumni for events.
■ Post Job Openings/Referrals(): Posts job vacancies or
referrals.
■ Endow Funds(): Donates or endows funds for students or
startups.
■ Provide Mentorship(): Mentors students in specific fields.

● Startup:
○ Attributes:
■ Startup Idea: Description or concept of the startup idea.
■ Funds Required: The amount of funding needed for the
startup.
○ Methods:
■ Add Startup Idea(): Allows adding a new startup idea to the
system.
■ Update Startup Idea(): Updates existing startup information.
■ Delete Startup Idea(): Removes a startup idea from the
system.
■ Request for Funds(): Submits a funding request for the
startup.

● Funds:
○ Attributes:
■ Amount: Total amount available in the fund.
■ Request List: A list of funding requests submitted by
students or startups.
○ Methods:
■ Deposit(): Adds money to the fund.
■ Withdraw(): Withdraws money from the fund based on
requests.

● Events:
○ Attributes:
■ Date, Time, Venue: Details of when and where the event
takes place.

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 20
 ■ Event Title: Title of the event.
■ Theme of Event: Theme or purpose of the event.
○ Methods:
■ Register for Event(): Allows users to register for the event.
■ Add Event(): Adds a new event to the system.
■ Delete Event(): Deletes an event from the system.
■ Update Event(): Updates event information.

● Jobs:
○ Attributes:
■ Company: Name of the hiring company.
■ Role: Job title or position.
■ Job Description: Description of the job responsibilities and
requirements.
○ Methods:
■ Apply for Job(): Allows students to apply for job postings.
■ Add Job(): Adds a new job opening to the system.
■ Update Job(): Updates information about a job posting.
■ Delete Job(): Removes a job posting from the system.

Overview

This class diagram presents the main entities in the Alumni Portal Management
System, showing how each class holds specific data and performs related
operations. The Admin oversees user profiles and fund allocation, while
Students and Alumni engage in events, job applications, and mentorships. The
Events and Jobs classes manage event and job data, providing a structure for
interaction and information sharing within the system. The Funds and Startup
classes enable financial support and entrepreneurial activities, strengthening the
system's resource and community network.

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 21
 Output And Code

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 22
Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 23
Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 24
Code of Routes of the Project Website
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { RouterProvider, Route, createBrowserRouter,
createRoutesFromElements } from 'react-router-dom'
import './index.css'
import App from './App.jsx'
import Layout from './Layout.jsx'
import Home from './components/Home.jsx'
import Login from './components/Login.jsx'
import Register from './components/Register.jsx'
import Events from './components/Events.jsx'
import AlumniConnect from './components/AlumniConnect.jsx'
import Incubation from './components/Incubation.jsx'

const router = createBrowserRouter(

createRoutesFromElements(
<Route path='/' element={<Layout />}>
<Route path='' element={<Home />} />
<Route path='login' element={<Login />} />
<Route path='register' element={<Register />} />
<Route path='events' element={<Events />} />
<Route path='alumni-connect' element={<AlumniConnect />} />
<Route path='incubation' element={<Incubation />} />
</Route>

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 25
 )
)

createRoot(document.getElementById('root')).render(
<StrictMode>
<RouterProvider router={router} />
</StrictMode>,
)

Code of Layout of Page

import React from "react";
import Header from "./components/Header";
import Footer from "./components/Footer";
import { Outlet } from "react-router-dom";

function Layout(){
return (
<>
<Header />
<Outlet />
<Footer />
</>
)
}

export default Layout;

Code of Header
import React from "react";
import { Link, NavLink } from "react-router-dom";

export default function Header() {

return (
<header className="shadow sticky z-50 top-0">
<nav className="bg-white border-gray-200 px-4 lg:px-6 py-2.5">
<div className="flex flex-wrap justify-between items-center
mx-auto max-w-screen-xl">

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 26
 <div className="flex items-center">
<Link to="/" className="flex items-center">
<img

src="https://upload.wikimedia.org/wikipedia/en/b/b5/DTU%2C_Delhi_off
icial_logo.png"
className="mr-3 h-12"
alt="Logo"
/>
</Link>
<Link to="/" className="flex items-center">
<div
className="text-3xl"
style={{ fontFamily: "'Times New Roman', Times,
serif" }}
>
DCE DTU |
</div>
<div
className="text-5xl"
style={{ fontFamily: "'Corinthia', serif" }}
>
alumni
</div>
</Link>
</div>
<div className="flex items-center lg:order-2">
<Link
to="login"
className="text-gray-800 hover:bg-gray-50 focus:ring-4
focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2
lg:py-2.5 mr-2 focus:outline-none"
>
Log in
</Link>
<Link
to="register"
className="text-white bg-orange-700 hover:bg-orange-
800 focus:ring-4 focus:ring-orange-300 font-medium rounded-lg text-
sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 focus:outline-none"

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 27
 >
Register
</Link>
</div>
<div
className="hidden justify-between items-center w-full
lg:flex lg:w-auto lg:order-1"
id="mobile-menu-2"
>
<ul className="flex flex-col mt-4 font-medium lg:flex-
row lg:space-x-8 lg:mt-0">
<li>
<NavLink
to="/"
className={({ isActive }) =>
`block py-2 pr-4 pl-3 duration-200 ${
isActive ? "text-orange-700" : "text-gray-700"
} border-b border-gray-100 hover:bg-gray-50
lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
}
>
Home
</NavLink>
</li>
<li>
<NavLink
to="/events"
className={({ isActive }) =>
`block py-2 pr-4 pl-3 duration-200 ${
isActive ? "text-orange-700" : "text-gray-700"
} border-b border-gray-100 hover:bg-gray-50
lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
}
>
Events
</NavLink>
</li>
<li>
<NavLink
to="/alumni-connect"

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 28
 className={({ isActive }) =>
`block py-2 pr-4 pl-3 duration-200 ${
isActive ? "text-orange-700" : "text-gray-700"
} border-b border-gray-100 hover:bg-gray-50
lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
}
>
Alumni Connect
</NavLink>
</li>
<li>
<NavLink
to="/incubation"
className={({ isActive }) =>
`block py-2 pr-4 pl-3 duration-200 ${
isActive ? "text-orange-700" : "text-gray-700"
} border-b border-gray-100 hover:bg-gray-50
lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
}
>
Incubation
</NavLink>
</li>
</ul>
</div>
</div>
</nav>
</header>
);
}

Code of Footer
import React from "react";
import { Link, NavLink } from "react-router-dom";

export default function Footer() {

return (
<>
<footer className="">

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 29
 <div className="relative">
<img
className="w-full h-48"
src="src/assets/Footer.jpg"
alt="DTU Entrance"
/>
<div className="absolute bg-black bg-opacity-65 inset-0
flex items-end justify-start text-white px-6">
<div className="flex items-center">
<div
className="text-5xl"
style={{ fontFamily: "'Times New Roman', Times,
serif" }}
>
DCE DTU |
</div>
<div
className="text-7xl"
style={{ fontFamily: "'Corinthia', serif" }}
>
alumni
</div>
</div>
</div>
</div>
<div className="mx-auto w-full p-4 py-6 bg-black text-white
lg:py-8">
<div className="md:flex md:justify-between">
<div className="flex flex-col justify-between ">
<Link
to="https://maps.app.goo.gl/C4c1UNbLqXN7Xxkg7"
className="flex items-left flex-col px-4 pt-5
hover:underline"
>
<div className="font-bold">Alumni Association</div>
<div className="max-w-58 ">
Training & Placement Block
<br />
Delhi Technological University
<br />

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 30
 Bawana Road, Delhi - 110042
<br />
</div>
</Link>
<div className="flex justify-left space-x-4 px-4 mt-
4">
<a

href="https://www.facebook.com/groups/www.dtudcefraternity.org/"
className="text-gray-300 hover:text-blue-600
transition-colors"
aria-label="Facebook Page"
>
<i className="fab fa-facebook-f fa-lg"></i>
</a>
<a
href="https://www.linkedin.com/groups/2966751/"
className="text-gray-300 hover:text-blue-700
transition-colors"
aria-label="LinkedIn Page"
>
<i className="fab fa-linkedin-in fa-lg"></i>
</a>
<a
href="https://twitter.com/DTUDCEForum"
className="text-gray-300 hover:text-blue-400
transition-colors"
aria-label="Twitter Page"
>
<i className="fab fa-x-twitter fa-lg"></i>
</a>
<a
href="https://www.instagram.com/dtu.delhi/"
className="text-gray-300 hover:text-pink-500
transition-colors"
aria-label="Instagram Page"
>
<i className="fab fa-instagram fa-lg"></i>
</a>
<a

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 31
 href="https://www.youtube.com/@dtustudio"
className="text-gray-300 hover:text-red-600
transition-colors"
aria-label="YouTube Channel"
>
<i className="fab fa-youtube fa-lg"></i>
</a>
</div>
</div>
<div className="grid grid-cols-2 gap-8">
<div>
<h2 className="mb-6 text-sm font-semibold text-gray-
202 uppercase">
Resources
</h2>
<ul className="text-gray-400 font-medium">
<li className="mb-4">
<Link to="/" className="hover:underline">
Home
</Link>
</li>
<li className="mb-4">
<Link to="/events" className="hover:underline">
Events
</Link>
</li>
<li className="mb-4">
<Link to="/alumni-connect"
className="hover:underline">
Alumni Connect
</Link>
</li>
<li className="mb-4">
<Link to="/incubation"
className="hover:underline">
Incubation
</Link>
</li>
</ul>
</div>

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 32
 <div>
<h2 className="mb-6 text-sm font-semibold text-gray-
200 uppercase">
Legal
</h2>
<ul className="text-gray-400 font-medium">
<li className="mb-4">
<Link to="#" className="hover:underline">
Privacy Policy
</Link>
</li>
<li>
<Link to="#" className="hover:underline">
Terms & Conditions
</Link>
</li>
</ul>
</div>
</div>
</div>
<hr className="my-6 mb-3 border-gray-200 sm:mx-auto " />
<div className="sm:flex sm:items-center sm:justify-
between">
<span className="text-sm text-gray-500 sm:text-center">
©
<a href="https://github.com/wolgwang1729"
className="hover:underline">
wolgwang
</a>
. All Rights Reserved.
</span>
<div className="flex mt-4 space-x-5 sm:justify-center
sm:mt-0">
<Link to="#" className="text-gray-500 hover:text-gray-
900">
<svg
className="w-4 h-4"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 33
 viewBox="0 0 8 19"
>
<path
fillRule="evenodd"
d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142
4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592
3h.543Z"
clipRule="evenodd"
/>
</svg>
<span className="sr-only">Facebook page</span>
</Link>
<Link to="#" className="text-gray-500">
<svg
className="w-4 h-4"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 21 16"
>
<path d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3
12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585
0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0
.182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-
1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664
11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-
1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595
17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-
2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93
1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0
0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8
2.045Z" />
</svg>
<span className="sr-only">Discord community</span>
</Link>
<Link to="#" className="text-gray-500">
<svg
className="w-4 h-4"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 34
 fill="currentColor"
viewBox="0 0 20 17"
>
<path
fillRule="evenodd"
d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074
4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0
13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705
0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-
.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108
4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0
6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143
8.143 0 0 0 20 1.892Z"
clipRule="evenodd"
/>
</svg>
<span className="sr-only">Twitter page</span>
</Link>
<Link to="#" className="text-gray-500">
<svg
className="w-4 h-4"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M10 .333A9.911 9.911 0 0 0 6.866
19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-
3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-
.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0
2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-
4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266
2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-
1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-
2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012
2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
clipRule="evenodd"
/>

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 35
 </svg>
<span className="sr-only">GitHub account</span>
</Link>
</div>
</div>
</div>
</footer>
</>
);
}

Code of Home
import React from "react";
import { Link } from "react-router-dom";

export default function Home() {

return (
<>
<div className="relative mx-auto max-w-full">
<img
className="w-full h-auto"
src="src/assets/Entrance.jpg"
alt="DTU Entrance"
/>
<div className="absolute inset-0 flex flex-col
items-center justify-between text-white bg-black bg-opacity-50
pt-5 pb-56">
<h1 className="font-serif text-9xl font-
bold mb-4">Welcome Home</h1>
<p className="font-serif text-3xl text-
center max-w-5xl">
Step into the virtual home of DTU’s
vibrant community and DCE legacy —a place where innovation and
excellence extend beyond the campus. Reconnect with
classmates, explore opportunities, and stay engaged with the
latest research and ideas from Delhi Technological University.
</p>

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 36
 </div>
</div>
</>
);
}

Code of Events
import React from "react";
import { Link } from "react-router-dom";
import SlideShow from "./SlideShow";

export default function Events() {

return (
<>
<div className="inset-0 flex flex-col items-center justify-
center text-white bg-black py-5 opacity-80 rounded-lg mx-16 mt-4">
<h1 className="font-serif text-3xl font-bold mb-
4">Events</h1>
<p className="font-serif text-xl text-center max-w-5xl">
Stay updated with the latest events and activities
happening at DTU. Join us and be a part of our vibrant community.
</p>
<div className="flex items-center lg:order-2 mt-5 gap-6">
<Link
to="/login"
className="text-white bg-orange-700 hover:bg-orange-800
focus:ring-4 focus:ring-orange-300 font-medium rounded-lg text-lg
px-4 lg:px-5 py-2 lg:py-2.5 mr-2 focus:outline-none"
>
Attend an Event
</Link>
<Link
to="/login"
className="text-white bg-orange-700 hover:bg-orange-800
focus:ring-4 focus:ring-orange-300 font-medium rounded-lg text-lg
px-4 lg:px-5 py-2 lg:py-2.5 mr-2 focus:outline-none"
>
Organise an Event

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 37
 </Link>
</div>
</div>

<div className="mx-auto w-full p-4 py-6 bg-white text-black

lg:py-8">
<div className="md:flex md:justify-between flex-col">
<div className="flex flex-col px-8 my-8">
<h2 className="font-serif mb-6 text-3xl text-orange-
800">International conference and start up expo-2024</h2>
<div className="text-gray-600 flex flex-col gap-4 px-8">
<div>The International Conference and Startup Expo-24,
hosted by University School of Management and Entrepreneurship,
Delhi Technological University, was a remarkable two-day event (21-
22 February 2024) themed Innovation and Entrepreneurship. The event
commenced with a Grand Opening Ceremony, followed by Roundtable
Congress, Startup Pitch Sessions, Track Presentations, Founder-
Faculty Interaction Session, Panel Discussions, and Exhibition
Stalls.</div>

<div>The event was a huge success with the

participation of startups, corporate executives, and academicians,
engaging 80 researchers, 15</div>

<div>During the closing ceremony, certificates were

awarded to Research Paper presenters and the Organizing Team. Prof.
Amit Mookerjee , Director east campus , expressed heartfelt thanks
to all involved. Special thanks were extended to our alumni
association DCE to Mr. Sanjay Diwan, Mr. Akhil Choudhary, and Mr.
Arun Aggarwal, along with Mr. Arun Gupta from the DCE DTU Alumni
Association for their generous support.</div>

</div>
<div className="flex flex-wrap px-12 py-7 justify-center
items-center gap-3">
<div className="h-54 w-96 overflow-hidden rounded-lg
shadow-lg">
<img className="h-full w-full object-cover transform
transition duration-500 hover:scale-105"
src="src/assets/Event1/Image1.jpeg" alt="Event Image 1" />

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 38
 </div>
<div className="h-54 w-96 overflow-hidden rounded-lg
shadow-lg">
<img className="h-full w-full object-cover transform
transition duration-500 hover:scale-105"
src="src/assets/Event1/Image2.jpeg" alt="Event Image 2" />
</div>
<div className="h-54 w-96 overflow-hidden rounded-lg
shadow-lg">
<img className="h-full w-full object-cover transform
transition duration-500 hover:scale-105"
src="src/assets/Event1/Image3.jpeg" alt="Event Image 3" />
</div>
</div>
</div>
<div className="flex flex-col px-8 my-8">
<h2 className="font-serif mb-6 text-3xl text-orange-
800">Annual Meet 2024</h2>
<div className="text-gray-600 flex flex-col gap-4 px-8">
<div>Annual Alumni Meet-2024 was held on 3rd February
2024 at Air Force Auditorium, Subroto Park New Delhi.Vice Chancellor
of Delhi Technological University, Prof. Prateek Sharma who is an
alumnus himself from DCE 1989 batch was Geust of Honour for the
Alumni Meet.</div>

<div>As per tradition, distinguished Faculty members

of DCE/DTU were honoured on stage. Selected alumni were recognised
for their achievements by facilitating them with Distinguished
Alumni, Trail Blazer and Young Achiever Awards. Meritorious students
of DTU were honored with certificates & medals.</div>

<div>Alumni of jubilee batches namely Diamond Jubilee

(1963 &1964), Golden Jubilee (1973, 1974) and Silver Jubilee (1998 &
1999) were felicitated on stage with mementoes. More than 1200
alumni participated in the alumni meet this year and enjoyed net-
working dinner in sprawling lush green beautifully decorated lawns,
with fun, beverages, delicious food and groups' photo-shoots.</div>

</div>

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 39
 <div className="flex flex-wrap px-12 py-7 justify-center
items-center gap-3">
<div className="h-54 w-96 overflow-hidden rounded-lg
shadow-lg">
<img className="h-full w-full object-cover transform
transition duration-500 hover:scale-105"
src="src/assets/Event2/Image1.jpeg" alt="Event Image 1" />
</div>
<div className="h-54 w-96 overflow-hidden rounded-lg
shadow-lg">
<img className="h-full w-full object-cover transform
transition duration-500 hover:scale-105"
src="src/assets/Event2/Image2.jpeg" alt="Event Image 2" />
</div>
<div className="h-54 w-96 overflow-hidden rounded-lg
shadow-lg">
<img className="h-full w-full object-cover transform
transition duration-500 hover:scale-105"
src="src/assets/Event2/Image3.jpeg" alt="Event Image 3" />
</div>
</div>
</div>
</div>
</div>
</>
);
}

Code of Alumni Connect

import React from "react";
import { Link } from "react-router-dom";

const alumniData = [
{
name: "Vinod Dham",
batch: "1971",
discipline: "Electrical Engineering",
notability: "Engineer and venture capitalist known as the
'Father of the Pentium' for his work in the Microprocessor Products
group at Intel.",

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 40
 about: "An influential figure in the tech industry with a legacy
in microprocessor development.",
image:
"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Vinod_Dha
m_%28cropped%29.jpg/248px-Vinod_Dham_%28cropped%29.jpg",
socials: {
linkedin: "https://linkedin.com/in/vinoddham",
twitter: "https://twitter.com/vinoddham",
},
},
{
name: "Rohit Chadda",
batch: "2005",
discipline: "Computer Engineering",
notability: "Co-founder of Foodpanda India.",
about: "Passionate entrepreneur with a knack for building
successful startups in the food delivery sector.",
image:
"https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Rohit_Cha
dda.jpg/330px-Rohit_Chadda.jpg",
socials: {
linkedin: "https://linkedin.com/in/rohitchadda",
twitter: "https://twitter.com/rohitchadda",
},
},
{
name: "Vijay Shekhar Sharma",
batch: "1998",
discipline: "Electronics and Communication Engineering",
notability: "Founder of Paytm.",
about: "Visionary leader driving the digital payments revolution
in India.",
image:
"https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Vijay_She
khar_Sharma_%282019%29.jpg/330px-
Vijay_Shekhar_Sharma_%282019%29.jpg",
socials: {
linkedin: "https://linkedin.com/in/vijayshekharsharma",
twitter: "https://twitter.com/vijayshksharma",
},

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 41
 },
{
name: "Sanjay Gupta",
batch: "1981",
discipline: "Mechanical Engineering",
notability: "Country Manager of Google India.",
about: "Experienced professional leading Google's initiatives in
the Indian market.",
image:
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Sanjay_Gu
pta_receives_Influencer_award.jpg/330px-
Sanjay_Gupta_receives_Influencer_award.jpg",
socials: {
linkedin: "https://linkedin.com/in/sanjaygupta",
twitter: "https://twitter.com/sanjaygupta",
},
},
{
name: "Surya Kant",
batch: "1976",
discipline: "Electrical Engineering",
notability: "President of North America, UK, and Europe
operations of Tata Consultancy Services.",
about: "Strategic leader overseeing TCS's global operations with
a focus on growth and innovation.",
image:
"https://media.licdn.com/dms/image/v2/D5603AQFgXHFKlvSb1Q/profile-
displayphoto-shrink_400_400/profile-displayphoto-
shrink_400_400/0/1713903610279?e=2147483647&v=beta&t=iN8H-
727PFucv8kPr9L-OJ2I7kGlwtXkqGWctPBWqlU",
socials: {
linkedin: "https://linkedin.com/in/suryakant",
twitter: "https://twitter.com/suryakant",
},
},
{
name: "Manish Khera",
batch: "1991",
discipline: "Electrical Engineering",
notability: "Former CEO of Airtel Payments Bank.",

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 42
 about: "Expert in financial services and digital banking
solutions.",
image:
"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Manish_Kh
era_image.jpg/330px-Manish_Khera_image.jpg",
socials: {
linkedin: "https://linkedin.com/in/manishkhera",
twitter: "https://twitter.com/manishkhera",
},
},
];

export default function AlumniConnect() {

return (
<div className="min-h-screen bg-gray-100 text-gray-900 mb-6">
<div className="inset-0 flex flex-col items-center justify-
center text-white bg-black py-5 opacity-80 rounded-lg mb-8 mx-16 mt-
4">
<h1 className="font-serif text-3xl font-bold mb-4">Alumni
Connect</h1>
<p className="font-serif text-xl text-center max-w-5xl">
Connect with our esteemed alumni from various batches and
industries.
</p>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid gap-8 grid-cols-1 sm:grid-cols-2
lg:grid-cols-3">
{alumniData.map((alumnus, index) => (
<div
key={index}
className="bg-white rounded-lg shadow overflow-hidden
flex flex-col hover:shadow-lg transition-shadow duration-300
hover:cursor-pointer"
>
<img src={alumnus.image} alt={alumnus.name}
className="w-full h-80 object-cover" />
<div className="p-6 flex flex-col flex-grow">
<h2 className="text-xl font-
semibold">{alumnus.name}</h2>

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 43
 <p className="text-gray-600">{alumnus.batch} -
{alumnus.discipline}</p>
<p className="mt-2">{alumnus.about}</p>
<div className="mt-auto flex space-x-2">
{alumnus.socials.linkedin !== "#" && (
<a
href={alumnus.socials.linkedin}
target="_blank"
rel="noopener noreferrer"
className="text-gray-500 hover:text-gray-700"
>
<i className="fab fa-linkedin-in"></i>
</a>
)}
{alumnus.socials.twitter !== "#" && (
<a
href={alumnus.socials.twitter}
target="_blank"
rel="noopener noreferrer"
className="text-gray-500 hover:text-gray-700"
>
<i className="fab fa-twitter"></i>
</a>
)}
{alumnus.socials.instagram !== "#" && (
<a
href={alumnus.socials.instagram}
target="_blank"
rel="noopener noreferrer"
className="text-gray-500 hover:text-gray-700"
>
<i className="fab fa-instagram"></i>
</a>
)}
</div>
</div>
</div>
))}
</div>
</div>

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 44
 </div>
);
}

Code of Incubation:
import React, { useState } from "react";
import { Link } from "react-router-dom";

export default function Incubation() {

const initialPosts = [
{
id: 1,
title: "Swiggy Kitchen Innovations",
founder: "Aditi Sharma",
summary: `
Swiggy Kitchen Innovations aims to revolutionize the cloud
kitchen industry in India by integrating cutting-edge AI
technologies
into the operational and logistical aspects of food
delivery. The company focuses on improving the efficiency of cloud
kitchen
operations, which are becoming increasingly popular across
urban and semi-urban areas due to the growing demand for food
delivery services.

One of the core offerings of Swiggy Kitchen Innovations is

its AI-powered inventory management system. This technology ensures
that ingredients are ordered based on real-time demand,
minimizing waste and ensuring that stock levels are optimized. The
system
also uses predictive analytics to forecast demand patterns
and adjust inventory in real-time, which significantly reduces food
wastage.

Additionally, the startup offers real-time order

optimization, which routes delivery drivers more efficiently based
on live traffic

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 45
 data and customer locations. By implementing machine
learning models, Swiggy Kitchen Innovations is able to cut delivery
times,
reduce fuel consumption, and lower delivery costs while
providing customers with faster and more reliable service.

The target market for Swiggy Kitchen Innovations includes

tier-2 and tier-3 cities, where demand for cloud kitchens is growing
rapidly. The startup’s goal is to tap into the under-served
markets, providing affordable, efficient, and sustainable food
delivery
services in smaller towns across India, where traditional
dine-in restaurants may not be as viable.
`,
upvotes: 0,
downvotes: 0,
comments: [],
},
{
id: 2,
title: "EduXpress",
founder: "Rajesh Kumar",
summary: `
EduXpress is a revolutionary online learning platform aimed
at upskilling working professionals in smaller towns across India.
The platform offers affordable, flexible, and industry-
relevant courses in areas such as IT, digital marketing, data
science, and
entrepreneurship, catering to the growing demand for
practical knowledge and technical expertise among India's workforce.

The primary goal of EduXpress is to bridge the skills gap by

providing affordable education to individuals who may not have
access
to expensive coaching institutes or universities. The
platform's courses are designed to be completed in short, digestible
modules
that can be easily integrated into a professional's busy
schedule.

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 46
 One of the standout features of EduXpress is its support for
regional languages. Many of India's professionals in smaller towns
or
rural areas have limited access to high-quality learning
resources in their local languages. By offering courses in Hindi,
Tamil,
Bengali, and other major regional languages, EduXpress
ensures that it reaches a wider audience and is more inclusive.

EduXpress also uses interactive learning techniques,

including live workshops, peer discussions, and AI-powered
mentoring, to create
an engaging and effective learning environment. The platform
allows users to upskill at their own pace while offering
certifications
that enhance employability and career advancement prospects.
`,
upvotes: 0,
downvotes: 0,
comments: [],
},
{
id: 3,
title: "MediCare Plus",
founder: "Priya Deshmukh",
summary: `
MediCare Plus is a health-tech startup that aims to make
healthcare accessible and affordable for people in rural areas of
India
through the power of telemedicine. The startup has developed
a mobile app that connects patients in remote areas with doctors and
specialists in urban centers, allowing them to receive
medical consultations without having to travel long distances.

The app is designed with the rural user in mind, providing a

simple and intuitive interface that can be used by individuals with
limited access to technology. The app supports video
consultations, voice calls, and text messaging, enabling patients to
seek medical

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 47
 advice from professionals across various specializations,
such as general medicine, pediatrics, gynecology, and mental health.

MediCare Plus also uses AI-driven algorithms to help with

diagnostics and treatment suggestions. The AI system analyzes
patient
symptoms and medical history to recommend potential
treatments or flag symptoms that require immediate attention. This
feature helps
ensure that users receive timely medical advice and
appropriate interventions, even if a doctor is not available for an
immediate consultation.

One of the primary objectives of MediCare Plus is to address

the shortage of healthcare professionals in rural India, where many
areas suffer from a lack of medical facilities and
expertise. By offering affordable and scalable telemedicine
services, MediCare
Plus is helping to bridge the healthcare gap and improve
health outcomes for underserved populations.
`,
upvotes: 0,
downvotes: 0,
comments: [],
},
{
id: 4,
title: "GreenKart",
founder: "Vivek Reddy",
summary: `
GreenKart is an innovative e-commerce platform that focuses
on delivering eco-friendly products across India. With the
increasing
awareness around environmental issues, GreenKart aims to
provide consumers with sustainable alternatives to traditional
products,
ranging from biodegradable packaging materials to organic
food and sustainable fashion.

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 48
 The platform curates a wide range of environmentally
friendly products from local manufacturers and artisans, promoting a
circular
economy that minimizes waste and promotes sustainable
production practices. GreenKart’s product offerings include reusable
household
items, organic beauty products, eco-friendly gadgets, and
green fashion, helping individuals and businesses reduce their
environmental
footprint.

The startup also emphasizes education and awareness,

offering resources and guides on sustainable living through its blog
and social
media channels. GreenKart encourages users to make more
responsible purchasing decisions, with an emphasis on products that
have
minimal impact on the planet.

By providing an online marketplace for eco-friendly

products, GreenKart is creating a solution to the growing demand for
sustainable
consumer goods in India. The platform not only targets
environmentally conscious urban dwellers but also aims to spread
sustainable
consumption habits in smaller cities and towns, where eco-
friendly options are often hard to come by.
`,
upvotes: 0,
downvotes: 0,
comments: [],
},
{
id: 5,
title: "ChaiBot",
founder: "Arjun Patel",
summary: `
ChaiBot is a unique AI-powered assistant designed
specifically for the chai vendor community in India. Chai vendors
across the country

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 49
 often face challenges related to inventory management, sales
tracking, and ordering supplies. ChaiBot addresses these issues by
offering
a voice-activated point-of-sale (POS) system that helps
vendors streamline their business operations without requiring
advanced technical
skills.

The ChaiBot system is powered by AI and designed to

understand and respond to voice commands in regional languages,
making it easy
for vendors to track daily sales, manage inventory levels,
and reorder supplies with simple voice commands. The system can also
generate
reports on sales performance, helping vendors optimize their
operations and make data-driven decisions.

In addition to inventory and sales management, ChaiBot also

helps vendors with customer engagement. The system can send
automated
reminders to loyal customers, manage delivery orders, and
even suggest promotions based on local preferences. By automating
these
tasks, ChaiBot allows vendors to focus on their core
business of making and serving tea while improving customer
satisfaction and
increasing sales.

ChaiBot is particularly beneficial for small-scale chai

vendors in India’s local markets, who may not have the resources or
expertise
to invest in traditional point-of-sale systems. The system’s
affordability and ease of use make it a perfect fit for India’s vast
chai vendor community, empowering them to modernize their
operations and increase efficiency.
`,
upvotes: 0,
downvotes: 0,
comments: [],
},

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 50
 ];

const formatSummary = (summary) => {

return summary
.trim()
.split(/(?:\r?\n){2,}/)
.filter(para => para.trim() !== '')
.map((para, index) => (
<p key={index} className="mb-2">
{para.replace(/(?:\r?\n)+/g, ' ')}
</p>
));
};

const [posts, setPosts] = useState(initialPosts);

const [commentInputs, setCommentInputs] = useState({});

const handleUpvote = (id) => {

setPosts(
posts.map((post) =>
post.id === id ? { ...post, upvotes: post.upvotes + 1 } :
post
)
);
};

const handleDownvote = (id) => {

setPosts(
posts.map((post) =>
post.id === id ? { ...post, downvotes: post.downvotes + 1 }
: post
)
);
};

const handleCommentChange = (id, text) => {

setCommentInputs({ ...commentInputs, [id]: text });
};

const handleAddComment = (id) => {

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 51
 const commentText = commentInputs[id];
if (commentText) {
setPosts(
posts.map((post) =>
post.id === id
? {
...post,
comments: [...post.comments, { text: commentText,
replies: [] }],
}
: post
)
);
setCommentInputs({ ...commentInputs, [id]: "" });
}
};

return (
<>
<div className="inset-0 flex flex-col items-center justify-
center text-white bg-black py-5 opacity-80 rounded-lg mb-8 mx-16 mt-
4">
<h1 className="font-serif text-3xl font-bold mb-4">Startup
Pitches</h1>
<p className="font-serif text-xl text-center max-w-5xl">
Check out the latest startup ideas and innovations from
our incubation program. Upvote your favorites and leave feedback for
the founders.
</p>
</div>
<div className="container mx-auto p-4 px-60">
{posts
.sort((a, b) => b.upvotes - a.upvotes)
.map((post) => (
<div
key={post.id}
className="bg-white rounded shadow p-4 mb-6
hover:shadow-lg transition-shadow"
>

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 52
 <h2 className="text-2xl font-bold mb-
2">{post.title}</h2>
<p className="text-gray-600 mb-4">Founder:
{post.founder}</p>
<div>{formatSummary(post.summary)}</div>
<div className="flex items-center mb-4">
<button
onClick={() => handleUpvote(post.id)}
className="mr-2 text-green-500"
>
<i className="fas fa-arrow-up"></i> Upvote
</button>
<span className="mr-4">{post.upvotes}</span>
<button
onClick={() => handleDownvote(post.id)}
className="mr-2 text-red-500"
>
<i className="fas fa-arrow-down"></i> Downvote
</button>
<span>{post.downvotes}</span>
</div>
<div className="border-t pt-4">
<h3 className="font-semibold mb-2">Comments</h3>
{post.comments.map((comment, index) => (
<div key={index} className="mb-2">
<p>{comment.text}</p>
</div>
))}
<textarea
className="w-full border rounded p-2 mb-2"
rows="2"
placeholder="Add a comment..."
value={commentInputs[post.id] || ""}
onChange={(e) =>
handleCommentChange(post.id, e.target.value)
}
></textarea>
<button
onClick={() => handleAddComment(post.id)}

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 53
 className="bg-orange-700 text-white px-4 py-2
rounded hover:bg-orange-800"
>
Comment
</button>
</div>
</div>
))}
</div>
</>
);
}

Code of Login
import React from "react";
import { Link } from "react-router-dom";

export default function Login() {

return (
<>
<div className="min-h-screen bg-gray-100 text-gray-900 flex
justify-center">
<div className="max-w-screen-xl m-0 sm:m-10 bg-white shadow
sm:rounded-lg flex justify-center flex-1">
<div className="flex rounded-lg ">
<img src="src\assets\Login.jpeg" alt="" />
</div>
<div className="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
<div className="flex items-center justify-center">
<div className="text-5xl" style={{ fontFamily: "'Times
New Roman', Times, serif" }}>
DCE DTU |
</div>
<div className="text-5xl" style={{ fontFamily:
"'Corinthia', serif" }}>
alumni
</div>
</div>
<div className="mt-12 flex flex-col items-center">

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 54
 <h1 className="text-2xl xl:text-3xl font-
extrabold">Log In</h1>
<div className="w-full flex-1 mt-8">
<div className="mx-auto max-w-xs">
<input
className="w-full px-8 py-4 rounded-lg font-
medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-
sm focus:outline-none focus:border-gray-400 focus:bg-white"
type="email" placeholder="Email" />
<input
className="w-full px-8 py-4 rounded-lg font-
medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-
sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
type="password" placeholder="Password" />
<button
className="mt-5 tracking-wide font-semibold bg-
orange-700 text-gray-100 w-full py-4 rounded-lg hover:bg-orange-800
transition-all duration-300 ease-in-out flex items-center justify-
center focus:shadow-outline focus:outline-none">
<svg className="w-6 h-6 -ml-2" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-
linejoin="round">
<path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4
4v2" />
<circle cx="8.5" cy="7" r="4" />
<path d="M20 8v6M23 11h-6" />
</svg>
<span className="ml-3">Log In</span>
</button>
<p className="mt-6 text-xs text-gray-600 text-
center">
I agree to abide by DTU's <span> </span>
<a href="#" className="border-b border-gray-500
border-dotted">
Terms of Service <span> </span>
</a>
and its <span> </span>
<a href="#" className="border-b border-gray-500
border-dotted">

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 55
 Privacy Policy
</a>
</p>
</div>

<div className="my-12 border-b text-center">

<div
className="leading-none px-2 inline-block text-
sm text-gray-600 tracking-wide font-medium bg-white transform
translate-y-1/2">
Or log in with Google or Github
</div>
</div>

<div className="flex flex-col items-center">

<button
className="w-full max-w-xs font-bold shadow-sm
rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center
justify-center transition-all duration-300 ease-in-out
focus:outline-none hover:shadow focus:shadow-sm focus:shadow-
outline">
<div className="bg-white p-2 rounded-full">
<svg className="w-4" viewBox="0 0 533.5
544.3">
<path
d="M533.5 278.4c0-18.5-1.5-37.1-4.7-
55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4
81.1-117.4 81.1-200.2z"
fill="#4285f4" />
<path
d="M272.1 544.3c73.4 0 135.3-24.1 180.4-
65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-
112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z"
fill="#34a853" />
<path
d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-
104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z"
fill="#fbbc04" />
<path

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 56
 d="M272.1 107.7c38.8-.6 76.3 14 104.4
40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9
150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z"
fill="#ea4335" />
</svg>
</div>
<span className="ml-4">Log In with Google</span>
</button>

<button
className="w-full max-w-xs font-bold shadow-sm
rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center
justify-center transition-all duration-300 ease-in-out
focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline
mt-5">
<div className="bg-white p-1 rounded-full">
<svg className="w-6" viewBox="0 0 32 32">
<path fill-rule="evenodd"
d="M16 4C9.371 4 4 9.371 4 16c0 5.3 3.438
9.8 8.207 11.387.602.11.82-.258.82-.578 0-.286-.011-1.04-.015-2.04-
3.34.723-4.043-1.609-4.043-1.609-.547-1.387-1.332-1.758-1.332-1.758-
1.09-.742.082-.726.082-.726 1.203.086 1.836 1.234 1.836 1.234 1.07
1.836 2.808 1.305 3.492 1 .11-.777.422-1.305.762-1.605-2.664-.301-
5.465-1.332-5.465-5.93 0-1.313.469-2.383 1.234-3.223-.121-.3-.535-
1.523.117-3.175 0 0 1.008-.32 3.301 1.23A11.487 11.487 0 0116
9.805c1.02.004 2.047.136 3.004.402 2.293-1.55 3.297-1.23 3.297-
1.23.656 1.652.246 2.875.12 3.175.77.84 1.231 1.91 1.231 3.223 0
4.61-2.804 5.621-5.476 5.922.43.367.812 1.101.812 2.219 0 1.605-.011
2.898-.011 3.293 0 .32.214.695.824.578C24.566 25.797 28 21.3 28
16c0-6.629-5.371-12-12-12z" />
</svg>
</div>
<span className="ml-4">Log In with GitHub</span>
</button>
</div>

</div>
</div>
</div>

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 57
 </div>
</div>
</>
);
}

Code of Register
import React from "react";
import { Link } from "react-router-dom";

export default function Register() {

return (
<>
<div className="min-h-screen bg-gray-100 text-gray-900 flex
justify-center">
<div className="max-w-screen-xl m-0 sm:m-10 bg-white shadow
sm:rounded-lg flex justify-center flex-1">
<div className="flex">
<img src="src\assets\Login.jpeg" alt="" />
</div>
<div className="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
<div className="flex items-center justify-center">
<div className="text-5xl" style={{ fontFamily: "'Times
New Roman', Times, serif" }}>
DCE DTU |
</div>
<div className="text-5xl" style={{ fontFamily:
"'Corinthia', serif" }}>
alumni
</div>
</div>
<div className="mt-12 flex flex-col items-center">
<h1 className="text-2xl xl:text-3xl font-extrabold">
Sign up
</h1>
<div className="w-full flex-1 mt-8">
<div className="mx-auto max-w-xs">
<input

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 58
 className="w-full px-8 py-4 rounded-lg font-
medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-
sm focus:outline-none focus:border-gray-400 focus:bg-white"
type="email" placeholder="Email" />
<input
className="w-full px-8 py-4 rounded-lg font-
medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-
sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
type="password" placeholder="Password" />
<button
className="mt-5 tracking-wide font-semibold bg-
orange-700 text-gray-100 w-full py-4 rounded-lg hover:bg-orange-800
transition-all duration-300 ease-in-out flex items-center justify-
center focus:shadow-outline focus:outline-none">
<svg className="w-6 h-6 -ml-2" fill="none"
stroke="currentColor" strokeWidth="2"
strokeLinecap="round" strokeLinejoin="round">
<path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4
4v2" />
<circle cx="8.5" cy="7" r="4" />
<path d="M20 8v6M23 11h-6" />
</svg>
<span className="ml-3">
Sign up
</span>
</button>
<p className="mt-6 text-xs text-gray-600 text-
center">
I agree to abide by DTU's <span> </span>
<a href="#" className="border-b border-gray-500
border-dotted">
Terms of Service <span> </span>
</a>
and its <span> </span>
<a href="#" className="border-b border-gray-500
border-dotted">
Privacy Policy
</a>
</p>
</div>

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 59
 <div className="my-12 border-b text-center">
<div
className="leading-none px-2 inline-block text-
sm text-gray-600 tracking-wide font-medium bg-white transform
translate-y-1/2">
Or Sign up with Google or Github
</div>
</div>

<div className="flex flex-col items-center">

<button
className="w-full max-w-xs font-bold shadow-sm
rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center
justify-center transition-all duration-300 ease-in-out
focus:outline-none hover:shadow focus:shadow-sm focus:shadow-
outline">
<div className="bg-white p-2 rounded-full">
<svg className="w-4" viewBox="0 0 533.5
544.3">
<path
d="M533.5 278.4c0-18.5-1.5-37.1-4.7-
55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4
81.1-117.4 81.1-200.2z"
fill="#4285f4" />
<path
d="M272.1 544.3c73.4 0 135.3-24.1 180.4-
65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-
112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z"
fill="#34a853" />
<path
d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-
104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z"
fill="#fbbc04" />
<path
d="M272.1 107.7c38.8-.6 76.3 14 104.4
40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9
150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z"
fill="#ea4335" />
</svg>

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 60
 </div>
<span className="ml-4">
Sign up with Google
</span>
</button>

<button
className="w-full max-w-xs font-bold shadow-sm
rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center
justify-center transition-all duration-300 ease-in-out
focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline
mt-5">
<div className="bg-white p-1 rounded-full">
<svg className="w-6" viewBox="0 0 32 32">
<path fillRule="evenodd"
d="M16 4C9.371 4 4 9.371 4 16c0 5.3 3.438
9.8 8.207 11.387.602.11.82-.258.82-.578 0-.286-.011-1.04-.015-2.04-
3.34.723-4.043-1.609-4.043-1.609-.547-1.387-1.332-1.758-1.332-1.758-
1.09-.742.082-.726.082-.726 1.203.086 1.836 1.234 1.836 1.234 1.07
1.836 2.808 1.305 3.492 1 .11-.777.422-1.305.762-1.605-2.664-.301-
5.465-1.332-5.465-5.93 0-1.313.469-2.383 1.234-3.223-.121-.3-.535-
1.523.117-3.175 0 0 1.008-.32 3.301 1.23A11.487 11.487 0 0116
9.805c1.02.004 2.047.136 3.004.402 2.293-1.55 3.297-1.23 3.297-
1.23.656 1.652.246 2.875.12 3.175.77.84 1.231 1.91 1.231 3.223 0
4.61-2.804 5.621-5.476 5.922.43.367.812 1.101.812 2.219 0 1.605-.011
2.898-.011 3.293 0 .32.214.695.824.578C24.566 25.797 28 21.3 28
16c0-6.629-5.371-12-12-12z" />
</svg>
</div>
<span className="ml-4">
Sign up with GitHub
</span>
</button>
</div>

</div>
</div>
</div>
</div>
</div>

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 61
 </>
);
}

Kshitij Sinha (23/CS/225), Madhav Mishra (23/CS/236), Mayank Yadav (23/CS/250), Neal Saxena (23/CS/275) 62