Skill Development Course on

“Full Stack Development”

Submitted to the
JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY HYDERABAD

In partial fulfillment of the requirement for the award of the degree of

BACHELOR OF
TECHNOLOGY IN

COMPUTER SCIENCE & ENGINEERING

(Artificial Intelligence and Machine Learning)

BY
M Avinash Reddy (22WJ1A6673)

Under the Esteemed Guidance Of

P. Venkata Pratima

Assistant Professor of CSE ( AIML) , GNITC

Department Of Computer Science Engineering (Artificial Intelligence and Machine

Learning)

GURU NANAK INSTITUTIONS TECHNICAL CAMPUS (AUTONOMOUS)

School of Engineering

Technology,Ibrahimpatnam

R.R District 501506,2023-2024

 TABLE OF CONTENT
S.No TITLE PAGE
NO
1 ABSTRACT 3

2. INTRODUCTION 4

3. DEVELOPMENT TOOLS 5-6

4. SOURCE CODE 7-10

5. CONCLUSION 11
 1.ABSTRACT

TITLE:

Comprehensive Student Management System

ABSTRACT:

The Student Management System developed using React is a web-based application

designed to facilitate the organization and management of student information. The
system provides functionalities for adding, displaying, and deleting student records. It
employs React's component-based architecture to create a user-friendly interface,
allowing users to input student details such as ID, name, and grade. The system
dynamically updates the student list as new entries are added and enables users to
remove specific students as needed. By leveraging React's state management
capabilities, the application ensures seamless interaction and efficient data handling. This
student management system serves as a foundational framework that can be further
expanded and customized to suit specific educational institutions' requirements, offering
a scalable solution for effectively managing student data.
 2.INTRODUCTION

In today's digital age, efficient management of student information is crucial for educational
institutions to streamline administrative processes and enhance academic outcomes.
Traditional paper-based methods for organizing student records are increasingly being
replaced by digital solutions that offer greater flexibility, accessibility, and efficiency. React, a
popular JavaScript library for building user interfaces, provides an excellent platform for
developing modern web applications that meet these evolving needs.

The Student Management System built using React represents a step forward in the
digitization of educational administrative tasks. By harnessing the power of React's
component-based architecture and state management capabilities, this system offers a robust
and intuitive interface for managing student data.

This introduction provides an overview of the Student Management System, outlining its key
features and functionalities. It highlights the importance of digital solutions in optimizing
student information management and sets the stage for a detailed exploration of the system's
architecture, design, and implementation. Additionally, it underscores the potential benefits of
adopting such a system, including improved data accuracy, streamlined workflows, and
enhanced decision-making for educators and administrators alike.
 3. DEVELOPMENT TOOLS

3.1 INTRODUCTION TO REACT:

React is a declarative, efficient, and flexible JavaScript library for building user
interfaces. Developed and maintained by Facebook, React allows developers to
create interactive and dynamic web applications by efficiently updating and
rendering components in response to changes in data or user interactions. Its
component-based architecture, virtual DOM, and one-way data binding make it a
powerful tool for building scalable and maintainable UIs, making React a popular
choice for front-end development in the modern web ecosystem. React has a variety
of tools and libraries that complement its core functionalities, aiding developers in
building, testing, and maintaining React applications. Some of the notable React
tools include:

1.Create React App (CRA): A command-line tool that sets up a new React project
with a sensible default configuration. It allows developers to start building React
applications quickly without the need to configure build tools.

2.React DevTools: Browser extensions and a standalone application that provides a

set of debugging and profiling tools for React applications. It allows developers to
inspect React component hierarchies, monitor component state and props, and
analyze performance.

3. Redux: While not specific to React, Redux is a predictable state container that is
commonly used with React to manage the state of an application in a centralized and
predictable manner. It enables the development of scalable and maintainable
applications.

4.React Router: A library for handling navigation and routing in React applications.
React Router allows developers to define the navigation structure of a web app,
enabling the creation of single-page applications with dynamic and user-friendly
URLs.

5.Next.js: A React framework for building server-rendered React applications.

Next.js simplifies the process of creating React applications with server-side
rendering, enabling improved performance and SEO.
 6.Jest: A JavaScript testing framework widely used for testing React applications.
Jest provides a simple and powerful way to write unit tests and integration tests for
React components.

7.Enzyme:A JavaScript testing utility for React that makes it easier to assert,
manipulate, and traverse React components' output. It is often used in conjunction
with Jest for testingReact applications.

8.Storybook: An open-source tool for developing UI components in isolation. Story

book allows developers to build, test, and document individual React components
independently, promoting component reusability.

9.React Bootstrap, Material-UI, Ant Design: Libraries that provide pre-designed

React components following popular design systems like Bootstrap, Material Design,
and Ant Design. These libraries help developers create consistent and visually
appealing user interfaces.

10.React Hot Loader:A developer tool that enables hot module replacement for React
components. It allows developers to see the immediate effect of code changes
without a full pagereload, improving the development workflow.

These tools, among others, contribute to a robust ecosystem around React,

facilitating the development, testing, and maintenance of modern web applications.
INTRODUCTION TO HTML,CSS,JAVASCRIPT:

CSS, or Cascading Style Sheets, is a fundamental component of web development that

allows developers to control the presentation and layout of HTML documents. Developed in
the late 1990s as a means to separate content from design, CSS has become an indispensable
tool for creating visually appealing and responsive web pages.

Unlike HTML, which defines the structure and content of a web page, CSS is responsible
for styling and formatting that content. By using CSS, developers can apply various styles,
such as colors, fonts, spacing, and positioning, to HTML elements, thereby customizing the
appearance of web pages.

CSS operates on a system of rules, where selectors target specific HTML elements, and
declarations specify the style properties to be applied. These rules can be defined inline
within HTML documents, embedded within the <style> element in the document head, or
linked externally to a separate CSS file.

One of the key features of CSS is its ability to create responsive designs that adapt to
different screen sizes and devices. Through techniques like media queries and flexible
layouts, developers can ensure that web pages look and function optimally across desktops,
laptops, tablets, and smartphones.

CSS also enables developers to implement advanced layout techniques, such as grid layouts,
flexbox, and multi-column layouts, which provide precise control over the positioning and
alignment of elements on the page.

In addition to styling HTML elements, CSS can be used to create animations, transitions,
and interactive effects, enhancing the user experience and adding a layer of interactivity to
web pages.
 4. SOURCE CODE
App.jsx:

import React, { useState } from 'react';

function StudentManagementSystem() {
const [students, setStudents] = useState([]);
const [newStudent, setNewStudent] = useState({ id: '', name: '', grade: '' });

const handleInputChange = (event) => {

const { name, value } = event.target;
setNewStudent({ ...newStudent, [name]: value });
};

const addStudent = () => {

setStudents([...students, newStudent]);
setNewStudent({ id: '', name: '', grade: '' });
};

const deleteStudent = (index) => {

const updatedStudents = [...students];
updatedStudents.splice(index, 1);
setStudents(updatedStudents);
};

return (
<div>
<h1>Student Management System</h1>
<div>
<input
type="text"
name="id"
value={newStudent.id}
placeholder="ID"
onChange={handleInputChange}
/>
<input
type="text"
name="name"
value={newStudent.name}
placeholder="Name"
onChange={handleInputChange}
/>
 <input
type="text"
name="grade"
value={newStudent.grade}
placeholder="Grade"
onChange={handleInputChange}
/>
<button onClick={addStudent}>Add Student</button>
</div>
<div>
<h2>Students List</h2>
<ul>
{students.map((student, index) => (
<li key={index}>
{student.name} - Grade: {student.grade}
<button onClick={() => deleteStudent(index)}>Delete</button>
</li>
))}
</ul>
</div>
</div>
);
}

export default StudentManagementSystem;

OUTPUT:
 5. CONCLUSION

The Student Management System developed using React leverages modern web
development tools and practices to provide an efficient and user-friendly solution
for managing student information. By harnessing React's component-based
architecture and state management capabilities, alongside essential development
tools like Node.js and Git, the system offers scalability, maintainability, and
enhanced productivity. With features for adding, displaying, and deleting student
records, the system demonstrates the potential of digital solutions in optimizing
educational administrative tasks. As educational institutions continue to embrace
digital transformation, this system serves as a foundational framework for
improving data accuracy, streamlining workflows, and facilitating informed
decision-making in academic settings.