DECLARATION

I, the undersigned, hereby declare that the Project Report entitled,

EDUCATIONAL WEBSITE submitted by me to the APIIT SD INDIA,
PANIPAT affiliated to Kurukshetra University Kurukshetra, in partial
fulfilment of the requirement for the award of degree of BACHELOR OF
TECHNOLOGY under the guidance of Asst. Prof. Geeta Jain in CSE
department, is my original work and the conclusions drawn therein are based
on the material collected by myself.

The Report submitted is my own work and has not been duplicated from any
other source. I shall be responsible for any unpleasant moment/situation.

Place: Panipat

Date: 30-04-2025

Mustkim Khan

2|Pa ge
 Acknowledgement

A successful Project Report is the result of team work and co-ordination that
includes not only the group of developers who put forth the ideas, logic and
efforts but also those who guide them. So, at the completion of the Summer
Training Report, I feel obliged to extent my gratitude towards all those who
made valuable contributions throughout my training period.

I am thankful for all the knowledge, guidance and support imparted by Dr.
Prateek Mishra (Director) to me who gave me invaluable knowledge during
the IT period.

In addition, I wish to convey deep sense of gratitude towards HOD Prof.

Rajesh Chaudhary at any time I needed.

At the end just as significantly, I would like to express my sincere thanks to,
Asst. Prof. Geeta Jain and all the other staff members who have provided me
excellent knowledge and support throughout my Graduation.

I am very much thankful to my parents and friends for their continuous support.

Place: Panipat

Date: 30-04-2025

MUSTKIM KHAN

4|Page
 INDEX

SR NO. TITLE PAGE NO. SIGNATURE

1. Introduction 7

2. Objective of the project 8-9

3. Design and 10-11

Implementation

4. Tools and technology used 12-16

5. Source code 17-91

6. Screenshots of the 92-98

project

7. Conclusion 99-100

8. Future scope 101-103

9. References 104

5|Page
 SCREENSHOT’S INDEX

SR NO. TITLE PAGE NO. SIGNATURE

1. Home page 92

2. Book Section 93

3. Quiz Section 94

4. Review Section 95

5. Blog Section 96

6. Exam Section 97

7. Login Section 98

6|Page
 INTRODUCTION

Education today is undergoing a massive transformation, with technology

playing a key role in shaping the future of learning. Traditional education
methods often limit access to resources and slow down the distribution of
knowledge. In contrast, online platforms provide an opportunity for students
and educators to connect, learn, and share information more effectively.
This project, titled "Educational Website", is a step toward bridging the gap
between traditional educational methods and modern-day technological
solutions. The website acts as a central hub for academic resources such as
previous year papers, lecture notes, reference books, interactive quizzes,
and blogs, ensuring that students have all essential study materials at their
fingertips.
Built with the latest technologies like React JS, Tailwind CSS, and Firebase,
the platform delivers a seamless user experience. React ensures a responsive
and dynamic frontend; Tailwind CSS provides an elegant and mobile-friendly
design, and Firebase handles backend services like database management,
authentication, and hosting with efficiency and security.

An important aspect of this project is the implementation of a light and dark

theme toggle, enhancing the website's accessibility and user personalization. It
enables students to choose the visual mode that best suits their environment and
comfort. Moreover, the authentication system developed using Firebase
ensures that only authorized users can access personalized resources, creating a
secure and reliable learning environment.
This project is designed not just as a repository of academic resources but as a
complete educational ecosystem — one that motivates self-paced learning,
community sharing through blogs, and preparation through quizzes.
Through this educational website, we aim to empower students, teachers, and
institutions by providing them with easy access to curated academic content and
a modern digital learning experience.

7|Page
 OBJECTIVE OF PROJECT

The main objectives behind developing the Educational Website project are
manifold. With a student-centric approach, the project sets out clear goals to
enhance the academic journey of users and leverage technology to simplify
access to educational materials.
1. Centralized Educational Resources

To offer a single platform where students can access previous year papers, well-
organized notes, important books, quizzes, and blogs without the need to search
across multiple sources.
2. Promote Self-Study and Preparation

By providing readily available study materials and quizzes, students can engage
in self-assessment and independent study, allowing them to identify their
strengths and areas for improvement.
3. Enhance User Experience

Implementing a dynamic, smooth, and highly responsive user interface using

modern frameworks ensures that users have an enjoyable experience while
navigating the website.

4. Secure User Management

The project implements a highly secure authentication system using Firebase
Authentication. This system ensures that users' credentials are protected, and
access to the platform is safe and reliable.

5. Customization and Accessibility

Introduction of light and dark themes gives users the flexibility to customize
their viewing preferences, improving usability for different lighting
environments and increasing overall accessibility.
6. Real-time Data Management

8|Page
Using Firebase Firestore, the website ensures that all educational materials are
updated in real-time. Students and teachers can access the latest content without
unnecessary delays or data syncing issues.
7. Mobile-First Approach

With increasing mobile usage, the website has been developed with a responsive
design philosophy, ensuring full functionality and optimal display across all
devices including mobiles, tablets, and desktops.
8. Encourage Knowledge Sharing

Through the blog section, educators, and students can exchange knowledge,
share academic insights, and build a collaborative learning community.
In conclusion, the project aims to harness modern technology to create a robust,
user-friendly educational platform that empowers students, improves
accessibility to learning resources, and supports academic excellence.

9|Page
 DESIGN AND IMPLIMENTATION

The design and implementation of the Educational Website have been carried
out using modern development practices, focusing on both functionality and
user experience.

1. Frontend Design

The user interface is built using React.js, which provides a modular,

component-based architecture. Each section of the website such as Notes,
Previous Year Papers, Books, Quizzes, and Blogs is organized into separate
components, ensuring code reusability, readability, and maintainability.
Tailwind CSS has been utilized for designing the UI components. Tailwind's
utility-first classes allow for rapid development of responsive layouts and
attractive designs without writing custom CSS extensively. Every page is
crafted to maintain consistency in color, typography, spacing, and
responsiveness.
The light and dark theme feature is implemented using React context and
hooks. Users can easily toggle between themes, and the choice persists across
sessions using local storage, ensuring a customized user experience.
2. Backend Services

Firebase plays a crucial role in managing the backend functionalities:

 Authentication Module: Firebase Authentication manages user login,

signup, and logout securely. It supports email-password authentication
with error handling and secure token management.
 Firestore Database: Educational materials, quiz questions, blog posts,
and user data are stored in Firestore. Firestore’s real-time capabilities
ensure that any updates are reflected instantly on the frontend.

 Firebase Hosting: The deployed version of the website uses Firebase

Hosting, providing fast, secure, and scalable delivery.
3. Features Breakdown

10 | P a g e
  Previous Year Papers: Uploaded as PDFs and viewed through
integrated PDF viewers.
 Notes Section: Categorized notes made available for different subjects
and classes.
 Books Repository: List of important academic books accessible with
detailed descriptions.
 Quiz Section: Interactive quizzes built with MCQs and immediate
scoring mechanisms.
 Blogs: Educational blogs posted dynamically from Firestore, providing
tips, insights, and motivational content.
 Authentication: Full user authentication system with password
recovery and email verification features.
 Theme Toggle: React Context API and Tailwind’s dark: variants allow
seamless theme switching.
4. Implementation Methodology

The project followed an Agile development model:

 Requirement Gathering: Identify user needs — access to papers, notes,

quizzes.
 Design Phase: Wireframing the structure and planning the user
experience journey.
 Development Phase: Coding frontend and backend modules,
integrating authentication, and building the UI/UX.
 Testing Phase: Testing responsiveness, functionality, authentication
workflows, and UI consistency across devices.
 Deployment Phase: Hosting the fully functional website through
Firebase Hosting.
Attention to performance optimization, including lazy loading, optimized asset
management, and efficient API calls, was a key focus during development.

11 | P a g e
 TOOLS AND TECHNOLOGY USED

The success of the Educational Website project was largely driven by the
effective use of modern tools and technologies. Each tool selected played a vital
role in ensuring the platform was efficient, secure, scalable, and user-friendly.
Below is a detailed overview of the major technologies and tools used during
the development of the project.

1. React.js

React.js is a leading open-source JavaScript library maintained by Facebook,

designed specifically for building user interfaces. It was the core technology
used for developing the Educational Website's front-end.
Key Reasons for Choosing React.js:

 Component-Based Architecture:
React promotes breaking down the UI into small, reusable components.
In the project, each section like Quizzes, Previous Year Papers, Notes,
and Blogs was built using separate, modular components. This made
development organized and maintenance simpler.
 Virtual DOM:
React’s Virtual DOM ensures that only parts of the page that need
updates are re-rendered, leading to faster performance and smoother
user experience — essential for an educational platform where users
switch between resources frequently.
 Hooks:
Hooks like useState, useEffect, and useContext allowed efficient
management of state and side effects, supporting features like theme
switching (light/dark mode) and dynamic loading of content.

 Seamless Updates:
React’s declarative approach made it easy to keep the UI in sync with
the application’s data, ensuring consistent user experience throughout
the website.

12 | P a g e
React’s flexibility, performance, and strong community support made it the
ideal choice for building a modern, scalable educational platform.

2. Tailwind CSS

Tailwind CSS is a utility-first CSS framework used to design responsive and

attractive user interfaces without writing much custom CSS.
Key Reasons for Choosing Tailwind CSS:

 Utility-First Classes: Tailwind allows developers to build complex

designs directly in HTML with utility classes, making styling much
faster. For instance, page layouts, buttons, headers, and cards were
all styled using Tailwind utilities.
 Dark and Light Mode Implementation:
Tailwind's built-in dark mode support helped easily implement the
theme toggling feature, allowing users to switch between light and dark
themes according to their preference.
 Responsive Design:
By using Tailwind’s responsive utilities, the Educational Website
automatically adapts to different screen sizes, providing a consistent
experience across mobiles, tablets, and desktops.
 Rapid Prototyping:
Development time was significantly reduced as Tailwind allowed quick
iteration and design changes without writing custom CSS from scratch.

Tailwind ensured the platform maintained a clean, professional look while

staying lightweight and highly responsive.

3. Firebase

Firebase, developed by Google, is a comprehensive platform offering backend

services such as authentication, real-time databases, and hosting. It served as
the backend infrastructure for the Educational Website.

Key Firebase Services Used:

13 | P a g e
  Firebase Authentication:
Secure sign-in and user management were handled through Firebase
Authentication. Students and teachers could register, log in, and access
personalized content securely.
 Cloud Firestore:
All the educational content like notes, previous year papers, quizzes, and
blog posts were stored and managed in Firestore, a real-time NoSQL
database. This ensured fast data access and live updates without needing
manual refresh.

 Firebase Hosting:
The final website was deployed on Firebase Hosting, benefiting from its
fast delivery network, automatic SSL certification for security, and easy
continuous deployment.

Why Firebase Was Chosen:

 Easy integration with React applications.

 Highly scalable and reliable.

 Real-time updates that improved user experience.

 Minimal backend management effort, allowing more focus on the

frontend.
Firebase provided a secure, scalable, and easy-to-manage backend solution for
the project.

4. Visual Studio Code (VS Code)

Visual Studio Code is a lightweight yet powerful code editor developed by

Microsoft, used throughout the project for efficient development.
Key Features Beneficial to the Project:

 Extension Marketplace:
Extensions like Prettier, ESLint, Tailwind IntelliSense, and React
snippets enhanced productivity, improved code quality, and accelerated
development.

14 | P a g e
  Integrated Terminal:
With VS Code’s terminal, running commands like npm start, Firebase
deployments, and Git operations became seamless.
 Git Integration:
Built-in Git support allowed version control operations like commits,
pushes, and branch switching without leaving the editor.

 Debugger and Error Checking:

VS Code’s robust debugger helped identify and fix issues faster, leading
to a more stable and bug-free application.
VS Code provided an organized and efficient environment that helped maintain
high code quality and speed throughout the development.

5. Git and GitHub

Version control is a crucial part of modern software development, and Git with
GitHub were used to manage and host the project code.

Importance of Git and GitHub in the Project:

 Version Control:
Using Git, every change in the project was tracked, allowing easy
rollbacks and maintaining a history of development progress.
 Branch Management:
Different features (like authentication, quizzes, or blog posting) were
developed on separate branches, reducing conflicts and enabling parallel
work.
 Remote Hosting:
GitHub hosted the project’s code online, providing backup, easy
collaboration (if needed in future versions), and a professional platform
to showcase the project.

 Continuous Integration Ready:

GitHub’s integration with deployment pipelines makes it easy for future
automatic deployments and updates.
Git and GitHub ensured the project development was systematic, collaborative-
ready, and protected against data loss.

15 | P a g e
6. React Router (react-router-dom)

React Router is the standard library for routing in React applications, allowing
users to navigate between different pages seamlessly without refreshing the
browser.
How React Router Was Used:

 Multiple Routes:
The website includes multiple sections — Notes, Quizzes, Previous Year
Papers, Blogs, and Authentication pages — all handled efficiently
through React Router.
 Nested and Dynamic Routing:
Nested routes were implemented for pages like individual blog posts and
category-specific quizzes, providing a better navigation structure.

 Protected Routes:
Authentication checks were implemented on certain routes, ensuring
only logged-in users could access restricted content such as uploading
notes or writing blogs.
Benefits:

 Faster page transitions and smoother navigation.

 Better user experience through dynamic loading of pages without full

reloads.
 Improved application structure and manageability.

React Router played a vital role in building a seamless and dynamic user
experience, making the platform feel like a native application.

16 | P a g e
 Source code
App.tsx

import { Toaster } from "@/components/ui/toaster";

import { Toaster as Sonner } from "@/components/ui/sonner";

import { TooltipProvider } from "@/components/ui/tooltip";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

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

import { Helmet, HelmetProvider } from "react-helmet-async";

import Index from "./pages/Index";

import NotFound from "./pages/NotFound";

import { ThemeProvider } from "@/components/ThemeProvider";

import { AuthProvider } from "@/context/AuthContext";

import Login from "./pages/Login";

import Signup from "./pages/Signup";

import ProtectedRoute from "./components/ProtectedRoute";

import PapersHome from "./pages/papers/PapersHome";

import SectorSelection from "./pages/papers/SectorSelection";

import ClassBoardSelection from "./pages/papers/ClassBoardSelection";

import YearSubjectSelection from "./pages/papers/YearSubjectSelection";

import PaperViewer from "./pages/papers/PaperViewer";

import PaperViewerPage from "./pages/papers/PaperViewerPage";

import BoardResourcesPage from "./pages/papers/BoardResourcesPage";

import QuizHome from "./pages/quiz/QuizHome";

import QuizList from "./pages/quiz/QuizList";

import QuizAttempt from "./pages/quiz/QuizAttempt";
import BlogHome from "./pages/blog/BlogHome";

17 | P a g e
import BlogDetail from "./pages/blog/BlogDetail";

import UserProfile from "./pages/profile/UserProfile";

import Terms from "./pages/Terms";

import Privacy from "./pages/Privacy";
import Resources from "./pages/Resources";

import BooksPage from "./pages/books/BooksPage";

import BookDetail from "./pages/books/BookDetail";

import DomainChangeGuide from "./pages/DomainChangeGuide";

import AboutUs from "./pages/AboutUs";

import SyllabusHome from "./pages/syllabus/SyllabusHome";

import SyllabusDetail from "./pages/syllabus/SyllabusDetail";

import TopicDetail from "./pages/syllabus/TopicDetail";

import Class10CBSEScience2016 from "./cbse/Class10CBSEScience2016"

// Configure the query client with error handling to prevent blank screens

const queryClient = new QueryClient({

defaultOptions: {

queries: {
retry: 1,

refetchOnWindowFocus: false,

staleTime: 300000, // 5 minutes

meta: {

onError: (error) => {

console.error("Query error:", error);
}

18 | P a g e
 },

mutations: {

meta: {

onError: (error) => {

console.error("Mutation error:", error);
}

},

});

const App = () => (

<QueryClientProvider client={queryClient}>

<AuthProvider>

<ThemeProvider defaultTheme="light">

<HelmetProvider>

<Helmet>

<title>Previous Pathshala - Empowering Education</title>

<meta name="description" content="Pathshala - Empowering students

with quality education and personalized learning experiences." />
<link rel="canonical" href="https://www.previouspathshala.com" />
</Helmet>

<TooltipProvider>

<Toaster />

<Sonner />

<BrowserRouter>

19 | P a g e
 <Routes>

<Route path="/" element={<Index />} />

<Route path="/signup" element={<Signup />} />

<Route path="/login" element={<Login />} />

<Route path="/terms" element={<Terms />} />

<Route path="/privacy" element={<Privacy />} />

<Route path="/contact" element={<Index />} />

<Route path="/domain-guide" element={<DomainChangeGuide />}

/>

<Route path="/resources" element={<Resources />} />

<Route path="/about" element={<Class10CBSEScience2016 />} />

<Route path="/syllabus" element={<SyllabusHome />} />

<Route path="/syllabus/:sectorId/:categoryId"
element={<SyllabusDetail />} />
<Route path="/syllabus/:sectorId/:categoryId/:boardId"
element={<SyllabusDetail />} />
<Route path="/syllabus/topic/:topicId" element={<TopicDetail />} />

<Route path="/books" element={<Navigate to="/books/all" />} />

<Route path="/books/:category" element={<BooksPage />} />

<Route path="/books/:category/:bookId" element={<BookDetail />}

/>

<Route path="/profile" element={

<ProtectedRoute requiredRole="user">

<UserProfile />

20 | P a g e
 </ProtectedRoute>

} />

<Route path="/papers" element={<PapersHome />} />

<Route path="/papers/sector/:sector" element={<SectorSelection />}
/>

<Route path="/papers/sector/:sector/class/:classId"
element={<ClassBoardSelection />} />

<Route path="/papers/sector/:sector/class/:classId/board/:boardId"
element={<BoardResourcesPage />} />

<Route
path="/papers/sector/:sector/class/:classId/board/:boardId/year/:year/subject/:s
ubject" element={<PaperViewer />} />
<Route
path="/papers/sector/:sector/class/:classId/board/:boardId/previous-papers"
element={<YearSubjectSelection />} />
<Route path="/papers/view/:paperId" element={<PaperViewerPage
/>} />

<Route path="/quizzes" element={<QuizHome />} />

<Route path="/quizzes/list/:category" element={<QuizList />} />

<Route path="/quizzes/attempt/:quizId" element={<QuizAttempt />}

/>

<Route path="/blogs" element={<BlogHome />} />

<Route path="/blogs/:blogId" element={<BlogDetail />} />

<Route path="*" element={<NotFound />} />

21 | P a g e
 <Route path="/register" element={<Navigate to="/signup" />} />

</Routes>

</BrowserRouter>

</TooltipProvider>
</HelmetProvider>

</ThemeProvider>

</AuthProvider>

</QueryClientProvider>

);

export default App;

index.css

@tailwind base;

@tailwind components;

@tailwind utilities;

@layer base {
:root {

--background: 0 0% 100%;

--foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;

--card-foreground: 222.2 84% 4.9%;

22 | P a g e
 --popover: 0 0% 100%;

--popover-foreground: 222.2 84% 4.9%;

--primary: 221.2 83.2% 53.3%;

--primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;

--secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;

--muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;

--accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;

--destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;

--input: 214.3 31.8% 91.4%;

--ring: 221.2 83.2% 53.3%;

--radius: 0.5rem;

.dark {

23 | P a g e
--background: 222.2 84% 4.9%;

--foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;

--card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;

--popover-foreground: 210 40% 98%;

--primary: 217.2 91.2% 59.8%;

--primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;

--secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;

--muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;

--accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;

--destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;

--input: 217.2 32.6% 17.5%;

24 | P a g e
 --ring: 224.3 76.3% 48%;

@layer base {

*{

@apply border-border;

body {

@apply bg-background text-foreground;

/* Custom Animations */

@keyframes border-pulse {

0%, 100% {

border-color: rgba(37, 99, 235, 0.8);

}
50% {
border-color: rgba(37, 99, 235, 0.4);

@keyframes glow {

0%, 100% {
opacity: 0.5;

25 | P a g e
 box-shadow: 0 0 5px theme('colors.blue.500');

50% {

opacity: 1;
box-shadow: 0 0 20px theme('colors.blue.400');

@keyframes float {

0%, 100% {
transform: translateY(0);

}
50% {
transform: translateY(-10px);

@keyframes gradient-shift {

0% {
background-position: 0% 50%;

50% {

background-position: 100% 50%;

100% {
background-position: 0% 50%;

26 | P a g e
 }

.shadow-glow {
box-shadow: 0 0 8px currentColor;

.animation-delay-300 {

animation-delay: 300ms;

.animation-delay-500 {
animation-delay: 500ms;
}

.animation-delay-700 {
animation-delay: 700ms;

.dark-theme-toggle {

background: radial-gradient(circle at center, rgba(59, 130, 246, 0.2) 0%,

transparent 70%);

.light-theme-toggle {

background: radial-gradient(circle at center, rgba(251, 191, 36, 0.1) 0%,

transparent 70%);

27 | P a g e
}

/* Border Animations */

.animate-border {
@apply relative;

.animate-border::before {

content: '';

@apply absolute inset-0;

@apply rounded-md;
@apply border-2 border-transparent;

background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);

background-size: 400% 400%;

animation: gradient-shift 8s ease infinite;

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite: xor;
mask-composite: exclude;
}

/* LaTeX Container Styles */

.latex-container {

@apply overflow-x-auto;

28 | P a g e
.dark .latex-container .MathJax {

color: white !important;

}

/* Quiz animations */

.quiz-card-enter {

transform: translateY(20px);

opacity: 0;
}

.quiz-card-enter-active {
transform: translateY(0);
opacity: 1;

transition: all 300ms ease-in;

.quiz-card-exit {
transform: translateY(0);
opacity: 1;

.quiz-card-exit-active {

transform: translateY(-20px);
opacity: 0;
transition: all 300ms ease-out;

29 | P a g e
}

/* Button with border animation */

.btn-glow {
position: relative;
overflow: hidden;

transition: all 0.3s ease;

z-index: 1;
}

.btn-glow::after {
content: '';

position: absolute;

inset: -2px;

background: linear-gradient(

60deg,
hsl(224, 85%, 66%),

hsl(269, 85%, 66%),

hsl(314, 85%, 66%),

hsl(359, 85%, 66%),

hsl(44, 85%, 66%),

hsl(89, 85%, 66%),

hsl(134, 85%, 66%),

hsl(179, 85%, 66%)

);

background-size: 300% 300%;

30 | P a g e
 animation: gradient-shift 4s linear infinite;

border-radius: 0.5rem;
z-index: -1;

/* Content highlight animation */

.highlight-on-hover {

@apply transition-all duration-300;

background-size: 200% 100%;

background-position: -100% 0;

.highlight-on-hover:hover {
background-image: linear-gradient(

120deg,

transparent 0%,

transparent 40%,

rgba(59, 130, 246, 0.1) 50%,

transparent 60%,
transparent 100%

);

background-position: 100% 0;

/* PDF Tools animation */

.tool-card {

31 | P a g e
 @apply transition-all duration-300 ease-out;

.tool-card:hover {
@apply shadow-lg;

transform: translateY(-5px);

/* Dark mode card effects */

.dark .card-3d {

background: linear-gradient(45deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42,
0.8) 100%);

border: 1px solid rgba(88, 180, 255, 0.1);

box-shadow:
0 4px 12px rgba(0, 0, 0, 0.5),

inset 0 1px 0 rgba(255, 255, 255, 0.05);

backdrop-filter: blur(4px);
}

/* Glow text in dark mode */

.dark .glow-text {
text-shadow: 0 0 8px rgba(88, 180, 255, 0.4);

/* Syllabus page tab animations */

.syllabus-tab-active {

32 | P a g e
 position: relative;

overflow: hidden;
}

.syllabus-tab-active::after {

content: "";
position: absolute;

bottom: 0;
left: 25%;

width: 50%;

height: 2px;

background-color: currentColor;
transform: scaleX(1);

transform-origin: bottom center;

transition: transform 0.3s ease-in-out;

.syllabus-tab-inactive::after {
transform: scaleX(0);
}

AboutUs.tsx

import React from 'react';

import Navbar from '@/components/Navbar';

import Footer from '@/components/Footer';

33 | P a g e
import { Button } from '@/components/ui/button';

import { Card, CardContent } from '@/components/ui/card';

import { CheckCircle, Award, Users, Clock, BookOpen, GraduationCap } from

'lucide-react';
import { Link } from 'react-router-dom';

const AboutUs = () => {

// Timeline data

const timeline = [
{

year: "2010",

title: "Founding of Pathshala",

description: "Pathshala was founded with a vision to provide quality

education to all students."
},

{
year: "2013",

title: "First Learning Center",

description: "Opened our first physical learning center with dedicated labs
and classrooms."

},

year: "2015",

title: "Digital Transformation",

description: "Launched our first digital learning platform to reach students

beyond our physical locations."

},

34 | P a g e
 {

year: "2018",

title: "Curriculum Expansion",

description: "Expanded our curriculum to cover all major educational boards

and competitive exams."
},

{
year: "2022",

title: "Learning App Launch",

description: "Launched our comprehensive mobile app for anytime,

anywhere learning."
},

year: "2023",

title: "International Expansion",

description: "Extended our reach to international students and partnered with

global educational institutions."
}

];

// Team members

const team = [

name: "Dr. Amit Sharma",

role: "Founder & Director",

bio: "Ph.D. in Education with over 20 years of experience in teaching and
educational management.",

35 | P a g e
 image: "https://images.unsplash.com/photo-1507003211169-
0a1dd7228f2d?w=400&h=400&fit=crop"
},

name: "Prof. Sunita Patel",

role: "Academic Director",

bio: "Former university professor with expertise in curriculum development
and student assessment.",

image: "https://images.unsplash.com/photo-1494790108377-
be9c29b29330?w=400&h=400&fit=crop"
},

{
name: "Rajesh Kumar",

role: "Head of Technology",

bio: "Tech visionary with a passion for creating innovative educational
technology solutions.",
image: "https://images.unsplash.com/photo-1500648767791-
00dcc994a43e?w=400&h=400&fit=crop"
},

name: "Dr. Priya Singh",

role: "Content Director",

bio: "Specialist in creating engaging and effective learning materials for

diverse student groups.",

image: "https://images.unsplash.com/photo-1580489944761-
15a19d654956?w=400&h=400&fit=crop"
}

];

36 | P a g e
 // Values

const values = [

{
title: "Excellence",

description: "We strive for excellence in everything we do, from teaching to

technology.",
icon: <Award className="h-8 w-8 text-primary" />,

},

title: "Inclusivity",

description: "Education should be accessible to all, regardless of background

or circumstances.",
icon: <Users className="h-8 w-8 text-primary" />,

},

{
title: "Innovation",

description: "We constantly innovate to improve learning experiences and

outcomes.",
icon: <BookOpen className="h-8 w-8 text-primary" />,

},

title: "Lifelong Learning",

description: "We believe in fostering a mindset of continuous growth and

learning.",
icon: <GraduationCap className="h-8 w-8 text-primary" />,

37 | P a g e
 ];

return (

<div className="min-h-screen flex flex-col">

<Navbar />

<main className="flex-grow">

{/* Hero Section */}

<section className="bg-gradient-to-b from-primary/10 to-white py-16

dark:from-blue-950/30 dark:to-gray-900">

<div className="container mx-auto px-4">

<div className="text-center max-w-3xl mx-auto">

<h1 className="text-4xl md:text-5xl font-bold mb-6 dark:text-

white">About Pathshala</h1>
<p className="text-lg md:text-xl text-gray-700 mb-8 dark:text-gray-
300">

Transforming education through innovation and excellence since 2010

</p>

<div className="flex flex-wrap justify-center gap-4">

<Button size="lg" asChild>

<Link to="/contact">Contact Us</Link>

</Button>

<Button size="lg" variant="outline" asChild>

<Link to="/resources">Our Resources</Link>

</Button>

</div>
</div>

38 | P a g e
 </div>

</section>

{/* Mission & Vision */}

<section className="py-16 bg-white dark:bg-gray-900">

<div className="container mx-auto px-4">

<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">

<div>

<h2 className="text-3xl font-bold mb-6 text-gray-900 dark:text-

white">Our Mission & Vision</h2>

<div className="space-y-6">

<div>

<h3 className="text-xl font-semibold mb-2 text-primary">Our

Mission</h3>
<p className="text-gray-700 dark:text-gray-300">

To provide accessible, high-quality education that empowers

students to achieve academic excellence and develop critical life skills for future
success.
</p>

</div>

<div>
<h3 className="text-xl font-semibold mb-2 text-primary">Our
Vision</h3>

<p className="text-gray-700 dark:text-gray-300">

To be the leading educational platform that transforms learning

experiences through innovation, personalization, and community engagement.
</p>

</div>

39 | P a g e
 <div className="space-y-3">

<h3 className="text-xl font-semibold mb-2 text-primary">What

We Do</h3>

{[

"Deliver comprehensive educational content aligned with various

boards and competitive exams",
"Provide interactive learning materials that make complex concepts
easy to understand",

"Support students with personalized guidance and feedback",

"Build a community of learners and educators who collaborate

and grow together"
].map((item, index) => (

<div key={index} className="flex items-start">

<CheckCircle className="h-5 w-5 text-primary mr-2 flex-

shrink-0 mt-0.5" />

<p className="text-gray-700 dark:text-gray-300">{item}</p>

</div>

))}

</div>

</div>

</div>

<div className="relative">

<div className="aspect-video rounded-lg overflow-hidden shadow-

lg">

<img

src="https://images.unsplash.com/photo-1522202176988-
66273c2fd55f?ixlib=rb-4.0.3"

alt="Students collaborating"

40 | P a g e
 className="w-full h-full object-cover"

/>

</div>

<div className="absolute -bottom-6 -left-6 bg-white dark:bg-gray-

800 p-4 rounded-lg shadow-lg">
<div className="grid grid-cols-2 gap-4 text-center">

<div>
<p className="text-3xl font-bold text-primary">10k+</p>

<p className="text-sm text-gray-600 dark:text-gray-

400">Students</p>

</div>

<div>

<p className="text-3xl font-bold text-primary">98%</p>

<p className="text-sm text-gray-600 dark:text-gray-

400">Success Rate</p>

</div>

</div>

</div>

</div>
</div>

</div>

</section>

{/* Our Values */}

<section className="py-16 bg-gray-50 dark:bg-[hsl(222,47%,8%)]">

<div className="container mx-auto px-4">

<div className="text-center mb-12">

41 | P a g e
 <h2 className="text-3xl font-bold dark:text-white">Our Core
Values</h2>

<p className="mt-4 text-gray-600 dark:text-gray-400 max-w-2xl mx-

auto">

The principles that guide everything we do at Pathshala

</p>

</div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">

{values.map((value, index) => (

<Card key={index} className="border-none shadow-lg animate-
fade-in hover:shadow-xl transition-shadow dark:bg-gray-800">

<CardContent className="pt-6">
<div className="flex flex-col items-center text-center">

<div className="mb-4 p-3 bg-primary/10 rounded-full">

{value.icon}

</div>

<h3 className="text-xl font-semibold mb-2 dark:text-

white">{value.title}</h3>
<p className="text-gray-600 dark:text-gray-
400">{value.description}</p>

</div>

</CardContent>

</Card>

))}
</div>

</div>

</section>

42 | P a g e
 {/* Our Timeline */}

<section className="py-16 bg-white dark:bg-gray-900">

<div className="container mx-auto px-4">

<div className="text-center mb-12">

<h2 className="text-3xl font-bold dark:text-white">Our
Journey</h2>

<p className="mt-4 text-gray-600 dark:text-gray-400 max-w-2xl mx-

auto">

From humble beginnings to educational excellence

</p>

</div>

<div className="relative">

{/* Timeline Line */}

<div className="hidden md:block absolute left-1/2 transform -

translate-x-1/2 h-full w-0.5 bg-primary/30"></div>

<div className="space-y-12">

{timeline.map((event, index) => (

<div key={index} className={`flex flex-col md:flex-row ${index
% 2 === 0 ? 'md:flex-row-reverse' : ''} items-center`}>
<div className="md:w-1/2 p-4">

<div className={`md:max-w-md ${index % 2 === 0 ? 'md:ml-

auto' : ''} bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-lg
hover:shadow-xl transition-shadow border-t-4 border-primary`}>

<div className="text-sm text-primary font-semibold mb-

1">{event.year}</div>
<h3 className="text-xl font-bold mb-2 dark:text-
white">{event.title}</h3>

43 | P a g e
 <p className="text-gray-600 dark:text-gray-
400">{event.description}</p>

</div>

</div>

<div className="flex items-center justify-center my-4 md:my-0">

<div className="bg-primary text-white rounded-full w-10 h-10

flex items-center justify-center shadow-lg z-10">

<Clock className="h-5 w-5" />

</div>

</div>

<div className="md:w-1/2"></div>

</div>

))}

</div>
</div>

</div>

</section>

{/* Our Team */}

<section className="py-16 bg-gray-50 dark:bg-[hsl(222,47%,8%)]">

<div className="container mx-auto px-4">

<div className="text-center mb-12">

<h2 className="text-3xl font-bold dark:text-white">Meet Our
Team</h2>

44 | P a g e
 <p className="mt-4 text-gray-600 dark:text-gray-400 max-w-2xl mx-
auto">

The dedicated educators and professionals behind Pathshala's success

</p>

</div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">

{team.map((member, index) => (

<div key={index} className="group">

<div className="bg-white dark:bg-gray-800 rounded-lg overflow-

hidden shadow-lg transform transition-all duration-300 group-hover:scale-105
group-hover:shadow-xl">
<div className="aspect-square overflow-hidden">

<img
src={member.image}

alt={member.name}

className="w-full h-full object-cover transition-transform

duration-500 group-hover:scale-110"
/>

</div>

<div className="p-6">
<h3 className="text-xl font-bold mb-1 dark:text-
white">{member.name}</h3>
<p className="text-primary font-medium mb-
3">{member.role}</p>

<p className="text-gray-600 dark:text-gray-400 text-

sm">{member.bio}</p>
</div>

45 | P a g e
 </div>

</div>

))}

</div>

<div className="text-center mt-12">

<Button size="lg" asChild>

<Link to="/contact">Join Our Team</Link>

</Button>

</div>

</div>

</section>

{/* CTA Section */}

<section className="py-16 bg-gradient-to-r from-primary/20 to-blue-100

dark:from-blue-900/30 dark:to-gray-800">

<div className="container mx-auto px-4 text-center">

<h2 className="text-3xl font-bold mb-6 dark:text-white">Ready to

Start Learning with Us?</h2>
<p className="text-lg text-gray-700 mb-8 max-w-2xl mx-auto
dark:text-gray-300">
Join thousands of students who have transformed their learning
experience with Pathshala

</p>

<div className="flex flex-wrap justify-center gap-4">

<Button size="lg" className="animate-pulse" asChild>

<Link to="/signup">Sign Up Now</Link>

46 | P a g e
 </Button>

<Button size="lg" variant="outline" asChild>

<Link to="/contact">Contact Us</Link>

</Button>
</div>

</div>

</section>

</main>

<Footer />

</div>

);
};

export default AboutUs;

login.tsx

import React from 'react';

import Navbar from '@/components/Navbar';

import Hero from '@/components/Hero';

import Courses from '@/components/Courses';

import BoardAndEntranceExams from '@/components/PreviousPapers';

import BooksSection from '@/components/BooksSection';

import QuizSection from '@/components/QuizSection';

import BlogSection from '@/components/BlogSection';

47 | P a g e
import Contact from '@/components/Contact';

import Testimonials from '@/components/Testimonials';

import Reviews from '@/components/Reviews';

import Footer from '@/components/Footer';

import About from '@/components/About';
import { ScrollArea } from '@/components/ui/scroll-area';

import SEO from '@/components/SEO';

const Index = () => {

// Structured data for the homepage

const structuredData = {
"@context": "https://schema.org",

"@type": "EducationalOrganization",

"name": "Pathshala",

"description": "Empowering students with quality education and personalized

learning experiences",
"url": "https://www.pathshala.edu",

"logo": "https://www.pathshala.edu/logo.png",

"sameAs": [

"https://www.facebook.com/pathshala",

"https://www.twitter.com/pathshala",
"https://www.linkedin.com/company/pathshala",

"https://www.instagram.com/pathshala"
],

"contactPoint": {
"@type": "ContactPoint",

48 | P a g e
 "telephone": "+91-123-456-7890",

"contactType": "customer service",

"availableLanguage": ["English", "Hindi"]

},

"offers": {
"@type": "Offer",

"category": "Educational Resources"

};

return (

<div className="min-h-screen flex flex-col">

<SEO

title="Pathshala - Empowering Education for All"

description="Pathshala provides high-quality educational resources,

including previous papers, books, quizzes, and more for students of all grades
and streams."
keywords="education, online learning, previous papers, syllabus, board
exams, entrance exams, quizzes, study material"
structuredData={structuredData}

/>

<Navbar />

<ScrollArea className="flex-grow">

<main>

<Hero />

<Courses />
<BoardAndEntranceExams />

49 | P a g e
 <BooksSection />

<QuizSection />

<BlogSection />

<Reviews />
<Testimonials />

<About />

<Contact />

</main>

</ScrollArea>

<Footer />

</div>

);
};

export default Index;

signUp,tsx

import React, { useState } from "react";

import { useNavigate, Link } from "react-router-dom";

import { zodResolver } from "@hookform/resolvers/zod";

import { useForm } from "react-hook-form";

import * as z from "zod";

import { Button } from "@/components/ui/button";

import { Input } from "@/components/ui/input";

import {

50 | P a g e
 Form,

FormControl,

FormField,
FormItem,

FormLabel,

FormMessage,

} from "@/components/ui/form";

import {
Select,

SelectContent,

SelectItem,

SelectTrigger,

SelectValue,
} from "@/components/ui/select";

import { Card, CardContent, CardDescription, CardFooter, CardHeader,

CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";

import Navbar from "@/components/Navbar";

import Footer from "@/components/Footer";

import { Checkbox } from "@/components/ui/checkbox";

import { useToast } from "@/components/ui/use-toast";

import { User, Mail, Phone, Lock, MapPin, BookOpen } from "lucide-react";

import { useFirebaseAuth } from "@/hooks/useFirebaseAuth";

// Signup form schema

const signupSchema = z.object({

51 | P a g e
 name: z.string().min(2, { message: "Name must be at least 2 characters" }),

email: z.string().email({ message: "Please enter a valid email address" }),

phone: z.string().min(10, { message: "Please enter a valid phone number" }),

password: z.string().min(6, { message: "Password must be at least 6
characters" }),
confirmPassword: z.string().min(6, { message: "Please confirm your
password" }),

district: z.string().min(2, { message: "Please enter your district" }),

state: z.string().min(2, { message: "Please enter your state" }),

academicStream: z.string().min(1, { message: "Please select your academic
stream" }),
gender: z.string().min(1, { message: "Please select your gender" }),
termsAccepted: z.boolean().refine(val => val === true, {

message: "You must accept the terms and conditions",

}),

}).refine((data) => data.password === data.confirmPassword, {

message: "Passwords don't match",

path: ["confirmPassword"],

});

type SignupValues = z.infer<typeof signupSchema>;

const Signup = () => {

const navigate = useNavigate();

const { registerWithEmailAndPassword, signInWithGoogle } =

useFirebaseAuth();
const { toast } = useToast();

52 | P a g e
const [loading, setLoading] = useState(false);

const form = useForm<SignupValues>({

resolver: zodResolver(signupSchema),
defaultValues: {

name: "",

email: "",

phone: "",

password: "",

confirmPassword: "",

district: "",
state: "",

academicStream: "",

gender: "",

termsAccepted: false,
},

});

const onSubmit = async (data: SignupValues) => {

setLoading(true);

try {

const userData = {

name: data.name,

email: data.email,

mobile: data.phone,
district: data.district,

53 | P a g e
 country: data.state,

academicStream: data.academicStream,

gender: data.gender,
};

const user = await registerWithEmailAndPassword(userData,

data.password);

if (user) {

toast({
title: "Success!",

description: "Your account has been created successfully.",

});

navigate("/profile");
}

} catch (error: any) {

toast({

variant: "destructive",
title: "Registration failed",
description: error.message || "Something went wrong. Please try again.",

});
} finally {

setLoading(false);

}
};

54 | P a g e
const handleGoogleSignIn = async () => {

setLoading(true);
try {

const user = await signInWithGoogle();

if (user) {
toast({

title: "Success!",

description: "You've signed in with Google successfully.",

});

navigate("/profile");

} catch (error: any) {

toast({

variant: "destructive",

title: "Google sign-in failed",

description: error.message || "Something went wrong. Please try again.",

});

} finally {

setLoading(false);
}

};

const academicStreams = [

"Science",

"Commerce",

"Arts",

55 | P a g e
 "Engineering",

"Medical",

"Law",
"Other"
];

const genders = [

"Male",

"Female",

"Other"
];

return (

<div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900">

<Navbar />

<main className="flex-grow py-8">

<div className="container mx-auto px-4">

<Card className="w-full max-w-2xl mx-auto shadow-lg dark:bg-gray-

800/70 dark:border-gray-700">

<CardHeader className="space-y-1">

<div className="flex justify-center mb-4">

<img

src="/lovable-uploads/99159b03-6a51-4215-830d-
9ff354ec2d1b.png"
alt="Logo"

className="h-16 w-auto"

/>

56 | P a g e
 </div>

<CardTitle className="text-2xl font-bold text-center">Create an

Account</CardTitle>
<CardDescription className="text-center">

Enter your details below to create your account

</CardDescription>

</CardHeader>
<CardContent>

<Form {...form}>

<form onSubmit={form.handleSubmit(onSubmit)}
className="space-y-4">

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">

{/* Name input */}

<FormField

control={form.control}

name="name"

render={({ field }) => (

<FormItem>

<FormLabel>Full Name</FormLabel>

<FormControl>

<div className="relative">

<span className="absolute left-3 top-2.5 text-gray-400">

<User className="h-5 w-5" />

</span>
<Input

placeholder="John Doe"
className="pl-10"

57 | P a g e
 {...field}

disabled={loading}
/>

</div>
</FormControl>

<FormMessage />

</FormItem>

)}

/>

{/* Email input */}

<FormField

control={form.control}
name="email"

render={({ field }) => (

<FormItem>

<FormLabel>Email</FormLabel>

<FormControl>

<div className="relative">
<span className="absolute left-3 top-2.5 text-gray-400">

<Mail className="h-5 w-5" />

</span>

<Input

type="email"

placeholder="[email protected]"

className="pl-10"

58 | P a g e
 {...field}

disabled={loading}
/>

</div>
</FormControl>

<FormMessage />

</FormItem>

)}

/>

{/* Phone input */}

<FormField

control={form.control}
name="phone"

render={({ field }) => (

<FormItem>

<FormLabel>Phone Number</FormLabel>

<FormControl>

<div className="relative">
<span className="absolute left-3 top-2.5 text-gray-400">

<Phone className="h-5 w-5" />

</span>

<Input

placeholder="1234567890"

className="pl-10"
{...field}

59 | P a g e
 disabled={loading}

/>

</div>

</FormControl>
<FormMessage />

</FormItem>

)}

/>

{/* District input */}

<FormField

control={form.control}

name="district"

render={({ field }) => (

<FormItem>

<FormLabel>District</FormLabel>

<FormControl>

<div className="relative">

<span className="absolute left-3 top-2.5 text-gray-400">

<MapPin className="h-5 w-5" />

</span>

<Input

placeholder="Your district"
className="pl-10"

{...field}

disabled={loading}

60 | P a g e
 />

</div>

</FormControl>

<FormMessage />
</FormItem>

)}

/>

{/* State input */}

<FormField

control={form.control}

name="state"

render={({ field }) => (

<FormItem>

<FormLabel>State</FormLabel>

<FormControl>

<div className="relative">

<span className="absolute left-3 top-2.5 text-gray-400">

<MapPin className="h-5 w-5" />

</span>

<Input

placeholder="Your state"

className="pl-10"

{...field}

disabled={loading}
/>

61 | P a g e
 </div>

</FormControl>

<FormMessage />

</FormItem>
)}

/>

{/* Academic stream select */}

<FormField

control={form.control}

name="academicStream"

render={({ field }) => (

<FormItem>

<FormLabel>Academic Stream</FormLabel>

<Select

disabled={loading}

onValueChange={field.onChange}

value={field.value}

defaultValue={field.value}
>

<FormControl>

<SelectTrigger className="pl-10">

<span className="absolute left-3 top-2.5 text-gray-400">

<BookOpen className="h-5 w-5" />

</span>

<SelectValue placeholder="Select your stream" />

62 | P a g e
 </SelectTrigger>

</FormControl>

<SelectContent>

{academicStreams.map((stream) => (
<SelectItem key={stream} value={stream}>

{stream}

</SelectItem>

))}

</SelectContent>

</Select>

<FormMessage />

</FormItem>
)}

/>

{/* Gender select */}

<FormField

control={form.control}

name="gender"

render={({ field }) => (

<FormItem>

<FormLabel>Gender</FormLabel>

<Select
disabled={loading}

onValueChange={field.onChange}

value={field.value}

63 | P a g e
 defaultValue={field.value}

>

<FormControl>

<SelectTrigger>
<SelectValue placeholder="Select your gender" />

</SelectTrigger>

</FormControl>

<SelectContent>

{genders.map((gender) => (

<SelectItem key={gender} value={gender}>

{gender}

</SelectItem>
))}

</SelectContent>

</Select>

<FormMessage />

</FormItem>

)}

/>

{/* Password input */}

<FormField

control={form.control}
name="password"

render={({ field }) => (

<FormItem>

64 | P a g e
 <FormLabel>Password</FormLabel>

<FormControl>

<div className="relative">

<span className="absolute left-3 top-2.5 text-gray-400">

<Lock className="h-5 w-5" />

</span>

<Input

type="password"

placeholder="••••••••"

className="pl-10"
{...field}

disabled={loading}
/>

</div>

</FormControl>

<FormMessage />

</FormItem>

)}

/>

{/* Confirm password input */}

<FormField

control={form.control}
name="confirmPassword"

render={({ field }) => (

<FormItem>

65 | P a g e
 <FormLabel>Confirm Password</FormLabel>

<FormControl>

<div className="relative">

<span className="absolute left-3 top-2.5 text-gray-400">

<Lock className="h-5 w-5" />

</span>

<Input

type="password"

placeholder="••••••••"

className="pl-10"
{...field}

disabled={loading}
/>

</div>

</FormControl>

<FormMessage />

</FormItem>

)}

/>
</div>

{/* Terms and conditions checkbox */}

<FormField

control={form.control}
name="termsAccepted"

render={({ field }) => (

66 | P a g e
 <FormItem className="flex flex-row items-start space-x-3 space-
y-0 p-2">

<FormControl>

<Checkbox

checked={field.value}

onCheckedChange={field.onChange}

disabled={loading}
/>

</FormControl>

<div className="space-y-1 leading-none">

<FormLabel className="text-sm text-muted-foreground">

I agree to the{" "}

<Link to="/terms" className="text-primary hover:underline">

terms of use
</Link>{" "}

and{" "}

<Link to="/privacy" className="text-primary

hover:underline">

privacy policy

</Link>

</FormLabel>
<FormMessage />

</div>

</FormItem>
)}

/>

67 | P a g e
 {/* Submit button */}

<Button

type="submit"

className="w-full"
disabled={loading}
>

{loading ? "Creating Account..." : "Create Account"}

</Button>

</form>

</Form>

<div className="relative my-6">

<div className="absolute inset-0 flex items-center">

<Separator className="w-full" />

</div>

<div className="relative flex justify-center">

<span className="bg-card px-2 text-xs uppercase text-muted-

foreground">

Or continue with

</span>

</div>
</div>

{/* Google sign in button */}

<Button

variant="outline"

68 | P a g e
 className="w-full"

onClick={handleGoogleSignIn}
disabled={loading}
>

<img
src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg"
alt="Google" className="mr-2 h-4 w-4" />

Sign up with Google

</Button>
</CardContent>

<CardFooter className="flex justify-center">

<p className="text-sm text-muted-foreground">

Already have an account?{" "}

<Link to="/login" className="text-primary hover:underline">

Sign in

</Link>
</p>

</CardFooter>

</Card>

</div>

</main>

<Footer />

</div>

);
};

export default Signup;

69 | P a g e
BlogDetail.tsx

import React, { useState } from 'react';

import { useParams } from 'react-router-dom';

import Navbar from '@/components/Navbar';

import Footer from '@/components/Footer';

import SEO from '@/components/SEO';

import { Button } from '@/components/ui/button';

import {

Card,

CardContent,

CardDescription,
CardFooter,

CardHeader,

CardTitle
} from '@/components/ui/card';

import { Separator } from '@/components/ui/separator';

import CodePreview from '@/components/code/CodePreview';

import CodeCompiler from '@/components/code/CodeCompiler';

// Sample blog data

const blogs = {

blog1: {
title: "Understanding JavaScript Promises",

author: "John Developer",

70 | P a g e
 date: "2023-06-15",

category: "Programming",

coverImage: "https://images.unsplash.com/photo-1587620962725-
abab7fe55159?q=80&w=1000",
content: [

type: "text",
content: "JavaScript promises are objects representing the eventual
completion or failure of an asynchronous operation. They allow you to write
cleaner asynchronous code by chaining methods instead of nesting callbacks."

},

{
type: "code",

language: "javascript",
content: `// Creating a promise

const myPromise = new Promise((resolve, reject) => {

// Asynchronous operation

setTimeout(() => {
const success = true;

if (success) {

resolve("Operation completed!");

} else {

reject("Operation failed!");

}, 1000);
});

71 | P a g e
// Using the promise

myPromise
.then(result => {

console.log(result); // "Operation completed!"

})

.catch(error => {

console.error(error);
});`

},

type: "text",
content: "Promises can be in one of three states: pending, fulfilled, or
rejected. A promise is initially in the pending state and can change to either
fulfilled (resolved) or rejected."

},
{

type: "heading",

content: "Chaining Promises"

},

type: "text",

content: "One of the powerful features of promises is the ability to chain

them together for sequential asynchronous operations:"
},

{
type: "code",

72 | P a g e
 language: "javascript",

content: `// Promise chaining example

fetchUserData(userId)
.then(userData => {
return fetchUserPosts(userData.username);

})

.then(posts => {

console.log(posts);
return fetchPostComments(posts[0].id);

})

.then(comments => {

console.log(comments);
})

.catch(error => {

console.error("Error in the promise chain:", error);

});`

},

type: "heading",
content: "Try It Yourself"

},

type: "text",

content: "Use the code compiler below to practice working with promises:"

},

73 | P a g e
 type: "compiler",

language: "javascript",

defaultCode: `// Create a promise that resolves after 2 seconds

const delayedGreeting = new Promise((resolve, reject) => {
setTimeout(() => {

resolve("Hello, world!");

}, 2000);

});

// Use the promise

console.log("Promise is pending...");

delayedGreeting

.then(message => {
console.log("Promise resolved!");

console.log("Message:", message);

})
.catch(error => {

console.error("Promise rejected:", error);

});`
}

},

blog2: {

title: "CSS Grid Layout Made Simple",

author: "Jane Designer",

date: "2023-07-20",

74 | P a g e
 category: "Web Design",

coverImage: "https://images.unsplash.com/photo-1507721999472-
8ed4421c4af2?q=80&w=1000",
content: [

type: "text",

content: "CSS Grid Layout is a powerful system that allows for two-
dimensional layouts on the web. It makes complex layouts much easier to create
and maintain."
},

type: "code",
language: "css",

content: `.grid-container {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-gap: 20px;
padding: 20px;

}`
}

};

const BlogDetail = () => {

const { blogId } = useParams();

const [activeTab, setActiveTab] = useState('content');

75 | P a g e
 // Get blog data based on blogId

const blog = blogs[blogId as keyof typeof blogs];

if (!blog) {

return (

<div className="min-h-screen flex flex-col">

<Navbar />

<div className="flex-grow flex items-center justify-center">

<div className="text-center">

<h1 className="text-3xl font-bold mb-4">Blog Not Found</h1>

<p className="text-gray-600 mb-6">The blog post you're looking for

doesn't exist.</p>
<Button onClick={() => window.history.back()}>Go Back</Button>
</div>

</div>

<Footer />
</div>

);

return (

<div className="min-h-screen flex flex-col">

<SEO

title={`${blog.title} | Educational Platform`}

description={`Read about ${blog.title} on our educational platform.`}

76 | P a g e
 />

<Navbar />

<main className="flex-grow py-8 bg-gray-50 dark:bg-gray-900">

<div className="container mx-auto px-4">

<div className="max-w-4xl mx-auto">

{/* Cover image */}

<div className="rounded-lg overflow-hidden mb-8 h-64 md:h-96">

<img

src={blog.coverImage}

alt={blog.title}
className="w-full h-full object-cover"

/>

</div>

{/* Blog header */}

<div className="mb-8">

<h1 className="text-3xl md:text-4xl font-bold mb-4 dark:text-

white">{blog.title}</h1>

<div className="flex flex-wrap items-center text-gray-600 dark:text-

gray-400 mb-4">
<span className="mr-4">By {blog.author}</span>

<span className="mr-4">|</span>

<span className="mr-4">{blog.date}</span>
<span className="mr-4">|</span>

<span>{blog.category}</span>

</div>

77 | P a g e
 </div>

{/* Blog content */}

<Card className="mb-8">
<CardContent className="p-6">

{blog.content.map((section, index) => {

if (section.type === "text") {

return (

<p key={index} className="mb-6 dark:text-gray-200">

{section.content}

</p>

);
} else if (section.type === "heading") {
return (

<h2 key={index} className="text-2xl font-bold mt-8 mb-4

dark:text-white">
{section.content}

</h2>

);

} else if (section.type === "code") {

return (

<CodePreview
key={index}

code={section.content}

language={section.language}

expandable={section.content.split('\n').length > 10}

78 | P a g e
 />

);

} else if (section.type === "compiler") {

return (

<CodeCompiler
key={index}

defaultCode={section.defaultCode}

language={section.language}

title="Interactive Code Editor"

/>

);

}
return null;

})}

</CardContent>

</Card>

{/* Related blogs */}

<div className="mb-8">
<h3 className="text-xl font-bold mb-4 dark:text-white">Related
Articles</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">

{Object.keys(blogs)

.filter(id => id !== blogId)

.slice(0, 2)

.map(id => {

79 | P a g e
 const relatedBlog = blogs[id as keyof typeof blogs];

return (

<Card key={id} className="overflow-hidden hover:shadow-md

transition-shadow duration-300">
<div className="h-40 overflow-hidden">

<img

src={relatedBlog.coverImage}
alt={relatedBlog.title}
className="w-full h-full object-cover"

/>

</div>

<CardContent className="p-4">

<h4 className="font-bold mb-2 dark:text-

white">{relatedBlog.title}</h4>
<p className="text-sm text-gray-600 dark:text-gray-
400">{relatedBlog.date}</p>

</CardContent>

</Card>

);
})}

</div>

</div>

</div>

</div>

</main>

<Footer />

80 | P a g e
 </div>

);

};

export default BlogDetail;

BookDetail.tsx

import React from 'react';

import { useParams, Link } from 'react-router-dom';

import Navbar from '@/components/Navbar';

import Footer from '@/components/Footer';

import { Button } from '@/components/ui/button';

import { Tabs, TabsContent, TabsList, TabsTrigger } from

'@/components/ui/tabs';

import { ArrowLeft, Download, BookOpen, Share2, Bookmark, BookMarked }

from 'lucide-react';
import AdobePDFViewer from '@/components/AdobePDFViewer';

interface BookDetail {

id: string;

title: string;
author: string;

subject: string;

grade: string;

coverImage: string;

description: string;

81 | P a g e
 pdfUrl: string;

category: string;

chapters: { title: string; pdfUrl: string }[];

additionalDetails: {

publisher: string;

language: string;

publicationYear: string;

isbn: string;
pages: number;
};

// Mock data for the specific book - in a real app, you'd fetch from Firebase

const getMockBookDetail = (bookId: string): BookDetail => ({

id: bookId,

title: "Mathematics - NCERT Class 10",

author: "NCERT",

subject: "Mathematics",

grade: "Class 10",

coverImage: "https://ncert.nic.in/textbook/pdf/jemh1cc.jpg",

description: "The NCERT Class 10 Mathematics textbook covers extensive

topics for the CBSE curriculum including real numbers, polynomials, pair of
linear equations, quadratic equations, arithmetic progressions, triangles,
coordinate geometry, trigonometry, circles, constructions, areas, surface areas
and volumes, statistics and probability.",
pdfUrl: "https://previouspathshala.com/wp-content/uploads/2024/07/class10-
icse-sanskrit-2024-2.pdf",
category: "ncert",

82 | P a g e
 chapters: [

{ title: "Chapter 1: Real Numbers", pdfUrl:

"https://previouspathshala.com/wp-content/uploads/2024/07/class10-icse-
sanskrit-2024-2.pdf" },

{ title: "Chapter 2: Polynomials", pdfUrl: "https://previouspathshala.com/wp-

content/uploads/2024/07/class10-icse-sanskrit-2024-2.pdf" },
{ title: "Chapter 3: Pair of Linear Equations in Two Variables", pdfUrl:
"https://previouspathshala.com/wp-content/uploads/2024/07/class10-icse-
sanskrit-2024-2.pdf" },
{ title: "Chapter 4: Quadratic Equations", pdfUrl:
"https://previouspathshala.com/wp-content/uploads/2024/07/class10-icse-
sanskrit-2024-2.pdf" },

{ title: "Chapter 5: Arithmetic Progressions", pdfUrl:

"https://previouspathshala.com/wp-content/uploads/2024/07/class10-icse-
sanskrit-2024-2.pdf" },
{ title: "Chapter 6: Triangles", pdfUrl: "https://previouspathshala.com/wp-
content/uploads/2024/07/class10-icse-sanskrit-2024-2.pdf" },
],

additionalDetails: {

publisher: "National Council of Educational Research and Training

(NCERT)",

language: "English",

publicationYear: "2023",
isbn: "978-81-7450-630-6",

pages: 320,

},

});

const BookDetail = () => {

83 | P a g e
 const { category = "ncert", bookId = "" } = useParams<{ category: string;
bookId: string }>();
const [bookmarked, setBookmarked] = React.useState(false);

// In a real app, fetch the book data based on the ID

const book = getMockBookDetail(bookId);

const toggleBookmark = () => {

setBookmarked(!bookmarked);
};

return (

<div className="min-h-screen flex flex-col">

<Navbar />
<main className="flex-grow py-8 bg-gray-50 dark:bg-gray-900">

<div className="container mx-auto px-4 md:px-6">

{/* Navigation */}

<div className="mb-6">

<div className="flex items-center mb-4">

<Link

to={`/books/${category}`}

className="inline-flex items-center text-[#2563EB] dark:text-blue-

400 hover:underline"
>
<ArrowLeft size={18} className="mr-1" />

Back to {category === "ncert" ? "NCERT Books" : "Books"}

</Link>

84 | P a g e
 </div>

{/* Book Header Section */}

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">

<div className="md:col-span-1">

<div className="rounded-lg overflow-hidden shadow-md bg-white

dark:bg-gray-800 max-w-xs mx-auto">
<img
src={book.coverImage}

alt={book.title}
className="w-full h-auto object-cover"

/>

</div>

</div>

<div className="md:col-span-2">

<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-

2">

{book.title}

</h1>

<p className="text-lg text-primary dark:text-blue-400 mb-4">

{book.author}

</p>

<div className="flex flex-wrap gap-2 mb-4">

<span className="bg-primary/10 text-primary dark:bg-blue-900/20

dark:text-blue-400 rounded-full px-3 py-1 text-sm font-medium">

85 | P a g e
 {book.subject}

</span>

<span className="bg-primary/10 text-primary dark:bg-blue-900/20

dark:text-blue-400 rounded-full px-3 py-1 text-sm font-medium">
{book.grade}

</span>

</div>

<div className="prose prose-blue dark:prose-invert max-w-none

mb-6">

<p className="text-gray-700 dark:text-gray-300">

{book.description}

</p>

</div>

<div className="flex flex-wrap gap-3">

<Button className="flex items-center gap-2">

<Download size={18} />

Download PDF
</Button>

<Button variant="outline" className="flex items-center gap-2">

<Share2 size={18} />

Share
</Button>
<Button

variant="outline"

86 | P a g e
 className={`flex items-center gap-2 ${bookmarked ? 'bg-
primary/10 text-primary dark:bg-blue-900/20 dark:text-blue-400' : ''}`}
onClick={toggleBookmark}

>

{bookmarked ? (

<>

<BookMarked size={18} />

Bookmarked
</>

):(

<>

<Bookmark size={18} />

Bookmark
</>

)}

</Button>

</div>

</div>

</div>

{/* Additional Information and PDF Viewer Tabs */}

<Tabs defaultValue="view-book" className="mb-10">

<TabsList className="grid w-full grid-cols-3">

<TabsTrigger value="view-book" className="data-[state=active]:bg-

blue-50 dark:data-[state=active]:bg-blue-900/20">
View Book

</TabsTrigger>

87 | P a g e
 <TabsTrigger value="chapters" className="data-[state=active]:bg-
blue-50 dark:data-[state=active]:bg-blue-900/20">
Chapters

</TabsTrigger>

<TabsTrigger value="details" className="data-[state=active]:bg-

blue-50 dark:data-[state=active]:bg-blue-900/20">
Book Details

</TabsTrigger>

</TabsList>

<TabsContent value="view-book" className="pt-4">

<div className="rounded-lg overflow-hidden">

<AdobePDFViewer

pdfUrl={book.pdfUrl}
/>

</div>
</TabsContent>

<TabsContent value="chapters" className="pt-4">

<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-

6">

<h3 className="text-xl font-medium mb-4 dark:text-white">Table

of Contents</h3>

<ul className="space-y-3">

{book.chapters.map((chapter, idx) => (

<li key={idx}>

<Link

88 | P a g e
 to="#"

onClick={() => window.open(chapter.pdfUrl, '_blank')}

className="flex items-center gap-3 p-3 hover:bg-gray-100

dark:hover:bg-gray-700 rounded-md transition-colors"

>

<BookOpen size={18} className="text-primary dark:text-

blue-400" />

<span className="text-gray-800 dark:text-gray-

200">{chapter.title}</span>

</Link>

</li>

))}
</ul>

</div>

</TabsContent>

<TabsContent value="details" className="pt-4">

<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-

6">

<h3 className="text-xl font-medium mb-4 dark:text-

white">Additional Details</h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">

<div className="space-y-2">

<div className="flex justify-between border-b dark:border-gray-

700 pb-2">

<span className="text-gray-600 dark:text-gray-

400">Publisher</span>

<span className="text-gray-900 dark:text-white font-

medium">{book.additionalDetails.publisher}</span>

89 | P a g e
 </div>

<div className="flex justify-between border-b dark:border-gray-

700 pb-2">

<span className="text-gray-600 dark:text-gray-

400">Language</span>

<span className="text-gray-900 dark:text-white font-

medium">{book.additionalDetails.language}</span>
</div>

<div className="flex justify-between border-b dark:border-gray-

700 pb-2">

<span className="text-gray-600 dark:text-gray-

400">Publication Year</span>

<span className="text-gray-900 dark:text-white font-

medium">{book.additionalDetails.publicationYear}</span>
</div>

</div>

<div className="space-y-2">

<div className="flex justify-between border-b dark:border-gray-

700 pb-2">

<span className="text-gray-600 dark:text-gray-

400">ISBN</span>

<span className="text-gray-900 dark:text-white font-

medium">{book.additionalDetails.isbn}</span>

</div>

<div className="flex justify-between border-b dark:border-gray-

700 pb-2">

<span className="text-gray-600 dark:text-gray-

400">Pages</span>

<span className="text-gray-900 dark:text-white font-

medium">{book.additionalDetails.pages}</span>

90 | P a g e
 </div>

<div className="flex justify-between border-b dark:border-gray-

700 pb-2">

<span className="text-gray-600 dark:text-gray-

400">Category</span>

<span className="text-gray-900 dark:text-white font-medium

capitalize">{book.category}</span>
</div>

</div>

</div>

</div>

</TabsContent>
</Tabs>

</div>

</div>

</main>

<Footer />

</div>

);
};

export default BookDetail;

91 | P a g e
 SCREENSHOTS OF PROJECT

Home Page

92 | P a g e
Book Section

93 | P a g e
Quiz Section

94 | P a g e
Review Section

95 | P a g e
Blog Section

96 | P a g e
Exam Section

97 | P a g e
Login Section

98 | P a g e
 CONCLUSION

The Educational Website project marks the successful completion of an

important and innovative step toward enhancing the accessibility and
organization of academic resources for students, teachers, and educational
institutions. This project was driven by the goal of providing a centralized
platform where users could easily access previous year papers, comprehensive
notes, essential books, engaging quizzes, and educational blogs, all within a
secure and user-friendly environment. By leveraging modern technologies like
React.js, Tailwind CSS, and Firebase, the project successfully delivered a
dynamic, responsive, and interactive learning platform.
Throughout the development journey, React.js proved invaluable due to its
component-based structure, enabling clean separation of concerns and making
the application highly modular and maintainable. Tailwind CSS allowed rapid,
responsive design implementation while maintaining a polished and modern
visual appeal, essential for retaining user interest. Firebase played a crucial role
in handling authentication, real-time database management, and secure hosting,
ensuring that the platform remained both scalable and reliable.
The Educational Website also emphasized a seamless user experience by
incorporating features like light and dark mode switching, real-time data
fetching, and protected routes for authenticated users. These functionalities not
only improved the usability but also aligned the platform with modern web
application standards. The use of Visual Studio Code, Git, and GitHub ensured
a systematic development process, version control, and easy collaboration
possibilities for future improvements.
One of the major highlights of this project was the successful integration of a
strong authentication system, enabling secure sign-up, login, and access to
personalized features. Additionally, categorizing educational content into well-
organized sections like previous papers, notes, quizzes, and blogs ensured that
users could easily find the resources they needed without confusion. This logical
arrangement of content greatly enhances the efficiency of the platform and
provides a highly professional feel.

99 | P a g e
Furthermore, the platform was designed to be fully responsive, providing an
equally rich experience across devices — from desktops to tablets to
smartphones. This ensures that students and teachers can access educational
resources anytime, anywhere, thereby promoting continuous learning beyond
traditional classroom environments.
In conclusion, this project not only fulfilled its initial objectives but also
provided valuable learning experiences in full-stack development, UI/UX
design, cloud database management, and security implementation. It
demonstrated how modern web technologies can be combined effectively to
solve real-world problems in the education sector. The Educational Website
stands as a foundation for future expansion possibilities, such as adding video
tutorials, online tests, leaderboards, and discussion forums.
Overall, the project showcases the importance of a well-thought-out design, the
right choice of technology stack, and user-centric features in building a
successful educational platform. With continuous updates and community
engagement, this platform holds the potential to become a major resource hub
for students and educators alike.

100 | P a g e
 FUTURE SCOPE

While the Educational Website project has successfully achieved its initial
objectives, there is significant potential for further enhancement and expansion.
The growing demand for digital education resources and the increasing reliance
on online learning platforms open up numerous possibilities for this project to
evolve into a more comprehensive and impactful educational solution. Below
are several important areas where the project can be expanded and improved in
the future:
1. Integration of Video Lectures and Tutorials

Currently, the platform provides access to notes, previous year papers, books,
and blogs. A logical next step would be to integrate video content, such as
recorded lectures, tutorial videos, and live classes. Video-based learning has
proven highly effective in improving students' understanding of complex topics.
By partnering with educators or creating original content, the platform can offer
interactive video series categorized by subject, grade, and difficulty level. Live
webinar sessions with teachers could also foster real-time interaction between
students and instructors.
2. Addition of Online Test Series and Mock Exams

To enhance the preparation experience for competitive exams and regular

assessments, the platform can introduce online test series and full-length mock
exams. These tests can be time-bound and scored automatically, providing
students with instant feedback and performance analysis. Personalized test
recommendations based on previous performance could also be implemented to
make learning more adaptive and effective.
3. Leaderboards and Gamification

To keep students motivated and engaged, gamification techniques can be

introduced. Features such as quizzes with leaderboards, badges, and reward
systems for completing lessons or performing well on tests can make the
learning experience more enjoyable. Gamification promotes healthy
competition and can significantly increase user retention rates on the platform.
4. Enhanced Blog Section with Student Contributions

101 | P a g e
The current blog section provides valuable educational content. In the future,
students and educators could be allowed to contribute their own articles and
study tips after a moderation process. This would encourage community
participation and increase the diversity of content available on the website. A
commenting and rating system for blog posts could also foster more interaction
among users.
5. Advanced User Profiles and Progress Tracking

A more detailed user profile system could be developed where students can
track their learning progress, quiz scores, saved notes, bookmarked papers, and
completed courses. Progress dashboards with graphs and milestones would give
users insights into their academic journey, helping them set and achieve learning
goals more efficiently.
6. Mobile Application Development

While the website is fully responsive, developing a dedicated mobile

application would offer a more optimized experience for mobile users. Native
apps for Android and iOS could provide offline access to notes, papers, and
quizzes, push notifications for reminders, and smoother performance compared
to mobile browsers. Mobile apps would significantly extend the platform’s
reach and usability.
7. Integration with Artificial Intelligence (AI)

Artificial Intelligence can be introduced to provide personalized

recommendations to students based on their activity, interests, and performance.
AI-driven chatbots can assist users in quickly finding study materials,
suggesting quizzes to practice weak areas, and even answering frequently asked
questions about exams or subjects.
8. Collaboration with Schools and Colleges
The platform can be expanded to offer special dashboards for educational
institutions where they can upload their own study materials, quizzes, and
announcements. Schools and colleges could manage their students' performance
on the platform, thus bridging the gap between classroom learning and online
resources.

9. Multilingual Support

To cater to a wider audience across different regions, multilingual support could

be added to the platform. Offering content in multiple languages would make

102 | P a g e
the platform accessible to students from diverse linguistic backgrounds, greatly
increasing its impact and inclusivity.
10. Monetization and Scholarship Programs

While the basic resources can remain free, premium content like special courses,
mock exams, and exclusive study materials could be offered through
subscription models. In addition, scholarship programs and competitions could
be organized, rewarding top-performing students with recognition and prizes,
further promoting excellence in learning.

103 | P a g e
 REFRENCES

1. React Official Documentation

React – A JavaScript library for building user interfaces.
Retrieved from: https://react.dev/
2. Tailwind CSS Documentation
Tailwind CSS – Rapidly build modern websites without ever leaving
your HTML.
Retrieved from: https://tailwindcss.com/
3. Firebase Documentation
Firebase – Build and run successful apps.
Retrieved from: https://firebase.google.com/docs

4. React Router Documentation

React Router – Declarative routing for React applications.
Retrieved from: https://reactrouter.com/

5. GitHub Documentation
GitHub – Where the world builds software.
Retrieved from: https://docs.github.com/en
6. Visual Studio Code Documentation
Visual Studio Code – Code editing. Redefined.
Retrieved from: https://code.visualstudio.com/docs
7. MDN Web Docs
MDN Web Docs – Resources for developers, by developers.
Retrieved from: https://developer.mozilla.org/
8. W3Schools Online Web Tutorials
W3Schools – Web development tutorials for HTML, CSS, JavaScript,
and more.
Retrieved from: https://www.w3schools.com/

104 | P a g e