React JS

AN INTERNSHIP REPORT

Submitted by

PASUPATHY T 962821104064

in partial fulfilment for the award of the degree of

BACHELOR OF ENGINEERING
in

COMPUTER SCIENCE AND ENGINEERING

UNIVERSITY COLLEGE OF ENIGINEERING, NAGERCOIL

(A CONSTITUENT COLLEGE OF ANNA UNIVERSITY,

CHENNAI)

ANNA UNIVERSITY: CHENNAI 600 025

NOVEMBER 2024
CALL LETTER

i
ATTENDANCE CERTIFICATE

ii
CERTIFICATE

iii
 ABSTRACT

Internship Report: React.js Development at Pantech

This internship report provides a comprehensive account of my internship at

Pantech eLearning, where I focused on React.js web development. Throughout

the program, I gained extensive practical and theoretical knowledge of React.js

and other key front-end technologies, including HTML, CSS, JavaScript, and

Visual Studio Code. The internship emphasized developing dynamic and

responsive web applications, with a strong focus on front-end development using

React.js.The learning path combined theoretical knowledge and hands-on

experience, enabling me to master key React.js concepts such as components,

state management, props, lifecycle methods, and routing. I also explored

advanced topics like conditional rendering, event handling, and styling within

React applications. The program provided me with opportunities to apply my

skills by building real-world projects, further strengthening my understanding of

how to create interactive user interfaces and manage data effectively within

React.By the end of the internship, I was able to develop and deploy a fully

functional React-based web application, which consolidated my skills in building

dynamic and user-friendly web applications. This experience significantly

enhanced my problem-solving abilities, coding practices, and understanding of

front-end development, preparing me for real-world challenges in web

development with React.js.

iv
 TABLE OF CONTENTS

CHAPTER NO TITLE PAGE NO

CALL LETTER i

ATTENDANCE CERTIFICATE ii

CERTIFICATE iii

ABSTRACT iv

LIST OF FIGURES vii

LIST OF ABBREVIATION viii

I COMPANY PROFILE 1

1.1 COMPANY OVERVIEW 1

1.2 INNOVATION AND EXCELLENCE 1

1.3 RESEARCH AND TECHNOLOGICAL 2

ADVANCEMENT

1.4 COLLABORATIVE ALLIANCES 2

1.5 CORE MISSION STATEMENT 3

1.6 ACCOLADES AND MILESTONES 4

1.7 FUTURE ASPIRATIONS AND GOALS 6

1.8 SUMMARY AND OUTLOOK 7

II STUDY 8
2.1 INTRODUCTION TO WEB 8
DEVELOPMENT AND TOOLS

v
 2.2 BASIC WEB DEVELOPMENT PRACTICE 13

2.3 REACT BASICS 14

2.4 2.4 REACT COMPONENT AND STATE 15

2.5 REACT COMPONENT LIFECYCLE 16

AND FORMS

2.6 ADVANCED REACT CONCEPTS 19

2.7 REACT ROUTER , STYLING AND 20

ADVANCED FEATURES

III MY PROJECTS 24

3.1 INTRODUCTION TO EDHUB LITE – 24

A LEARNING PLATFORM

3.2 SYSTEM ARCHITECTURE 24

3.3 BLOCK DIAGRAM 25

3.4 PROJECT SETUP 26

3.5 PLANNING AND DEVELOPMENT 26

3.6 OUTPUT AND DISCUSSION 43

IV CONCLUSION AND FUTURE SCOPE 48

vi
 LIST OF FIGURES

FIGURE NO TITLE PAGE NO

3.1 Block Diagram 25

3.2 Initialization Commands 26

3.3 Folder Structure 26

3.4 Dependence Installation 26

3.5 Dashboard 44

3.6 Courses 44

3.7 Tasks 45

3.8 Quizzes 45

3.9 Score 46

vii
 LIST OF ABBREVIATIONS

HTML Hypertext and Markup Language

CSS Cascading Style Sheets

UI/UX User Interface / User Experience

DOM Document Object Model

SEO Search Engine Optimization

SPAs Single-Page Applications

PWAs Progressive Web Applications

CRM Customer Relationship Management

PR Pull Request

PNG Network Graphics Portable

SVG Scalable Vector Graphics

CDN Content Delivery Network

JPEG Joint Photographic Experts Group

API Application Programming Interface

viii
 CHAPTER 1

COMPANY PROFILE

1.1 COMPANY OVERVIEW

PANTECH E LEARNING is a renowned organization committed to

fostering knowledge and developing technical expertise through innovative
educational solutions. Focused on empowering learners with industry-relevant
skills, Pantech E Learning bridges the gap between theoretical knowledge and
practical application. Founded with the aim of equipping individuals for the
dynamic tech landscape, Pantech E Learning has grown into a leader in providing
tailored training programs and technical internships. Our core values—
excellence, integrity, and innovation—guide us in every aspect of our work. Our
mission is to cultivate tech talent by offering comprehensive training programs
that prepare individuals for successful careers in technology.

1.2 INNOVATION AND EXCELLENCE

At Pantech E Learning, innovation is at the core of our teaching methodology.

Our training programs integrate theoretical concepts with practical exercises,
offering a rich and immersive learning experience. The React.js Web
Development Internship is designed to empower participants with the skills to
build and manage modern, responsive front-end applications. This program
focuses on mastering React.js concepts such as component-based architecture,
state management, lifecycle methods, and client-side routing. Through hands-on
projects, participants learn how to develop dynamic user interfaces that provide
exceptional user experiences.

1
1.3 RESEARCH AND TECHNOLOGICAL ADVANCEMENT

Pantech E Learning emphasizes staying at the forefront of technology by

continuously updating course content to reflect industry trends.

Key Responsibilities and Projects in the React.js Web Development Internship

include:

• Dynamic UI Development: Participants build modular and reusable

components using React.js, ensuring scalability and maintainability.

• State Management: Practical training in managing application state using

React hooks like useState and useReducer.

• Routing and Navigation: Hands-on experience with React Router, enabling

the development of single-page applications (SPAs) with seamless
navigation.

• Responsive Design: Implementation of responsive web layouts using CSS

frameworks like Bootstrap and Material-UI.

• Capstone Project: Completion of a comprehensive project that synthesizes

learning, showcasing the development of a user-friendly, dynamic
application.

1.4 COLLABORATIVE LEARNING

Collaboration is an integral part of the learning environment at Pantech E

Learning. We foster team projects where participants work together to build
comprehensive applications. This teamwork hones not only technical skills but
also essential soft skills such as communication, teamwork, and project
management. Our partnerships with tech firms and industry experts enrich the
learning process by incorporating current industry practices into the curriculum.

2
1.5 CORE MISSION STATEMENT

Our mission is to empower aspiring developers with a solid foundation in full-

stack web development, ensuring they are ready to meet the demands of the tech
industry. We aim to produce professionals who can contribute effectively to the
development of software solutions, ensuring code quality and adhering to
industry best practices.

React.js Web Development Internship: Learning Objectives and Insights

The React.js Web Development internship focused on equipping participants

with practical skills and knowledge in front-end development using React.js.
Below are the key learning objectives achieved during the internship:

1. Front-End Development with React.js

• Component-Based Architecture: Developed modular and reusable

components, enabling scalable and maintainable user interfaces.

• State Management: Learned to manage state effectively using React hooks

like useState and useReducer.

• Lifecycle Management: Applied React lifecycle methods, such as

useEffect, for handling side effects like data fetching and cleanup.

• Client-Side Routing: Implemented navigation and dynamic routing in

single-page applications (SPAs) using React Router.

• Responsive Design: Built responsive and interactive user interfaces,

enhancing user experience with CSS frameworks like Bootstrap and
Material-UI.

2. Styling and User Interface Enhancements

• Gained hands-on experience in styling React components using:

3
 • CSS Modules for scoped and maintainable styles.

• Styled-Components for defining dynamic and reusable styles.

• Focused on creating accessible and visually appealing user interfaces.

3. Application Features and Real-World Projects

• Participated in the development of projects incorporating:

• Dynamic rendering of components and lists.

• Conditional rendering using React’s ternary operators and short-
circuit evaluations.
• Form handling with controlled components and validation logic.

• Gained insights into deploying SPAs to local servers for testing and
debugging purposes.

4. Professional Growth and Collaboration

• Enhanced problem-solving skills by debugging and resolving UI-related

issues.

• Learned to collaborate effectively in a team, contributing to project

planning and implementation phases.

• Gained familiarity with version control using Git for managing codebases
and collaborative workflows.

1.6 LEARNING OUTCOMES AND SKILLS GAINED

During the React.js Web Development Internship, the following skills and
outcomes were achieved:

4
1. Technical Proficiency in Front-End Development

• Gained hands-on expertise in building dynamic, interactive user interfaces

using React.js.

• Mastered key React concepts, including:

• Component-based architecture for modular development.

• State and lifecycle management with React hooks like useState and
useEffect.

• Client-side routing with React Router for single-page applications

(SPAs).

• Enhanced design skills by implementing responsive layouts with CSS

frameworks like Material-UI and Bootstrap.

2. Improved Problem-Solving Abilities

• Tackled complex UI challenges such as conditional rendering, form

validation, and managing component states.

• Developed debugging skills using tools like React DevTools and browser
consoles to resolve issues effectively.

3. Hands-On Project Experience

• Gained experience in the development lifecycle by:

• Planning and implementing functional components.

• Integrating routing, forms, and dynamic rendering into React-based

applications.

• Testing and debugging applications to ensure a smooth user

experience.
5
 • Delivered projects that simulated real-world front-end development
workflows, including deployment to local environments for testing.

4. Enhanced Collaboration Skills

• Collaborated on project tasks, applying effective communication and

teamwork skills.

• Gained familiarity with version control using Git, working with branches,
and managing code repositories in a team environment.

5. Insights into Real-World Development

• Understood the importance of user-centric design and responsive interfaces

in modern web development.

• Learned to adapt to industry practices through exposure to real-world

scenarios and project-based learning.

1.7 SERVICES OFFERED BY PANTECH E LEARNING

1. Internships and In-Depth Training Programs: Internship programs are

designed to provide immersive experiences in various tech domains,
including Java Full Stack Development, IoT, and AI.

2. Hands-On Workshops: Interactive workshops that focus on practical, real-

world applications of cutting-edge technologies.

3. Capstone Projects: Comprehensive projects that simulate real-world

problems, enabling participants to showcase their skills and build
impressive portfolios.

4. Customized Training Solutions: Tailored training programs for academic

institutions and corporate clients to meet specific learning needs.

6
 5. Placement Assistance: We provide support in building resumes, preparing
for technical interviews, and connecting participants with potential
employers.

1.8 FUTURE ASPIRATIONS AND GOALS

Pantech E Learning is committed to continuous improvement and expansion of

our offerings. Our goal is to strengthen our position as a top choice for tech
education by introducing new courses that cover emerging technologies like
cloud computing, machine learning, and DevOps. We also aim to build strategic
alliances with more technology partners to provide our learners with direct
industry exposure. Future initiatives include offering placement training to
enhance job readiness and organizing hackathons to encourage innovation.

1.9 SUMMARY AND OUTLOOK

In conclusion, Pantech E Learning is dedicated to nurturing future tech

professionals by offering comprehensive and practical training programs. Our
strong foundation in innovation, research, and a collaborative learning
environment positions us as a trusted partner for career growth in technology. By
constantly updating our course content to align with industry trends, we ensure
our learners are equipped to face the challenges of the evolving tech landscape
confidently.

7
 CHAPTER 2

STUDY

2.1 INTRODUCTION TO WEB DEVELOPMENT AND TOOLS

2.1.1 FRONT-END DEVELOPMENT

Front-end development is crucial in building visually appealing and

interactive websites. It focuses on crafting the user interface (UI) and ensures the
user has a seamless experience when navigating a website or application.

2.1.2 VSCODE INTRODUCTION

Visual Studio Code (VSCode) is one of the most widely used code editors
among web developers. Its powerful features like IntelliSense (auto-completion
of code), integrated terminal, Git support, and a vast library of extensions make
it a favorite choice for both beginners and professionals.

Key Features of VSCode:

• Syntax Highlighting: VSCode supports various programming languages

and provides syntax highlighting, which helps developers easily
distinguish between different types of code.

• Integrated Terminal: The built-in terminal allows developers to run

commands directly within VSCode without needing to switch to a separate
terminal window.

• Git Integration: With built-in Git support, VSCode makes version control
management simple, showing changes in your code and allowing for easy
commits and push operations.

8
 • Extensions and Themes: Extensions for additional functionality (like
linting, debugging, and theme customization) and themes for personalized
code appearance help developers enhance productivity.

2.1.3 REACT INTRODUCTION AND INSTALLATION

React is a JavaScript library for building user interfaces, especially for

dynamic web applications where content changes frequently. React allows
developers to build reusable components, making it easier to manage complex
user interfaces.

Installation of React: To begin working with React, you need to install Node.js
and npm (Node Package Manager) first. Then, use the create-react-app command
to generate a new React project:

npx create-react-app my-app

cd my-app

npm start

This will create a basic project structure, and running npm start will launch a local
development server to view your app in the browser.

2.1.4 HTML BASICS AND USAGE

HTML (Hypertext Markup Language) is the foundational language used

for creating the structure of web pages. It defines the elements that display on a
webpage, such as headings, paragraphs, images, links, and lists.

2.1.5 HTML SYNTAX AND USES

HTML is made up of elements, which are defined by tags. These elements are
used to structure the page, and each element can have attributes that provide
additional information.

9
Basic HTML Syntax:

<!DOCTYPE html>

<html>

<head>

<title>My First Page</title>

</head>

<body>

<h1>Welcome to My Website</h1>

<p>This is a paragraph of text.</p>

</body>

</html>

In this example:

• <!DOCTYPE html> declares the document type and version.

• The <html> tag encapsulates all the content on the page.

• The <head> tag contains metadata, like the title.

• The <body> tag holds the content that is visible to users.

2.1.6 CSS STYLING AND LAYOUT

CSS (Cascading Style Sheets) is used to control the presentation of HTML

elements. It allows you to set styles like colors, fonts, spacing, and layout. Proper
CSS usage can significantly enhance the visual appeal and usability of web pages.

2.1.7 CSS INTRODUCTION, TYPES, AND OVERVIEW

CSS can be applied to HTML documents in three primary ways:

10
 • Inline CSS: Applied directly within HTML tags using the style attribute.

• Internal CSS: Placed in a <style> block inside the <head> section of the
HTML document.

• External CSS: Placed in separate .css files that are linked to the HTML
document.

Example:

<head>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

</style>

</head>

CSS can target HTML elements using selectors:

• Element Selector: Targets specific HTML elements like h1, p, etc.

• Class Selector: Targets elements with a particular class (e.g., .class-name).

• ID Selector: Targets elements with a specific ID (e.g., #unique-id).

2.1.8 JAVASCRIPT BASICS

JavaScript is a programming language that adds interactivity to web pages. It

allows you to manipulate HTML elements, handle user input, and create dynamic
content.

11
2.1.9 JAVASCRIPT INTRODUCTION AND OVERVIEW

JavaScript is essential for client-side scripting, allowing developers to create

interactive elements on a page. For example, you can use JavaScript to:

• Respond to button clicks or form submissions.

• Modify the content of a webpage dynamically without reloading.

• Create animations, games, or interactive maps.

Example:

let message = "Hello, World!";

alert(message);

2.1.10 JAVASCRIPT VS. REACT

JavaScript is the fundamental language used for building web applications, but
React is a specialized library for developing dynamic user interfaces. While
JavaScript is used for manipulating the DOM directly, React helps create
efficient, reusable components that automatically update when data changes,
simplifying complex UI

2.1.11 DOM MANIPULATION

Used vanilla JavaScript to manipulate DOM elements:

document.getElementById('btn').addEventListener('click', () => {

alert('Button Clicked');

});

2.1.12 EVENTS AND ES6 FEATURES

Applied ES6 syntax like template literals and arrow functions:

12
const greet = (name) => `Hello, ${name}!`;

console.log(greet('World'));

2.2 BASIC WEB DEVELOPMENT PRACTICE

2.2.1 HTML AND CSS FOR SIMPLE WEBPAGES

In this section, we will apply HTML and CSS to create a simple webpage layout.
For example, we can build a page with a header, main content area, and footer.

Example Layout:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Simple Webpage</title>

<style>

body { font-family: Arial, sans-serif; }

header { background-color: #4CAF50; color: white; padding: 20px; }

footer { background-color: #333; color: white; padding: 10px; text-align:

center; }

</style>

</head>

<body>
13
 <header><h1>Welcome to My Webpage</h1></header>

<main>

<p>This is the main content area of the webpage.</p>

</main>

<footer><p>Footer Information</p></footer>

</body>

</html>

2.3 REACT BASICS

2.3.1 INTRODUCTION TO REACT

React is a JavaScript library for building user interfaces. Its component-based

structure enhances reusability and development efficiency.

2.3.2 ADVANTAGES OF REACT

• Virtual DOM: Faster UI rendering.

• Reusable Components: Modular design.

• Community Support: A wealth of resources and tools.

2.3.3 REACT VS. OTHER FRAMEWORKS

2.3.3.1 REACTJS VS. ANGULAR

• React is a library; Angular is a complete MVC framework.

• React requires external libraries for routing, while Angular has built-in
tools.

14
2.3.3.2 REACTJS VS. VUEJS

React’s virtual DOM is optimized for large-scale applications, whereas Vue is

beginner-friendly and easier to integrate with small projects.

2.4 REACT COMPONENTS AND STATE

2.4.1 FUNCTIONAL VS. CLASS COMPONENTS

2.4.1.1 FUNCTIONAL COMPONENTS

Simpler and more concise:

const Greeting = ({ name }) => <h1>Hello, {name}</h1>;

2.4.1.2 CLASS COMPONENTS

Includes lifecycle methods:

class Greeting extends React.Component {

render() {

return <h1>Hello, {this.props.name}</h1>;

2.4.2 PROPS AND STATE

2.4.2.1 USING PROPS

Passed data from parent to child components:

const Child = ({ message }) => <p>{message}</p>;

2.4.2.2 USING STATE

Managed mutable data within components:

15
const Counter = () => {

const [count, setCount] = React.useState(0);

return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;

};

2.5 REACT COMPONENT LIFECYCLE AND FORMS

2.5.1 LIFECYCLE METHODS

Lifecycle methods in React allow developers to execute code during specific

phases of a component's lifecycle. These phases include mounting, updating, and
unmounting.

2.5.1.1 COMPONENTDIDMOUNT

This method is invoked immediately after a component is mounted (inserted into

the DOM). It is used for initializing processes such as fetching data, subscribing
to events, or interacting with APIs. In functional components, this can be
achieved using the useEffect hook:

useEffect(() => {

fetch('/api/data')

.then((res) => res.json())

.then((data) => setData(data));

}, []);

16
2.5.1.2 COMPONENTWILLUNMOUNT

Called just before a component is unmounted and destroyed. This method is

primarily used for cleanup activities such as clearing timers, canceling API calls,
or removing event listeners. Using useEffect, it looks like this:

useEffect(() => {

const timer = setInterval(() => console.log('Tick'), 1000);

return () => {

clearInterval(timer);

};

}, []);

2.5.2 FORMS IN REACT

Forms are essential for capturing user input. React manages form inputs through
controlled components, where the state of the input is linked to React's state.

2.5.2.1 CONTROLLED COMPONENTS

In controlled components, input fields derive their values from React state:

const [name, setName] = useState('');

const handleSubmit = (e) => {

e.preventDefault();

console.log('Submitted name:', name);

};

return (

<form onSubmit={handleSubmit}>
17
 <input

type="text"

value={name}

onChange={(e) => setName(e.target.value)}

/>

<button type="submit">Submit</button>

</form>

);

2.5.2.2 VALIDATION

React allows form validation either manually or with libraries like Formik or
React Hook Form:

const handleSubmit = (e) => {

e.preventDefault();

if (name === '') {

alert('Name is required');

} else {

console.log('Form submitted successfully');

};

18
2.6 ADVANCED REACT CONCEPTS

2.6.1 CONDITIONAL RENDERING

React offers flexibility to render components dynamically based on conditions.

2.6.1.1 TERNARY OPERATORS

Ternary operators are used for concise conditional rendering:

{isLoggedIn ? <Dashboard /> : <Login />}

2.6.1.2 SHORT-CIRCUIT EVALUATION

Short-circuit evaluation renders content if a condition is true, making the code

more readable:

{errorMessage && <p>{errorMessage}</p>}

2.6.2 LISTS AND KEYS

Rendering lists dynamically is common in React, and using unique keys ensures
efficient updates:

const items = ['React', 'Vue', 'Angular'];

items.map((item, index) => <li key={index}>{item}</li>);

2.6.3 CONTEXT API

The Context API is used for state management in applications to avoid prop
drilling:

const UserContext = React.createContext();

const App = () => {

const [user, setUser] = useState({ name: 'John' });

return (
19
 <UserContext.Provider value={user}>

<Dashboard />

</UserContext.Provider>

);

};

2.7 REACT ROUTER, STYLING, AND ADVANCED FEATURES

2.7.1 REACT ROUTER

React Router is a library for handling navigation in React applications, enabling

the development of single-page applications (SPAs).

2.7.1.1 DYNAMIC ROUTING

Dynamic routing allows defining different routes for an application:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

return (

<Router>

<Switch>

<Route path="/" exact component={Home} />

<Route path="/dashboard" component={Dashboard} />

<Route path="/profile/:id" component={Profile} />

</Switch>

</Router>

);

20
2.7.1.2 NAVIGATION

Navigation between routes is handled using the Link component:

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

<Link to="/dashboard">Go to Dashboard</Link>

2.7.2 STYLING IN REACT

Styling in React can be done using various methods, including CSS, inline styles,
CSS Modules, and styled-components.

2.7.2.1 CSS MODULES

CSS Modules allow for scoped styling:

import styles from './Button.module.css';

<button className={styles.primary}>Click Me</button>;

2.7.2.2 STYLED-COMPONENTS

Styled-components enable defining component-specific styles using template

literals:

import styled from 'styled-components';

const Button = styled.button`

background-color: blue;

color: white;

padding: 10px;

`;

<Button>Click Me</Button>;

21
2.7.3 ADVANCED FEATURES

2.7.3.1 STATE MANAGEMENT

React Context API and external libraries like Redux can manage global states
efficiently. Context API example:

const ThemeContext = React.createContext('light');

const App = () => (

<ThemeContext.Provider value="dark">

<ThemedComponent />

</ThemeContext.Provider>

);

2.7.3.2 CODE SPLITTING

Using React.lazy and Suspense, components are loaded only when needed:

const LazyComponent = React.lazy(() => import('./LazyComponent'));

<Suspense fallback={<div>Loading...</div>}>

<LazyComponent />

</Suspense>;

2.7.3.3 AUTHENTICATION

Firebase or libraries like Auth0 can handle authentication. Firebase example:

import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';

const auth = getAuth();

signInWithEmailAndPassword(auth, email, password)

22
.then((userCredential) => console.log('Signed in:', userCredential))

.catch((error) => console.error(error));

23
 CHAPTER 3

MY PROPOSAL

EDUHUB LITE - A LEARNING PLATFORM

3.1 INTRODUCTION

EduHub Lite is a React-based educational platform designed to provide a

seamless learning experience for students. The platform serves as a centralized
hub where users can access various educational features, including courses, tasks,
and quizzes. Designed with a user-centric approach, EduHub Lite emphasizes
intuitive navigation, responsive design, and dynamic content delivery, making it
an effective solution for online learning.

This report specifically details the phased development of the Quizzes Feature,
a core component of EduHub Lite. The Quizzes Feature enables users to attempt
quizzes, answer multiple-choice questions, and receive instant feedback and
automated scoring. It aims to enhance learning through interactive assessments,
empowering students to evaluate their progress in a structured and engaging
manner.

3.2 SYSTEM ARCHITECTURE

The system architecture is based on a React.js frontend, utilizing React Router

for navigation and component-based architecture for modularity. The core
architecture includes:

1. Navigation:

• Centralized navigation using a Navbar component.

• Dynamic routing using react-router-dom.

24
 2. Page Management:

• Dedicated components for each page: Dashboard, Courses, Tasks,

and Quizzes.

3. Styling and State Management:

• Local state managed using useState.

• Basic styling via custom CSS.

4. Quizzes Logic:

• Quiz data stored in a local JSON object.

• Dynamic question rendering and score calculation.

3.3 BLOCK DIAGRAM

A basic block diagram for the EduHub Lite could include:

Fig 3.1 Block Diagram

25
3.4 PROJECT SETUP

ENVIRONMENT SETUP:

3.4.1 INITIALIZE THE PROJECT:

Fig 3.2 Initialization Commands

3.4.2 FOLDER STRUCTURE:

Fig 3.3 Folder Structure

3.4.3 DEPENDENCIES:
Install react-router-dom for routing

Fig 3.4 Dependence Installation

26
3.5 PLANNING AND DEVELOPMENT

3.5.1 NAVBAR COMPONENT

Objective:

Create a reusable, responsive navigation bar to link to all primary pages of the
application.

Features:

• Display links to Dashboard, Courses, Tasks, and Quizzes.

• Highlight the active page.

• Responsive design to support mobile and desktop views.

Steps:

1. Design the Navbar layout using Flexbox or CSS Grid.

2. Use react-router-dom's <Link> to enable client-side routing.

3. Add active class styling for the currently selected route using
useLocation.

4. Implement a collapsible menu for mobile screens.

Code Structure:

• File: Navbar.jsx

• Styling: Navbar.css

Code: Navbar.jsx

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

import './Navbar.css';

const Navbar = () => {

27
 const location = useLocation();

return (

<nav className="navbar">

<div className="navbar-container <Link to="/" className={`navbar-brand

${location.pathname === '/' ? 'active' : ''}`}

EduHub

</Link>

<div className="navbar-links">

<Link to="/" className={location.pathname === '/' ? 'active' :

''}>Dashboard</Link>

<Link to="/courses" className={location.pathname === '/courses' ?

'active' : ''}>Courses</Link>

<Link to="/tasks" className={location.pathname === '/tasks' ? 'active' :

''}>Tasks</Link>

<Link to="/quizzes" className={location.pathname === '/quizzes' ?

'active' : ''}>Quizzes</Link>

</div>

</div>

</nav>

);

};

export default Navbar;

28
3.5.2 DASHBOARD PAGE

Objective:

Provide users with a summary of their activity, including tasks, courses, and
quizzes progress.

Features:

• Display widgets summarizing key metrics (e.g., completed tasks, quiz

scores).

• Include quick links to access detailed pages.

Steps:

1. Design a grid layout for dashboard widgets.

2. Fetch user activity data (mock data for now, API in the future).

3. Use useState for managing state and conditional rendering.

Code Structure:

• File: Dashboard.jsx

• Styling: Dashboard.css

Code : Dashboard.jsx

import './Dashboard.css';

const Dashboard = () => {

const widgets = [

{ id: 1, title: 'Completed Tasks', value: 12 },

{ id: 2, title: 'Active Courses', value: 5 },

{ id: 3, title: 'Quiz Attempts', value: 3 },

29
 ];

return (

<div className="dashboard">

<h1 className="dashboard-title">Welcome to EduHub</h1>

<div className="dashboard-widgets">

{widgets.map((widget) => (

<div key={widget.id} className="widget">

<h3>{widget.title}</h3>

<p>{widget.value}</p>

</div>

))}

</div>

</div>

);

};

export default Dashboard;

CSS: Dashboard.css

.dashboard {

padding: 20px;

.dashboard-title {

30
 font-size: 2rem;

margin-bottom: 20px;

.dashboard-widgets {

display: flex;

justify-content: space-around;

gap: 20px;

.widget {

background-color: white;

padding: 20px;

border-radius: 8px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

text-align: center;

3.5.3 COURSES PAGE

Objective:

List all available courses for the user with options to view course details.

Features:

• Display course names and short descriptions.

• Link to individual course detail pages.

31
Steps:

1. Use a card layout to present courses in a grid format.

2. Store courses data in a JSON or mock API.

3. Add a "View Details" button for each course linking to the course detail
page.

Code Structure:

• File: Courses.jsx

• Styling: Courses.css

Code: Courses.jsx

import './Courses.css';

const Courses = () => {

const courses = [

{ id: 1, title: 'React Basics', description: 'Learn the basics of React.' },

{ id: 2, title: 'Advanced React', description: 'Dive deeper into React

concepts.' },

];

return (

<div className="courses">

<h1>Courses</h1>

<div className="course-list">

{courses.map((course) => (

<div key={course.id} className="course-card">

32
 <h3>{course.title}</h3>

<p>{course.description}</p>

<button>View Details</button>

</div>

))}

</div>

</div>

);

};

export default Courses;

3.5.4 TASKS PAGE

Objective:

Provide a task management interface where users can view, add, and mark tasks
as complete.

Features:

• Task list display with checkboxes for marking completion.

• Add new tasks with a form input.

Steps:

1. Design a vertical list layout for tasks.

2. Use useState to manage task additions and completion status.

3. Implement conditional styling for completed tasks (e.g., strikethrough

text).
33
Code Structure:

• File: Tasks.jsx

• Styling: Tasks.css

Code: Tasks.jsx

import { useState } from 'react';

import './Tasks.css';

const Tasks = () => {

const [tasks, setTasks] = useState([

{ id: 1, text: 'Complete React project', completed: false },

{ id: 2, text: 'Study for quiz', completed: true },

]);

const [newTask, setNewTask] = useState('');

const addTask = () => {

if (newTask.trim()) {

setTasks([...tasks, { id: Date.now(), text: newTask, completed: false }]);

setNewTask('');

};

const toggleTaskCompletion = (id) => {

34
 setTasks(tasks.map(task => task.id === id ? { ...task,
completed: !task.completed } : task));

};

return (

<div className="tasks">

<h1>Tasks</h1>

<div className="task-list">

{tasks.map(task => (

<div key={task.id} className="task">

<input

type="checkbox"

checked={task.completed}

onChange={() => toggleTaskCompletion(task.id)}

/>

<span className={task.completed ? 'completed' : ''}>{task.text}</span>

</div>

))}

</div>

<input

type="text"

value={newTask}

35
 onChange={(e) => setNewTask(e.target.value)}

placeholder="New Task"

/>

<button onClick={addTask}>Add Task</button>

</div>

);

};

export default Tasks;

3.5.5 QUIZZES PAGE

Objective:

List quizzes for the user to attempt and provide interactive quiz-taking
functionality.

Features:

• Display a list of quizzes with start buttons.

• Load quiz questions dynamically on selection.

• Show results and evaluations after submission.

Steps:

1. Design a list view for available quizzes.

2. Use a nested component (QuizEvaluation) for handling questions and

scoring.

3. Store quiz data in a local JSON file or mock API.

36
Code Structure:

• File: Quizzes.jsx, QuizEvaluation.jsx

• Styling: Quizzes.css

Code: Quizzes.jsx

import { useState } from 'react';

import '../styles/Quizzes.css';

const quizzes = [

id: 1,

title: 'JavaScript Basics',

questions: [

{ question: 'What is "null" in JavaScript?', options: ['Object', 'Undefined',

'Number', 'Boolean'], correct: 0 },

{ question: 'What is the keyword to declare a variable?', options: ['var', 'let',

'const', 'All of the above'], correct: 3 },

],

},

id: 2,

title: 'React Basics',

questions: [

37
 { question: 'What is JSX?', options: ['JavaScript XML', 'JSON', 'JavaScript
Syntax', 'None'], correct: 0 },

{ question: 'What is a state in React?', options: ['Local data storage', 'CSS

property', 'HTML attribute', 'All of the above'], correct: 0 },

],

},

id: 3,

title: 'HTML Basics',

questions: [

{ question: 'What does HTML stand for?', options: ['Hyperlinks and Text
Markup Language', 'Home Tool Markup Language', 'Hyper Text Markup
Language', 'None'], correct: 2 },

{ question: 'Which tag is used for the largest heading?', options: ['<h1>',
'<h6>', '<heading>', '<header>'], correct: 0 },

],

},

id: 4,

title: 'CSS Basics',

questions: [{ question: 'What does CSS stand for?', options: ['Colorful Style
Sheets', 'Cascading Style Sheets', 'Computer Style Sheets', 'Creative Style
Sheets'], correct: 1 },
38
 { question: 'Which property is used to change the background color?', options:
['bgcolor', 'color', 'background-color', 'background'], correct: 2 },

],

},

id: 5,

title: 'General Knowledge',

questions: [

{ question: 'What is the capital of France?', options: ['Berlin', 'Paris', 'Madrid',

'Rome'], correct: 1 },

{ question: 'What is the square root of 64?', options: ['6', '7', '8', '9'], correct:
2 },

],

},

];

const Quizzes = () => {

const [activeQuiz, setActiveQuiz] = useState(null);

const [answers, setAnswers] = useState({});

const [score, setScore] = useState(null);

const startQuiz = (quizId) => {

setActiveQuiz(quizzes.find((quiz) => quiz.id === quizId));

setAnswers({});
39
 setScore(null);

};

const handleAnswer = (questionIndex, optionIndex) => {

setAnswers({ ...answers, [questionIndex]: optionIndex });

};

const submitQuiz = () => {

let calculatedScore = 0;

activeQuiz.questions.forEach((q, i) => {

if (answers[i] === q.correct) {

calculatedScore += 1;

});

setScore(calculatedScore);

};

return (

<div className="quizzes">

{!activeQuiz ? (

<>

<h1 className="quizzes-title">Available Quizzes</h1>

<ul className="quiz-list">

{quizzes.map((quiz) => (

40
 <li key={quiz.id} className="quiz-item">

<h3>{quiz.title}</h3>

<button onClick={() => startQuiz(quiz.id)}>Start Quiz</button>

</li>

))}

</ul>

</>

):(

<>

<h1 className="quiz-title">{activeQuiz.title}</h1>

<div className="quiz-questions">

{activeQuiz.questions.map((q, index) => (

<div key={index} className="quiz-question">

<p>{q.question}</p>

<div className="quiz-options">

{q.options.map((option, i) => (

<label key={i}>

<input

type="radio"

name={`question-${index}`}

value={i}

41
 checked={answers[index] === i}

onChange={() => handleAnswer(index, i)}

/>

{option}

</label>

))}

</div>

</div>

))}

</div>

<button onClick={submitQuiz} className="submit-button">

Submit Quiz

</button>

{score !== null && (

<div className="quiz-result">

<h2>Your Score: {score}/{activeQuiz.questions.length}</h2>

<button onClick={() => setActiveQuiz(null)}>Go Back</button>

</div>

)}

</>

)}

42
 </div>

);

};

export default Quizzes;

3.5.6 NAVIGATION PLAN

Page Path Navbar Link Text

Dashboard / Dashboard
Courses /courses Courses
Tasks /tasks Tasks
Quizzes /quizzes Quizzes

3.5.7 TIMELINE

Task Estimated Duration

Create Navbar 0.5 day
Develop Dashboard Page 1 day
Develop Courses Page 1 day
Develop Tasks Page 1 day

Develop Quizzes Page 1.5 days

Styling and Responsiveness 2 days

43
3.6 OUTPUT AND DISCUSSION

3.6.1 OUTPUT

EduHub Lite is a fully functional React-based educational platform featuring a

responsive Navbar and core pages: Dashboard, Courses, Tasks, and Quizzes.

• Dashboard: Summarizes user activities (tasks, courses, quiz scores).

Fig 3.5 Dashboard

44
• Courses: Displays available courses with descriptions.

Fig 3.6 Courses

• Tasks: Allows users to view, add, and mark tasks as complete.

45
 Fig 3.7 Tasks

• Quizzes: Lists quizzes, evaluates user responses, and provides instant

scores.

Fig 3.8 Quizzes

Fig 3.9 Score

46
3.6.2 DISCUSSION

Achievements:

• Modular design ensures maintainability.

• Intuitive UI with responsive components.

• The Quizzes feature enhances user engagement with dynamic evaluation.

Challenges:

• Initial state management issues resolved with useState.

• Mock data highlights the need for future API integration.

3.6.3 FUTURE ENHANCEMENTS:

1. Backend integration for real-time data.

2. Authentication for personalization.

3. Enhanced UI and analytics for better user experience.

EduHub Lite lays a scalable foundation for a comprehensive educational

platform.

47
 CHAPTER 4

CONCLUSION AND FUTURE SCOPE

FUTURE ENHANCEMENTS FOR EDUHUB LITE

To improve user experience, scalability, and functionality, several future

enhancements can be implemented for EduHub Lite:

1. User Authentication and Profiles

Introduce a secure login system with role-based access (e.g., students and
administrators). Each user will have a personalized profile with their activity
history and performance analytics.

Benefits:

• Enhanced data security.

• Personalized experience with progress tracking.

2. Real-Time Quiz Feedback

Provide immediate feedback for each question during quizzes, explaining

the correct answer and rationale.

Benefits:

• Encourages learning and understanding.

• Reduces the gap between question and feedback for users.

3. Course Management System

Add detailed course pages where educators can upload content, manage
modules, and provide assignments. Students can track their progress and interact
with course materials.

48
Benefits:

• Supports self-paced learning.

• Facilitates better course organization.

4. Interactive Task Management

Enhance the task feature to include deadlines, reminders, and priority

levels. Add a calendar view for better visualization of upcoming tasks.

Benefits:

• Improves time management for users.

• Keeps users engaged and organized.

5. Advanced Quiz Features

• Add timer functionality for quizzes.

• Enable dynamic question generation from a question bank.
• Allow users to bookmark or flag questions for review.

Benefits:

• Simulates exam-like conditions.

• Offers diverse and adaptive testing experiences.

49