MEENAKSHI SUNDARARAJAN ENGINEERING COLLEG

(Managed by I.I.E.T. Society, Affiliated to Anna University, Chennai, Approved

by AICTE, accredited by NAAC with ‘A’ grade and NBA for programs applied)

363, Arcot Road, Kodambakkam, Chennai – 600 024, Tamil Nadu, India

DEPARTMENT OF INFORMATION TECHNOLOGY

LAB MANUAL

IT3511 – FULL STACK WEB DEVELOPMENT

LABORATORY
REGULATION 2021
YEAR / SEMESTER: III / V
 IT3511 – FULL STACK WEB DEVELOPMENT LABORATORY

COURSE OBJECTIVES:

• To develop full stack applications with clear understanding of user interface, business
logic and data storage.
• To design and develop user interface screens for a given scenario
• To develop the functionalities as web components as per the requirements
• To implement the database according to the functional requirements
• To integrate the user interface with the functionalities and data storage.

COURSE OUTCOMES:

CO1: Design full stack applications with clear understanding of user interface, business
logic and data storage.
CO2: Design and develop user interface screens
CO3: Implement the functional requirements using appropriate tool
CO4: Design and develop database based on the requirements
CO5: Integrate all the necessary components of the application
 DEPARTMENT OF INFORMATION TECHNOLOGY

SUB CODE: IT3511 SUB NAME: FSWD LAB

EXP
TITLE OF THE EXPERIMENT
NO.

1. Installation of Node.Js framework

2. Creation of Portfolio in Web framework

Implementation of To-Do List

3.

Implementation of Micro blogging Application

4.

Implementation of Selling and buying Products Application

5.

Implementation of Student Leave Management

6.

Implementation of Dashboard for task Management

7.

Implementation of Online Survey Application

8.

Implementation of Time Table generator

9.
EX.NO: 1 INSTALLATION OF NODE.JS FRAMEWORK
DATE:

AIM:
To do the installation and setup up the environment of full stack web
development framework using Node.js.
INSTALLATION:
COMMANDS:
1. console.log ("hello world");
2. npm install package-name
3. node script.js
4. mkdir-my folder

VIVA QUESTIONS:

Q1: What is Node.js, and why is it popular?

A1: Node.js is a JavaScript runtime built on Chrome's V8 engine, allowing developers to run
JavaScript server-side. It's popular because it enables non-blocking, event-driven architecture, which is
ideal for building scalable network applications.

Q2: How do you install Node.js on your system?

A2: Node.js can be installed by downloading the installer from the official Node.js website, or by
using a package manager like npm (Node Package Manager) or nvm (Node Version Manager).

Q3: What is the purpose of npm in Node.js?

A3: npm is the default package manager for Node.js, used to install, share, and manage dependencies
and packages within Node.js applications.

Q4: How can you check if Node.js is installed correctly?

A4: You can verify the installation by running the commands node -v and npm -v in the terminal,
which should display the installed versions of Node.js and npm.

Q5: What is the role of the package.json file in a Node.js project?

A5: The package.json file holds metadata relevant to the project, including dependencies, scripts, and
version information, enabling easy management of the project’s modules and configurations.
Ex No: 2 CREATION OF PORTFOLIO IN WEB FRAMEWORK
DATE:
AIM:
To create a portfolio of personal details using node js with different web frameworks.

PROCEDURE:
Create Project Structure:
Create a new directory for your project and navigate to it in the terminal.
Install Dependencies:
Run these commands to initialize your project and install necessary package
Create Files:
Set up your project structure with the following files and folders:
my-portfolio(dir)-public(dir)-css(dir)-style.css(css file)
my-portfolio(dir)-view(dir)-index.html(html file)
my-portfolio(dir)-app.js(js file)
HTML Code (views/index.html):
Create an index.html file in the views directory with your HTML structure.
CSS File (public/css/style.css):
Create a style.css file in the public/css directory for your styles.
Node.js Server (app.js):
Create a Node.js server in the app.js file to serve your portfolio website.
Run the Server:
Run your Node.js server with the following command.
View Portfolio:
Open your web browser and navigate to the port to view your portfolio.
PROGRAM:
Create a New Project Directory:
mkdir portfolio
Install Dependencies:
npm init
npm install express ejs
HTML Code (views/index.html):
Create an index.html file in the views directory with your HTML structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>My Portfolio</title>
</head>
<body>
<header>
<h1>Welcome to My Portfolio</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
 <section class="hero">
<h2>Hi, I'm N Yogeshwaran</h2>
<p>Front-End Developer</p>
</section>
<section class="about">
<h2>About Me</h2>
<p>I am a passionate developer with a keen interest in creating user-friendly and visually
appealing web experiences. I specialize in front-end development and enjoy creating intuitive and
elegant user interfaces.</p>
</section>
<section class="projects">
<h2>Projects</h2>
<div class="project">
<h3>Portfolio Website</h3>
<p>Designed and developed my personal portfolio website to showcase my skills and
projects.</p>
</div>

<!-- Add more project sections as needed -->

</section>
<section class="contact">
<h2>Contact Me</h2>
<p>If you'd like to get in touch, feel free to reach out at <a
href="mailto:contact@example.com">contact@example.com</a>.</p>
</section>
<footer>
<p>&copy; 2023 My Portfolio. All rights reserved.</p>
</footer>
</body>
</html>
CSS File (public/css/style.css):
Create a style.css file in the public/css directory for your styles.
/* CSS styling */
body {
font-family: Arial, sans-serif;
}

Node.js Server (app.js):

Create a Node.js server in the app.js file to serve your portfolio website.
const express = require('express');
const app = express();
const port = 3000;

// Serve static files from the 'public' directory

app.use(express.static('public'));

// Serve the index.html file when the root URL is accessed

app.get('/', (req, res) => {
res.sendFile( dirname + '/views/index.html');
});

// Start the server

app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
Run the Server:
Run your Node.js server with the following command:
node app.js
View Portfolio:
Open your web browser and navigate to http://localhost:3000 to view your portfolio.

OUTPUT:

RESULT:
 VIVA QUESTIONS:
Q1: What is the purpose of a portfolio website?
A1: A portfolio website showcases an individual's skills, projects, and experiences, serving as a digital
resume to attract potential employers or clients.

Q2: Which web frameworks can be used to create a portfolio?

A2: Popular web frameworks include React.js, Angular, Vue.js, and Bootstrap for frontend
development, along with backend frameworks like Express.js or Django if server-side functionality is
required.

Q3: How do you ensure your portfolio is responsive?

A3: By using CSS frameworks like Bootstrap or writing custom media queries, ensuring that the
portfolio layout adjusts gracefully across different screen sizes and devices.

Q4: What are the key elements to include in a portfolio?

A4: A portfolio should include an introduction, skills overview, project showcases, contact
information, and possibly testimonials or a blog section.

Q5: How do you deploy your portfolio online?

A5: The portfolio can be deployed using services like GitHub Pages, Netlify, Vercel, or traditional web
hosting services, depending on the framework and project setup.
 Exp No :3 DOMAIN: FULL STACK WEB DEVELOPMENT

PROJECT: TO-DO LIST

ABSTRACT

We are developing a web application to manage the to-do lists of users. The
application will allow users to create, edit, and delete to-do items, as well asset
deadlines and priorities. Users will also be able to create multiple to-do lists, and
organise their tasks by category. The application will be implemented using a
variety of web development technologies, including HTML, CSS, JavaScript, and
a backend framework such asNode.JS The application will be hosted on a cloud
server, and will be accessible to users from anywhere in the world with an internet
connection.The application will be designed to be user-friendly andeasy to use.
It will have a clean and modern interface, and will be responsive, sothat it can be
used on a variety of devices, including desktop computers, laptops, tablets, and
smartphones.The application will also be secure. Users will be required to create
an account and log in before they can use the application. All user data will be
stored on the server in an encrypted format.The applicationwill be beneficial
to users in a number of ways. It will help them to stay organised and on track with
their tasks. It will also help them to prioritise their tasks and to focus on the most
important things. Additionally, the application will make it easy for users to share
their to-do lists with others, such as colleagues or family members.

SYSTEM REQUIREMENTS

● PC
● Vs Code
● Client Side- HTML, Javascript, CSS
● Server Side- Node js
 SYSTEM DESIGN AND ARCHITECTURE

The web application to manage the to-do list of users will work as follows:

1. User registration and login: Users will need to create an account and
log in before they can use the application. This will allow the
application to track each user's to-do list separately.
2. Adding to-do items: Users can add to-do items by entering a task
description, deadline, priority, and any other relevant information.
3. Editing and deleting to-do items: Users can edit or delete to-do
items at any time.
4. Organizing to-do items: Users can organize their to-do items into
multiple lists and categories. This can be helpful for prioritizing tasks
or grouping related tasks together.
5. Viewing to-do items: Users can view their to-do list in a variety of
ways, such as by due date, priority, or list.
6. Completing to-do items: When users complete a task, they can mark
it as complete. This will remove the task from the to-do list and move
it to a completed tasks list.
 CODE

Login.html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<style>
body {
font-family: 'Arial', sans-serif; background-
color: #2C3E50;
color: #ecf0f1; text-align:
center; display: flex;
justify-content: center; align-items:
center; height: 100vh;
margin: 0;
}
.login-container { background:
#34495e; border-radius: 5px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); max-width:
400px;
}
h2 {
margin-left: 0 0 20px; color:
#ecf0f1;
}

.login-container input[type="text"],
.login-container input[type="password"] { width: 100%;
padding: 10px; border:
none;
border-bottom: 2px solid #3498db;
background-color: #2C3E50;
color: #ecf0f1; border-
radius: 0;
margin: 10px 0; /* Add margin for spacing */
}
 .login-container button { width:
100%; padding: 10px;
background: #3498db; color:
#ecf0f1; border: none;
border-radius: 3px; cursor:
pointer;
transition: background-color 0.3s;
}
.login-container button:hover { background:
#2980b9;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form id="loginForm" onsubmit="return validateForm()">
<input type="text" id="username" placeholder="Username"
required>
<input type="password" id="password" placeholder="Password"
required>
<button type="submit">Login</button>
</form>
</div>
<script>
function validateForm() {
// Replace with your authentication logic (e.g., calling an
API)
const username = document.getElementById("username").value; const password =
document.getElementById("password").value;

if (username === "admin" && password === "password") { alert("Login successful");

window.location.href = "todo.html"; return false;
} else {
alert("Invalid username or password"); return false;
}
}
</script>
</body>
</html>
Todo.html
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<style>
body {
font-family: Arial, sans-serif; background-
color: #2C3E50; color: #ecf0f1;
text-align: center; margin:
0;
padding: 0;
}
.container {
max-width: 400px; margin:
20px auto; background:
#34495e; border-radius: 5px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
margin: 0 0 20px; color:
#ecf0f1;
}

.input-container { display: flex;

justify-content: space-between; margin-
bottom: 10px;
}
input[type="text"] { width:
70%; padding: 10px;
border: 1px solid #ccc; border-
radius: 3px; background-color:
#2C3E50; color: #ecf0f1;
}
button {
width: 28%;
 padding: 10px; background:
#3498db; color: #ecf0f1;
border: none;
border-radius: 3px; cursor:
pointer;
}
button:hover { background:
#2980b9;
}
ul {
list-style-type: none; padding:
0;
}
li {
display: flex;
justify-content: space-between; align-items:
center; background: #34495e;
border: 1px solid #2C3E50; border-
radius: 3px; padding: 10px;
margin-bottom: 5px;

}
.completed {
text-decoration: line-through; color: #999;
}
.delete-button { background:
#e74c3c; color: #ecf0f1;
border: none;
border-radius: 3px;
padding: 5px 10px; cursor:
pointer;
}
.list-button { width: 100%;
padding: 10px;
background: #3498db; color:
#ecf0f1; border: none;
border-radius: 3px;
 cursor: pointer; margin-
top: 10px;
}
.list-button:hover { background:
#2980b9;
}
</style>
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<div class="input-container">
<input type="text" id="taskInput" placeholder="Add a new
task...">
<button onclick="addTask()">Add</button>
</div>
<ul id="taskList">
<!-- Tasks will be added here dynamically -->
</ul>
<button class="list-button" onclick="viewTaskList()">List of Tasks</button>
</div>
<script>
const taskInput = document.getElementById('taskInput'); const taskList =
document.getElementById('taskList');
// Retrieve task history data from local storage
const tasksData = localStorage.getItem('taskHistoryData'); const tasks = tasksData
? JSON.parse(tasksData) : [];
// Display task history on the page function
displayTaskHistory() {
taskHistory.innerHTML = ''; tasks.forEach(task
=> {
const taskItem = document.createElement('li'); taskItem.innerHTML = `
<span>${task.text}</span>
<span>${task.action}</span>
`; taskHistory.appendChild(taskItem);
});
}
function addTask() {
const taskText = taskInput.value.trim(); if (taskText ===
'') {
 return;
}
const taskItem = document.createElement('li'); taskItem.innerHTML = `
<span>${taskText}</span>
<button class="delete-button" onclick="deleteTask(this)">Delete</button>;
taskList.appendChild(taskItem); taskInput.value
= '';
// Record the task addition to the task history tasks.push({ text: taskText,
action: 'Added' }); localStorage.setItem('taskHistoryData',
JSON.stringify(tasks));
displayTaskHistory();
}
function deleteTask(element) { taskList.removeChild(element.parentElement);
// Record the task deletion to the task history const taskText =
element.parentElement.querySelector('span').innerText; tasks.push({ text: taskText, action:
'Deleted' }); localStorage.setItem('taskHistoryData',
JSON.stringify(tasks));
displayTaskHistory();
}
function viewTaskList() {
window.open('task-list.html', '_blank');
}
</script>
</body>
</html>
Task-list.html
<!DOCTYPE html>
<html>
<head>
<title>Task History</title>
<style>
body {
font-family: Arial, sans-serif; background-
color: #2C3E50; color: #ecf0f1;
text-align: center; margin:
0;
 padding: 0;
}
.container {
max-width: 400px; margin:
20px auto; background:
#34495e; border-radius: 5px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
margin: 0 0 20px; color:
#ecf0f1;
}
ul {
list-style-type: none; padding:
0;
}
li {
display: flex;
justify-content: space-between; align-items:
center; background: #34495e;
border: 1px solid #2C3E50; border-
radius: 3px; padding: 10px;
margin-bottom: 5px;

}
.clear-button { width:
100%; padding: 10px;
background: #e74c3c; color:
#ecf0f1; border: none;
border-radius: 3px; cursor:
pointer; margin-top: 10px;
}
.clear-button:hover { background:
#c0392b;
}
</style>
</head>
<body>
<div class="container">
<h1>Task History</h1>
<ul id="taskHistory">
<!-- Task history will be displayed here dynamically -->
</ul>
<button class="clear-button" onclick="clearTasks()">Clear Tasks</button>
</div>
<script>
const taskHistory = document.getElementById('taskHistory');
// Retrieve task history data from local storage
const tasksData = localStorage.getItem('taskHistoryData'); const tasks = tasksData
? JSON.parse(tasksData) : []; function displayTaskHistory() {
taskHistory.innerHTML = ''; tasks.forEach(task => {
const taskItem = document.createElement('li'); taskItem.innerHTML = `
<span>${task.text}</span>
<span>${task.action}</span>
`; taskHistory.appendChild(taskItem);
});
}
displayTaskHistory(); function
clearTasks() {
localStorage.removeItem('taskHistoryData'); // Clear the local
storage
taskHistory.innerHTML = ''; // Clear the displayed tasks
}
</script>
</body>
</html>
 CONCLUSION
In conclusion, developing a web application to manage a to-do list is a valuable
project that can greatly enhance productivity and organisation. By providing
users with a user-friendly interface, task prioritisation, and reminders, such an
application can help individuals and teams effectively manage their tasks and
responsibilities. The project requires careful planning, a well-thought-out
design, robust backend development, and thorough testing to ensure its
success. Additionally, ongoing maintenance and updates will be essential to
keep the application relevant and responsive to user needs. Overall, the
development of a to-do list web application can be a rewarding endeavour,
contributing to increased efficiency and time management for its users.
Viva questions:
Q1: What is a To-Do list application, and why is it useful?
A1: A To-Do list application helps users manage tasks by allowing them to create, update, and delete
tasks, making it easier to organize and prioritize their daily activities.

Q2: Which technologies can be used to implement a To-Do list?

A2: Technologies like HTML, CSS, JavaScript for frontend, and Node.js, Express, or databases like
MongoDB for backend can be used to create a To-Do list application.

Q3: How can you add interactivity to the To-Do list?

A3: Interactivity can be added using JavaScript or a JavaScript framework (like React.js) to handle user
inputs, dynamically update the task list, and implement features like task completion or task filtering.

Q4: What is the importance of data persistence in a To-Do list application?

A4: Data persistence ensures that the tasks remain saved even after the application is closed, which can be
achieved using local storage, cookies, or databases.

Q5: How do you handle task management in a To-Do list application?

A5: Task management can be handled by categorizing tasks (e.g., pending, completed), providing editing
and deletion options, and allowing users to prioritize tasks.
EXP NO: 4
DOMAIN: FULL STACK WEB DEVELOPMENT

PROJECT: MICRO BLOGGING APLLICATION

ABSTRACT

The microblogging application, akin to popular platforms like Twitter, offers

users a dynamic and interactive space for sharing their thoughts, updates, and
content with their network of followers. Users can create personal profiles, post
concise text-based messages, and engage with others by following their feeds.
The application provides an intuitive and responsive user interface that simplifies
the processes of posting content, managing followers, and viewing updates. This
platform serves as a real-time, user-centric communication tool, fostering
connections and enabling the rapid dissemination of information.

SYSTEM REQUIREMENTS

● PC
● Vs Code
● Client Side- HTML, Javascript, CSS
● Server Side- Node js

SYSTEM DESIGN AND ARCHITECTURE

1. Front-End:

User Interface (UI): The front-end of the microblogging website should

provide an engaging and user-friendly interface for users to interact with. This
includes features like user profiles, the ability to create and view posts,
follow/unfollow other users, and notifications.

2. Back-End:

Web Server: A web server (e.g., Apache, Nginx) handles HTTP requests and
serves web pages to users.

Application Server: This server manages the application's business logic,

user authentication, and interactions with the database.

Database Server: Stores user data, posts, and other relevant information. A
relational database (e.g., MySQL, PostgreSQL) or a NoSQL database (e.g.,
MongoDB) may be used, depending on the requirements.

3. User Authentication and Authorization: Implement user registration and

login functionality. Use authentication mechanisms (e.g., OAuth, JWT) to
secure user data and sessions.

Define authorization rules to control who can access or modify certain

resources (e.g., user profiles, posts).

4. User Management: Allow users to create and manage their profiles,

including adding profile pictures and personal information. Implement the
ability to follow and unfollow other users.

5. Posting and Messaging: Users can create, edit, and delete posts with text
and multimedia content. Enable users to comment on and like posts.
Implement direct messaging or private messaging features for one-on-one
communication.

6. News Feed: Create personalized news feeds for each user, showing posts
from users they follow. Implement algorithms to rank and filter posts based
on relevance and user preferences.

7. Notifications: Send real-time notifications for events such as new

followers, likes, comments, or mentions.
8. Search Functionality: Allow users to search for other users, hashtags, or
specific posts.

9. Scalability: Design the system to be horizontally scalable to handle a

growing number of users and posts. Consider load balancing and distributed
server setups.

CODE

Index.js

const express = require('express');

const bodyParser = require('body-parser');

const app = express(); const port =

3000;

// Sample data to store posts const posts =

[];

// Serve static HTML files app.use(express.static('public'));

app.use(bodyParser.urlencoded({ extended: true }));

// Handle POST requests to create new posts app.post('/post',

(req, res) => {
const postContent = req.body.postContent;

if (postContent) {
// Store the new post in the array (in a real app, you'd use a
database)
posts.push({ content: postContent, date: new Date()
});
}

res.redirect('/');
});

// Display recent posts

app.get('/getPosts', (req, res) => { res.json(posts);
});

app.listen(port, () => {
console.log(`Microblogging App listening on port
${port}`);
});

index.html

<!DOCTYPE html>
<html>
<head>
<title>Microblogging App</title>
</head>
<body>
<h1>Welcome to the Microblogging App</h1>
<form action="/post" method="post">
<input type="text" name="postContent"
placeholder="What's on your mind?">
<button type="submit">Post</button>
</form>
<h2>Recent Posts:</h2>
<ul id="postList">
<!-- Posts will be displayed here -->
</ul>
</body>
</html>
SNAPSHOTS:
 CONCLUSION

In conclusion, the creation of a microblogging application is a multifaceted

endeavour that demands thoughtful consideration of user experience, functionality, and
scalability. Building the front-end involves designing an intuitive user interface with
features like user profiles, post creation, and social interactions such as following and
notifications. The back-end is the engine that powers the application, requiring robust
servers for web and application logic, as well as an efficient database for data storage. User
authentication and authorization are paramount for safeguarding user data and ensuring
secure interactions. Incorporating features like news feeds, notifications, and messaging
fosters user engagement and interaction. The scalability of the system is crucial to
accommodate a growing user base, necessitating load balancing and distributed setups.
Security measures should be enforced to protect against web vulnerabilities, while caching
and content delivery mechanisms enhance performance. Monitoring and analytics provide
valuable insights into user behavior, aiding in continuous improvement. Compliance with
data protection and privacy regulations ensures user trust, while the development of mobile
applications expands accessibility. Lastly, the success of the microblogging application
hinges on responsive development, comprehensive testing, and streamlined deployment
through CI/CD pipelines. It is essential to keep in mind that this is just the foundation, and
a real-world microblogging platform would require a more intricate design, continuous
maintenance, and adaptation to meet evolving user needs and expectations.

Viva questions:
Q1: What is a microblogging application?
A1: A microblogging application allows users to post short messages or updates, similar to Twitter, where
content is generally brief and focuses on real-time communication.

Q2: What features are essential in a microblogging platform?

A2: Essential features include user authentication, posting, liking, commenting, sharing posts, and
following/unfollowing other users.

Q3: How do you implement user authentication in a microblogging application?

A3: User authentication can be implemented using JWT (JSON Web Tokens), OAuth, or session-based
authentication, depending on the security needs of the application.

Q4: What is the role of a database in a microblogging application?

A4: The database stores user data, posts, comments, and interactions, making it crucial for retrieving and
displaying content to users in real-time.

Q5: How can you implement real-time updates in a microblogging application?

A5: Real-time updates can be implemented using technologies like WebSockets, or by using polling
mechanisms that frequently check the server for new updates.

RESULT:
EX.NO: 4 SELLING AND BUYING APPLICATION

DATE:

AIM:

To create a webpage to buy and sell a used products in the online

SYSTEMREQUIREMENTS:

Windows , HTML & css with react js

ABSTRACT:

In today's digital age, the buying and selling landscape has evolved significantly,
with a growing demand for user-friendly and feature-rich online platforms. This abstract introduces a
cutting-edge web application built with HTML, CSS, and React.js that revolutionizes the way users
engage in e-commerce transactions.

Our innovative online marketplace provides a dynamic and interactive environment for buyers and
sellers to connect, browse, and trade products and services. Leveraging the power of React.js, we have
developed a responsive, lightning- fast, and highly customizable platform that meets the demands of
modernonlineconsumers.
SYSTEM ARCHITECTURE:

BUYING

CUSTOMIZATIO

DATA
AND
SYSTEM IMPLEMENTATIONS:
LOGIN WITH REACT .JS
import React, { Component } from 'react'; class
Login extends Component {
constructor(props) {
super(props); this.state
={
username: '',
password: '', loggedIn:
false
};
 }
handleLogin = () => { this.setState({
loggedIn: true });
render() {

if (this.state.loggedIn) {
return <Redirect to="/profile" />;
} return (
<div>
<h1>Login</h1>
<input
type="text" placeholder="Username"
value={this.state.username}
onChange={(e) => this.setState({ username: e.target.value })}

/>
<input
type="password"
placeholder="Password"
value={this.state.password}
onChange={(e) => this.setState({ password: e.target.value })}

/> <button onClick={this.handleLogin}>Continue</button>

</div>
);
}
}export default Login;

PATH ROUTE
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom'; import Login
from './Login';
import Profile from './Profile'; function
App() {
return (
<Router>
<Route path="/" exact component={Login} />
<Route path="/profile" component={Profile} />
</Router>
);
}
export default App;

HTML & CSS:

<html> </head>
<body>
<div id="sectionHome"> <div class="bg-container d-flex flex-column justify-content-end">
<div class="tourism-card">
<h1 class="main-heading">ECOMMERCE APPLICATION</h1>
<p class="paragraph">Explore the world.</p>
<button class="button"
onclick="display('sectionbrowserPlaces')">continue</button>
</div></div> </div>
<div id="sectionFavouritePlaces">
<div class="favourite-places-bg-container">
<h1 class="favourite-places-heading">browsing categories</h1>
<div class="favourite-place-card-container d-flex flex-row"
onclick="display('sectioncarDetailedView')">
<div>
<h1 class="favourite-place-card-heading">Cars</h1>
<p class="favourite-place-card-description">
Let us explore about veriety of cars and have ride on it owns it For more
Information....
 </p>
</div>
<img src="https://4.bp.blogspot.com/-56-
9kxaT66g/TnIbbmDjbiI/AAAAAAAAACc/PNeQ19AkIPc/s1600/White+Car+from+logo.jpg"
class="favourite-place-card-image" />
</div>
<div id="sectioncarDetailedView">
<div class="detailed-view-bg-container">
<h1 class="detailed-view-heading">Detailed View</h1>
<div class="detailed-view-card-container">
<div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img
src="https://th.bing.com/th/id/R.e993318203cc5ebf284483eb32b408c3?rik=Oktpa1SVdhF2
KA&riu=http%3a%2f%2fs3.caradvice.com.au%2fwp-
content%2fuploads%2f2013%2f02%2fJaguar-S-Type_2008-
e1360259520486.jpg&ehk=h3ox2YOPHWjzcTcyaudvEjQe4alfyN%2fdbg0IrmHBRUc%3d&risl=
&pid=ImgRaw&r=0" class="d-block w-100" alt="..." />

</div>
<div class="carousel-item">
<img src="https://images.summitmedia-
digital.com/topgear/images/2021/02/16/jaguar-sports-cars-ev-2-1613462813.jpg" class="d- block w-
100" alt="..." />
</div>
<div class="carousel-item">
 <img src="https://th.bing.com/th/id/R.e4cac3e21ec3ad456abd758190d98be6?rik=zYuPUGkusjVC
1A&riu=http%3a%2f%2fimages.cdn.autocar.co.uk%2fsites%2fautocar.co.uk%2ffiles%2fstyles
%2fgallery_slide%2fpublic%2fjaguar-f-type-coupe-1-
06_1.jpg%3fitok%3d1VPCYpct&ehk=URNb3Ky1xgOe1RdWmthBO8g8jHy9XQvSNCzcj6iJXGs%
3d&risl=&pid=ImgRaw&r=0" class="d-block w-100" alt="..." />
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators1" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="detailed-view-card-text-container">
<h1 class="detailed-view-card-heading">Jaguar</h1>
<p class="detailed-view-card-description">
The Jaguar F-Type (X152) is a series of two-door, two-seater grand tourers manufactured
by British car manufacturer Jaguar Land Rover under their Jaguar Cars marque since 2013.
The car's JLR D6a platform is based on a shortened version of the XK's platform. It is the
so-called "spiritual successor" to the famous E-Type
</p>
</div>
</div>
<button class="btn btn-dark" onclick="display('sectionbrowserPlaces')"> back
 </button>
</div>
<div id="sectionGoldenTempleDetailedView">
<div class="detailed-view-bg-container">
<h1 class="detailed-view-heading">Detailed View</h1>
<div class="detailed-view-card-container">
<div id="goldenTempleCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#goldenTempleCarousel" data-slide-to="0" class="active"></li>
<li data-target="#goldenTempleCarousel" data-slide-to="1"></li>
<li data-target="#goldenTempleCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img
src="https://i.pinimg.com/originals/1d/b4/28/1db4285c5c92986ba90cb3fb7ce9f8af.jpg" class="d-
block w-100" alt="..." />
</div>
<div class="carousel-item">
<img
src="https://th.bing.com/th/id/OIP.rXxduez3_IFzX1pY9iFPAAHaFj?pid=ImgDet&rs=1"
class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img
src="https://th.bing.com/th/id/OIP.YtH1uwDATH5m8X382XAnCAHaJ4?pid=ImgDet&rs=1"
class="d-block w-100" alt="..." />
</div>
</div>
<a class="carousel-control-prev" href="#goldenTempleCarousel" role="button" data-
slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
 <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#goldenTempleCarousel" role="button" data-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="detailed-view-card-text-container">
<h1 class="detailed-view-card-heading">Dogs and Cats</h1>
<p class="detailed-view-card-description">
Husky is a general term for a dog used in the polar regions,
primarily and specifically for work as sled dogs. It refers to a traditional
northern type,
notable for its cold-weather tolerance and overall hardiness.
Modern racing huskies that maintain arctic breed traits
(also known as Alaskan huskies) represent an ever-changing crossbreed of the
fastest dogs.
The Persian cat, also known as the Persian longhair,
is a long-haired breed of cat characterised by a round face and short muzzle.
</p>
</div>
</div>
<button class="btn btn-dark" onclick="display('sectionFavouritePlaces')"> back
</button>
</div>
</div>
.bg-container {
background-image: url("https://wallpapercave.com/wp/uUqxVHp.jpg");
 height: 100vh;
background-size: cover;
}

.tourism-card {
text-align: center; background-
color: white; border-top-left-
radius: 25px; border-top-right-
radius: 25px; padding: 5px;
}
.button { color:
white;
background-color: #25b1cc; width:
138px;
height: 36px;
border-width: 0px;
border-radius: 20px;
}

.main-heading {
font-family: "Roboto";
}
.paragraph {
font-family: "Roboto";
}

.favourite-places-bg-container {
background-image: url("https://wallpapercave.com/wp/uUqxVHp.jpg"); height:
100vh;
 background-size: cover; padding:
24px;
}
.favourite-places-heading { color:
white;
font-family: "Roboto";
font-size: 28px;
font-weight: bold;
}
.favourite-place-card-container {
background-color: white;
border-radius: 8px;
padding: 16px;
margin-bottom: 15px;
}

.favourite-place-card-heading { color:
#0f0e46;
font-family: "Roboto";
font-size: 23px;
font-weight: bold;
}
.favourite-place-card-description {
color: #6c6b70;
font-family: "Roboto";
font-size: 13px;
}
.favourite-place-card-image { width:
80px;
height: 100px;
}
.favourite-place-card-text-container {
margin-right: 15px;
}
.detailed-view-bg-container {
background-image: url("https://wallpapercave.com/wp/uUqxVHp.jpg"); height:
100vh;
background-size: cover;
}
.detailed-view-heading {
color: white;
font-family: "Roboto";
font-size: 28px;
font-weight: bold;
padding: 24px;
}
.detailed-view-card-container {
background-color: white;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
margin: 24px;
}

.detailed-view-card-heading { color:
#0f0e46;
font-family: "Roboto";
font-size: 23px;
font-weight: bold;

}
.detailed-view-card-description {
 color: #6c6b70;
font-family: "Roboto";
font-size: 13px;
}

.detailed-view-card-text-container {
padding: 16px;
}</div></body></html>

SNAPSHOTS:
 CONCLUSIONS:

In conclusion, our online marketplace brings together the latest web technologies to create a
feature-rich, user-friendly, and secure environment for buying and selling products and
services. Experience the future of e-commerce with our innovative platform, providing a
seamless and efficient marketplace for all users.

Viva Questions:
Q1: What is an e-commerce application?
A1: An e-commerce application facilitates the online buying and selling of products, enabling users to
browse items, add them to a cart, and purchase them using various payment methods.
Q2: Which technologies are typically used in an e-commerce application?
A2: Frontend technologies include HTML, CSS, and JavaScript frameworks like React.js. Backend can
be handled by Node.js, Express.js, or Django, with databases like MySQL or MongoDB.
Q3: How do you implement a shopping cart feature?
A3: A shopping cart can be implemented by allowing users to add, remove, or update quantities of
products, storing this data in session storage, cookies, or a database until checkout.
Q4: What security measures are necessary for an e-commerce application?
A4: Security measures include HTTPS for secure data transmission, encryption of sensitive data, secure
payment gateways, and proper validation and sanitization of user inputs to prevent attacks.
Q5: How do you handle payment processing in an e-commerce application?
A5: Payment processing is typically handled by integrating third-party payment gateways like PayPal,
Stripe, or Razorpay, which manage the transaction securely on behalf of the application.

RESULT:
 DOMAIN: FULL STACK WEB DEVELOPMENT

PROJECT: LEAVE MANAGEMENT SYSTEM

ABSTRACT

This project aims to develop a comprehensive Leave Management System for

an organization, offering users the capability to request various types of leaves,
including casual leave and medical leave, while also providing visibility into the
available leave balance. The system will streamline and automate the leave
application and approval process, enhancing efficiency and accuracy within the
organization. Users will have the ability to submit leave requests, track the
status of their applications, and gain insights into their remaining leave
entitlement. This system not only simplifies leave management but also promotes
transparency and accountability within the organization, ultimately contributing
to better human resource management and employee satisfaction.

SYSTEM REQUIREMENTS

• Windows 11
• React.js
• Data storage format in react file

SYSTEM ARCHITECTURE:

User
Interface

State
Deployme
Manageme
nt
nt

leave
management

Backup
and Collaborati
ve Tools
Recovery

Data
Storage
 SYSTEM DESIGN
System Architecture:
The system can be designed using a three-tier architecture:
Presentation Layer: The front-end application that users interact with, developed using HTML,
CSS, and JavaScript with a framework like React or Angular.
Application Layer: The back-end server that handles user requests, implements business logic,
and communicates with the database. This can be built using Node.js or Python with
frameworks like Express or Django.
Data Layer: The database system (e.g., MySQL or PostgreSQL) where user data, leave
requests, and leave balances are stored.
Components:
• User Interface (UI):
o Create a user-friendly interface that allows users to log in, apply for
different types of leave (casual, medical, etc.), and view their
available leave balances.
o Implement responsive design to support both web and mobile
interfaces.
• Authentication and Authorization:
o Implement user authentication and role-based access control to
manage user access to features and data.
o Use JWT (JSON Web Tokens) or session-based authentication.
• Database:
o Design the database schema to store user information, leave request
details, and leave balance information.
o Tables might include User, LeaveRequest, and LeaveBalance.
• Business Logic:
o Implement the core business logic for handling leave requests and
calculating leave balances.
o Validate leave requests to ensure they meet organization policies
(e.g., available leave days, valid leave types).
o Calculate and update leave balances after leave requests are
approved.
• APIs:
o Develop RESTful or GraphQL APIs to facilitate communication
between the front-end and back-end.
o Define endpoints for user registration, login, leave request
submission, leave balance retrieval, and leave approval/rejection.
• Notification System:
 o Implement a notification system to notify users of leave request
status (approved or rejected).
o Notifications can be sent via email or in-app notifications.
Workflow:
• Users log in to the system.
• Users can view their available leave balances.
• Users can submit leave requests, specifying the type of leave (casual,
medical), start date, end date, and reason.
• The system checks if the leave request is valid (e.g., within available leave
balance) and pending approval.
• Leave requests are sent for approval to designated approvers or managers.
• Approvers can review and approve or reject leave requests.
• Approved leave requests update the user's leave balance, and notifications
are sent to the user.
• Users can view the status of their leave requests.
Scalability and Performance:
• To handle potential scalability needs, consider implementing caching
mechanisms, load balancing, and optimizing database queries.
• Monitoring tools should be in place to track performance and identify
bottlenecks.
Deployment:
• Deploy the system to a production server using a hosting service or an on-
premises server.
• Set up a domain and configure SSL for secure communication.
• Implement continuous integration and continuous deployment (CI/CD) for
automated deployment.
Them’s the facts about the system design of our project.
SYSTEM IMPLEMENTATION
CODE
home.html
<!DOCTYPE html>
<html>
<head>
<title>Leave management application </title>
<style>
*{
 color:;
}
html,body{
height: 100%;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
</head>
<body>
<div class="container my-5">
<h1>Leave management Application</h1>
<div>
No. of available casual leaves : {{ data.acleaves }}<br>
No. of causal leaves taken this month : {{ data.tcleaves }}<br>
No. of medical leaves taken this month : {{ data.tmleaves }}<br><br>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-
target="#modalhaha">Add leave info</button>
<div class="modal fade" id="modalhaha" tabindex="-1" role="dialog" aria-
labelledby="modelhahalabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add leave information</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<form method="post">
<div> Leave type: <select name="leavetype" id="leavetype">
<option value="casual">Casual</option>
 <option value="medical">medical</option>
</select></div><br>
<div>Start date : <input name="start" type="date"></div><br>
<div>End date : <input name="end" type="date"></div><br>
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div> </div></div></div></div></div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
</body></html>
login.html
<!DOCTYPE html>
<html>
<head>
<title> Login Screen</title>
<style>
body{ height:1vh;
}
</style>
<!-- Font Awesome -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<!-- MDB -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.2/mdb.min.css"
rel="stylesheet"
/>
</head>
<body><div>
<section class="vh-100" style="background-color: #9A616D;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-xl-10">
<div class="card" style="border-radius: 1rem;">
<div class="row g-0">
<div class="col-md-6 col-lg-5 d-none d-md-block">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-
login-form/img1.webp"
alt="login form" class="img-fluid" style="border-radius: 1rem 0 0 1rem;" />
</div>
<div class="col-md-6 col-lg-7 d-flex align-items-center">
<div class="card-body p-4 p-lg-5 text-black">
<form method="post">
<div class="d-flex align-items-center mb-3 pb-1">
<i class="fas fa-cubes fa-2x me-3" style="color: #ff6219;"></i>
<span class="h1 fw-bold mb-0">Login Portal</span>
</div>
<h5 class="fw-normal mb-3 pb-3" style="letter-spacing: 1px;">Sign into
your account</h5>
<div class="form-outline mb-4">
<input type="email" id="form2Example17" name="uname" class="form-
control form-control-lg" />
<label class="form-label" for="form2Example17" >Username</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="form2Example27" name="password"
class="form-control form-control-lg" />
<label class="form-label" for="form2Example27">Password</label>
</div>
<div class="pt-1 mb-4">
 <button class="btn btn-dark btn-lg btn-block"
type="button">Login</button></div>
<a class="small text-muted" href="#!">Forgot password?</a>
<p class="mb-5 pb-lg-2" style="color: #393f81;">Don't have an account? <a
href="#!"
style="color: #393f81;">Register here</a></p>
<a href="#!" class="small text-muted">Terms of use.</a>
<a href="#!" class="small text-muted">Privacy policy</a>
</form> </div></div></div></div></div></div> </div>
</section>
</div>
<!-- MDB -->
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.2/mdb.min.js"
></script>
</body>
</html>
SNAPSHOTS:
 CONCLUSION
In conclusion, the system design provided offers a robust foundation for a
small-scale leave management system, addressing user needs, security,
scalability, and compliance. It streamlines leave request processes, enhances
transparency, and can boost overall organizational efficiency. By
implementing this design, organizations can create an effective and user-
friendly system that simplifies leave management while ensuring data security
and regulatory compliance. Continuous monitoring and optimization are
crucial for long-term effectiveness and adaptability to changing requirements,
ultimately benefiting both employees and the organization.

VIVA QUESTIONS

Q1: What is a student leave management system?

A1: A student leave management system automates the process of applying for and approving leaves, making it
easier for students to request leave and for administrators to manage leave requests.

Q2: What are the main components of a leave management system?

A2: Main components include user authentication, leave application submission, leave approval/rejection
workflows, and a dashboard for tracking leave status.

Q3: How do you implement leave approval workflows?

A3: Leave approval workflows can be implemented using conditional logic that routes the leave request to the
appropriate authority for approval based on predefined rules.

Q4: How do you store and manage leave data?

A4: Leave data can be stored in a database, where each leave request is logged with relevant details like student ID,
leave dates, reason, and approval status.

Q5: What are the benefits of automating the leave management process?
A5: Automation reduces paperwork, minimizes errors, provides real-time tracking, and speeds up the approval
process, making it more efficient for both students and administrators.

RESULT:
 DOMAIN: FULL STACK WEB DEVELOPMENT

PROJECT:TASK DASHBOARD WEB APP

ABSTRACT

The microblogging application, akin to popular platforms like Twitter, offers

users a dynamic and interactive space for sharing their thoughts, updates, and
content with their network of followers. Users can create personal profiles, post
concise text-based messages, and engage with others by following their feeds.
The application provides an intuitive and responsive user interface that simplifies
the processes of posting content, managing followers, and viewing updates. This
platform serves as a real-time, user-centric communication tool, fostering
connections and enabling the rapid dissemination of information.

SYSTEM REQUIREMENTS

● PC
● Vs Code
● Client Side- HTML, Javascript, CSS
● Server Side- Node js
 SYSTEM DESIGN AND ARCHITECTURE

1. User Interface (Front-End):

The user interface (UI) of the project management dashboard will be

designed to provide a seamless and intuitive experience for users. It will
consist of various components, including task lists, forms for adding new
tasks, and controls for changing task statuses.

2. Front-End Frameworks:

HTML, CSS, and JavaScript will be used to create the front-end.

Frameworks like React, Angular, or Vue.js can be employed for building a
dynamic and responsive user interface.

3. Web Server:

A web server (e.g., Node.js, Apache, Nginx) will be used to serve the front-
end web application to users. It will handle HTTP requests and responses.
Backend Server:
The back-end application will be responsible for handling business logic, data
storage, and user authentication. It will be developed using Node.js or another
suitable server-side technology.

4. Database:

To store task data, a database system like MySQL, PostgreSQL, or

MongoDB will be used. The database will store information about tasks,
their descriptions, statuses, and timestamps.

5. User Authentication:

User authentication will be implemented to secure user accounts and data.

Technologies like OAuth, JWT (JSON Web Tokens), or session-based
authentication can be employed.

6. Task Management:

The system will allow users to add new tasks with task names and descriptions.
They will also be able to update the status of existing tasks among "Pending,"
"In Progress," or "Completed."

7. API Endpoints:

The back-end will expose RESTful or GraphQL API endpoints to interact

with the front-end. These endpoints will handle requests for creating,
updating, and retrieving tasks.

8. Security:9. Scalability: Design the system to be horizontally scalable to

handle a growing number of users and posts. Consider load balancing and
distributed server setups.
 CODE

Index.js
const express = require('express');
const bodyParser = require('body-parser');

const app = express(); const port

= 3000;
// Sample data to store posts const posts = [];

// Serve static HTML files app.use(express.static('public'));

app.use(bodyParser.urlencoded({ extended: true }));

// Handle POST requests to create new posts app.post('/post', (req, res) => {
const postContent = req.body.postContent;

if (postContent) {
// Store the new post in the array (in a real app, you'd use a database)
posts.push({ content: postContent, date: new Date() });
}

res.redirect('/');
});

// Display recent posts app.get('/getPosts', (req, res) => {

res.json(posts);
});

app.listen(port, () => {
console.log(`Dashboard Task App listening on port ${port}`);
});
// Sample data to store posts const posts = [];

// Serve static HTML files app.use(express.static('public'));

app.use(bodyParser.urlencoded({ extended: true }));

// Handle POST requests to create new posts app.post('/post', (req, res) => {
const postContent = req.body.postContent;

if (postContent) {
// Store the new post in the array (in a real app, you'd use a database)
posts.push({ content: postContent, date: new Date() });
}

res.redirect('/');
});

// Display recent posts app.get('/getPosts', (req, res) => {

res.json(posts);
});

app.listen(port, () => {
console.log(`Dashboard Task App listening on port ${port}`);
});
Dashboard.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Sample HTML Document</title>
<style>
body {
font-family: Arial, sans-serif; margin: 20px;
}
h1 {
color: #333;
}
 p{
line-height: 1.6;
}
</style>
</head>
<body>
<header>

<h1>Welcome to Our Sample HTML Document</h1>

<p>This is a sample HTML document that showcases various HTML elements and their
usage.</p>

</header>

<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>

<section id="section1">
<h2>Section 1: Introduction</h2>
<p>This is the first section of our sample document, which serves as an introduction
to the content.</p>
</section>
<section id="section2">
<h2>Section 2: Lists and Links</h2>
<p>Here's an unordered list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>And an ordered list:</p>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

<p>Links to external websites:</p>

<ul>
<li><a href="https://www.example.com">Example.com</a></li>
<li><a href="https://www.openai.com">OpenAI</a></li>
</ul>
</section>

<section id="section3">
<h2>Section 3: Images and Forms</h2>
<p>Here's an image:</p>
<img src="https://via.placeholder.com/300" alt="Sample Image">
 <p>A simple form with input fields:</p>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<input type="submit" value="Submit">
</form>
</section>

<footer>
<p>Thank you for exploring our sample HTML document. We hope you found it
informative and useful for learning HTML basics.</p>
</footer>
</body>
</html>

index.html
<!DOCTYPE html>
<html>
<head>
<title>Microblogging App</title>
</head>
<body>
<h1>Welcome to the Microblogging App</h1>
<form action="/post" method="post">
<input type="text" name="postContent" placeholder="What's on your mind?">
<button type="submit">Post</button>
</form>
<h2>Recent Posts:</h2>
<ul id="postList">
<!-- Posts will be displayed here -->
</ul>
</body>
</html>
 CONCLUSION

In conclusion, the system design and architecture for the simple project
management dashboard presented herein provide a comprehensive
framework for creating an efficient and user-friendly task management tool.
This architecture encompasses the essential elements required for seamless
user interaction, data security, and scalability. With the combination of front-
end technologies, a robust back-end, secure user authentication, and a well-
structured database, users can easily add, modify, and track tasks while
switching their statuses among "Pending," "In Progress," or "Completed."
Additionally, the system emphasizes data security, scalability, and
responsiveness, ensuring a consistent and reliable user experience across
various devices. As the project management dashboard evolves to meet
increasing demands, this architectural foundation offers the flexibility to
accommodate enhancements and provide valuable insights into user behavior
through analytics, all while adhering to privacy regulations. Ultimately, this
design enables the creation of an effective and user-centric project
management tool suitable for both individual and team-based task tracking.
 VIVA QUESTIONS

Q1: What is a task management dashboard?

A1: A task management dashboard provides a centralized interface where users can view,
manage, and track the progress of their tasks or projects in an organized manner.

Q2: What key features should be included in a task management dashboard?

A2: Key features include task creation, assignment, prioritization, deadlines, progress tracking,
and reporting tools like charts or summaries.

Q3: How do you ensure data accuracy in a task management system?

A3: Data accuracy can be ensured by validating user inputs, implementing checks for data
consistency, and using database transactions to maintain data integrity.

Q4: How can you visualize task progress on the dashboard?

A4: Task progress can be visualized using charts (e.g., Gantt charts, pie charts), progress bars,
or Kanban boards that represent task status and completion.

Q5: What are the benefits of using a task management dashboard?

A5: Benefits include improved organization, increased productivity, better collaboration, and
real-time visibility into task progress and deadlines.

RESULT:
Ex No: DOMAIN: FULL STACK WEB DEVELOPMENT
DATE: PROJECT: SURVEY APPLICATION

SYSTEM REQUIREMENTS:
• CLIENT-SIDE: HTML, CSS, JAVASCRIPT
• SERVER-SIDE: JSON

SYSTEM ARCHITECTURE:

SYSTEM IMPLEMENTATION:
SOURCE CODE: HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/5.15.3/css/all.min.css">
<title>Random Survey</title>
</head>
<body>
<h1>Random Survey</h1>
<form id="survey-form">
<div id="questions-container">
<i class="fas fa-pencil-alt"></i> <!-- Pencil icon -->
<i class="fas fa-check-circle"></i> <!-- Check circle icon -->
</div>
<button class="custom-button primary-button">Submit</button>
</form>
<script type="text/javascript" src="./script.js" ></script>
</body>
</html>

CSS CODE:
/* Global Styles */ body {
font-family: 'Arial', sans-serif; margin: 0;
padding: 0;
background-image: url("sur-1.jpg"), linear-gradient(to bottom, rgba(62, 17,
241, 0.308), rgba(153, 9, 9, 0.736)); background-blend-mode: multiply;
background-repeat: no-repeat; background-size: cover;
background-color: #f7f7f7; /* Light Gray */
}
h1 {
text-align: center; margin: 30px 0;
font-family: 'YourChosenFont', sans-serif; color: #444; /* Dark Gray
*/
}
/* Fade-in Animation */
@keyframes fadeIn {
0% { opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Questions Container */ #questions-container {
margin: 20px auto;
max-width: 800px; /* Wider Container */ padding: 40px;
background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent white */ border: 1px solid #ddd;
border-radius: 20px; /* Rounded Corners */ box-shadow: 0 8px 16px
rgba(0, 0, 0, 0.2); animation: fadeIn 1s ease-in-out;
}
/* Question Styles */
.question { margin-bottom: 40px; padding:
30px;
background-color: #fddb3a; /* Warm Yellow */ border: 3px solid #f58634; /*
Pumpkin Orange */ border-radius: 20px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease; cursor: pointer;
}
.question:hover {
transform: translateY(-8px); /* Lift on Hover */ border-color: #e74c3c; /* Tomato
Red on Hover */ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.question p { font-weight: bold; margin-bottom: 15px;
color: #d35400; /* Dark Orange */
}

/* Textarea */ textarea { width: 100%;

padding: 15px; border: 2px solid #ccc;
border-radius: 10px; resize: vertical;
}

/* Custom Button Styles */ .custom-button {

display: inline-block;
padding: 12px 24px; border: none;
border-radius: 8px;
font-size: 16px; font-weight: bold;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Primary Button */ .primary-button {

background-color: #2ecc71; /* Emerald Green */ color: #fff;
}

.primary-button:hover {
background-color: #27ae60; /* Darker Green on Hover */ transform: translateY(-4px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
/* Secondary Button */ .secondary-button {
background-color: #3498db; /* Blue */ color: #fff;
}

.secondary-button:hover {
background-color: #2980b9; /* Darker Blue on Hover */
transform: translateY(-4px); box-shadow: 0 6px 12px rgba(0,
0, 0, 0.2);
}

/* Stylish Modal Overlay */ .modal-overlay {

position: fixed; top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */ display: none;
justify-content: center; align-items: center; z-index: 1000;
animation: fadeIn 0.5s ease-in-out;
}

.modal-content { background-color: #fff;

padding: 30px; border-radius: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); position: relative;
}

.close-button { position: absolute;

top: 10px; right: 15px; font-size:
24px; cursor: pointer; color: #888;
}

.close-button:hover { color: #555;

}

/* Custom Illustrations */
.illustration { max-width: 100%;
height: auto; display: block; margin: 0
auto;
}
JAVASCRIPT CODE:

const questionsContainer = document.getElementById('questions-container');

const surveyForm = document.getElementById('survey-form');
const fetchQuestions = async () => { try {
const response = await fetch('questions.json');
const data = await response.json();
console.log("DATA:",data)
return data.questions;
} catch (error) {
console.error('Error fetching questions:', error);
}
};
const renderQuestions = (questions) => {
questions.forEach((question, index) => {
const questionDiv = document.createElement('div');
questionDiv.classList.add('question');
questionDiv.innerHTML = `
<p>${index + 1}. ${question.text}</p>
<input type="text" name=${question.name} id=${question.name}></input>
`;
questionsContainer.appendChild(questionDiv);
});
};
surveyForm.addEventListener('submit', async (e) => {
e.preventDefault();
// Process form submission, handle answers

const data = new FormData(e.target);

const d = ([...data.entries()]); var c = [];
for (let i = 0;i<d.length;i++){
c.push(d[i][1]);
}
console.log(c)
fetch("http://localhost:3001/submit", { method: "POST",
body: JSON.stringify({ value:c
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
});
});
(async () => {
const questions = await fetchQuestions();
renderQuestions(questions);
})();

JSON FILE:
{
 "questions": [
{ "text": "what is your name?",
"name": "username"
},
{
"text": "What's your preferred social media platform?",
"name": "socialmedia"
},
{
"text": "What's the last movie you watched and loved?",
"name": "movie"
}, {
"text": "What's your favorite season of the year?",
"name": "season"
},
{
"text": "Are you more of an introvert or an extrovert?",
"name": "personality"
},
{
"text": "What is your profession?",
"name": "profession"
}
]
}

SNAPSHOTS:
CONCLUSION:
In conclusion, the development of an online survey application is a valuable endeavor that offers numerous
benefits for a wide range of users, including researchers, businesses, educational institutions, government
agencies, nonprofits, and more. Such an application, equipped with the capability to present users with random
sets of questions, fosters a more engaging and dynamic survey-taking experience.
VIVA QUESTIONS:

Q1:What is an online survey application?

A1: An online survey application allows users to design and distribute surveys over the internet, collect
responses, and analyze the data for research, feedback, or decision-making purposes.

Q2: What features are essential for an online survey application?

A2: Essential features include survey creation with customizable questions, response collection, data storage,
and analysis tools. It may also include features like skip logic, branching, and response validation.

Q3: How do you store and manage survey responses?

A3: Survey responses are typically stored in a database, where each response is associated with the
corresponding survey and user (if applicable). The data is organized in a way that allows easy retrieval and
analysis.

Q4: How can you ensure the security and privacy of survey participants?
A4: Security and privacy can be ensured by using HTTPS for secure data transmission, encrypting sensitive
data, implementing authentication for access control, and allowing anonymous responses if necessary.

Q5: What methods can be used to analyze the data collected from an online survey?
A5: Data analysis can be done using statistical tools or built-in analytics features within the application. This
can include generating reports, visualizing data through charts and graphs, and exporting data to CSV or other
formats for further analysis.

RESULT:
 PROJECT:TASK DASHBOARD WEB APP

SYSTEM REQUIREMENTS

● PC

● Vs Code

● Client Side- HTML, Javascript, CSS

● Server Side- Node js

SYSTEM DESIGN AND ARCHITECTURE

 CODE

Index.js

const express = require('express');

const bodyParser = require('body-parser');

const app = express(); const port

= 3000;

// Sample data to store posts const posts = [];

// Serve static HTML files app.use(express.static('public'));

app.use(bodyParser.urlencoded({ extended: true }));

// Handle POST requests to create new posts app.post('/post', (req, res) =>

const postContent = req.body.postContent;

if (postContent) {

// Store the new post in the array (in a real app, you'd use a database)

posts.push({ content: postContent, date: new Date() });

}
 res.redirect('/');

});

// Display recent posts app.get('/getPosts', (req, res)

=> {

res.json(posts);

});

app.listen(port, () => {

console.log(`Dashboard Task App listening on port ${port}`);

});

Dashboard.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

scale=1.0">

<title>Sample HTML Document</title>

<style>

body {

font-family: Arial, sans-serif; margin: 20px;

h1 {

color: #333;

}
 p{

line-height: 1.6;

</style>

</head>

<body>

<header>

<h1>Welcome to Our Sample HTML Document</h1>

<p>This is a sample HTML document that showcases various HTML elements and their
usage.</p>

</header>

<nav>

<ul>

<li><a href="#section1">Section 1</a></li>

<li><a href="#section2">Section 2</a></li>

<li><a href="#section3">Section 3</a></li>

</ul>

</nav>

<section id="section1">

<h2>Section 1: Introduction</h2>

<p>This is the first section of our sample document, which serves as an introduction to the
content.</p>

</section>

<section id="section2">

<h2>Section 2: Lists and Links</h2>

<p>Here's an unordered list:</p>

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

<p>And an ordered list:</p>

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

<p>Links to external websites:</p>

<ul>

<li><a href="https://www.example.com">Example.com</a></li>

<li><a href="https://www.openai.com">OpenAI</a></li>

</ul>

</section>

<section id="section3">

<h2>Section 3: Images and Forms</h2>

<p>Here's an image:</p>

<img src="https://via.placeholder.com/300" alt="Sample Image">

<p>A simple form with input fields:</p>

<form>

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<br>

<label for="email">Email:</label>
 <input type="email" id="email" name="email" required>

<br>

<input type="submit" value="Submit">

</form>

</section>

<footer>

<p>Thank you for exploring our sample HTML document. We hope you found it informative
and useful for learning HTML basics.</p>

</footer>

</body>

</html>index.html

<!DOCTYPE html>

<html>

<head>

<title>Microblogging App</title>

</head>

<body>

<h1>Welcome to the Microblogging App</h1>

<form action="/post" method="post">

<input type="text" name="postContent" placeholder="What's on your mind?">

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

</form>

<h2>Recent Posts:</h2>

<ul id="postList">

<!-- Posts will be displayed here -->

 </ul>

</body> </html>

CONCLUSION

In conclusion, the system design and architecture for the simple project
management dashboard presented herein provide a comprehensive
framework for creating an efficient and user-friendly task management tool.
This architecture encompasses the essential elements required for seamless
user interaction, data security, and scalability.
EX NO : TIME TABLE GENERATOR
DATE :

ABSTRACT:
The "Dynamic Subject Timetable Generator" is a React-based web application that allows
users to create personalized academic timetables. Users can input and manage subject names,
and the application generates a weekly timetable with a predefined structure, incorporating
the user's subjects. This project simplifies the process of scheduling and presents the
timetable in a neat and organized format, making it a useful tool for students and educators.

SYSTEM REQUIREMENTS:
● PC
● Vs Code
● Client Side- HTML, Javascript, CSS
● Server Side- Node j

SYSTEM DESIGN :

The "Dynamic Subject Timetable Generator" is a web application built using React. Its
system design and architecture can be described as follows:
Frontend:
The frontend is implemented using React, a popular JavaScript library for building user
interfaces.
React components are used to create the user interface for the application.
User Interface:
The user interface provides the following key elements:
A table to display the timetable.
An input field to enter subject names.
A button to add subjects to the timetable.
A subject list to view and manage the added subjects.
The user interacts with the UI to add subjects and see the updated timetable.
State Management:

React's state management is used to handle and update the state of the application.
State variables include the list of subjects, the new subject input, and the timetable structure.
Timetable Generation:
The application generates a timetable based on a predefined weekly schedule.
The weekly schedule includes days (Mon, Tue, Wed, etc.) and periods (1 to 8).
Subjects added by the user are dynamically inserted into the timetable.

User Actions:
Users can add subjects by entering subject names and clicking the "Add Subject" button.
Added subjects are displayed in a subject list.
The timetable is automatically updated to reflect the added subjects.

Styling:
CSS is used for styling the user interface, ensuring a neat and organized presentation of the
timetable.
Interactivity:
The application allows real-time interaction with users. Subjects are added to the timetable
and displayed instantly as they are entered.
Version Control (Optional):
The project can be managed using version control software like Git and hosted on platforms
like GitHub for collaboration and code sharing.

SYSTEM ARCHITECTURE :
The system architecture follows a client-side, single-page application (SPA) model, where the
user interacts with the application in the browser. React components are responsible for
rendering the UI and updating the state of the application. The architecture is straightforward,
making it easy to understand and maintain.
The "Dynamic Subject Timetable Generator" focuses on providing a user-friendly
interface for creating and viewing personalized academic timetables while following a
predefined timetable structure.
PROGRAM
CSS
div {
text-align: center;
margin: 20px;
}table {
border-collapse: collapse;
width: 100%;
}
table th {
background-color: #333;
color: #fff;
font-weight: bold;
padding: 10px;
border: 1px solid #000;}
table td {
 padding: 10px;
border: 1px solid #000;
text-align: center;}
table td.subject {
background-color: #f2f2f2;
font-weight: bold;
}
table td.break {
background-color: #ccc;
font-style: italic;}
table td.other {
background-color: #f9f9f9;
font-style: italic;
}

REACT

import React, { useState }

from 'react';
function App() {
const [subjects, setSubjects] = useState([]);
const [totalPeriodsPerDay, setTotalPeriodsPerDay] = useState(8);
const [timetable, setTimetable] = useState({});
const addSubject = (subjectName, subjectDuration) => {
setSubjects([...subjects, { name: subjectName, duration: parseInt(subjectDuration, 10) }]);
};
const removeSubject = (subjectIndex) => {
const updatedSubjects = [...subjects];
updatedSubjects.splice(subjectIndex, 1);
setSubjects(updatedSubjects);
};
const generateTimetable = () => {
const generatedTimetable = {};
const daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
daysOfWeek.forEach((day) => {
generatedTimetable[day] = [];
const totalHoursPerDay = totalPeriodsPerDay * 50 / 60; // 50 minutes per period
subjects.forEach((subject, index) => {
const totalHoursPerWeek = subject.duration * daysOfWeek.length;
const periodsPerDay = Math.ceil(totalHoursPerWeek / totalHoursPerDay);
const periodDuration = subject.duration / periodsPerDay;
for (let i = 0; i < totalPeriodsPerDay; i++) {
const startTime = 8 * 60 + i * 50;
const endTime = startTime + periodDuration;
generatedTimetable[day].push({
period: i + 1,
subject: subject.name,
duration: periodDuration,
startTime: getTimeString(startTime),
endTime: getTimeString(endTime),
});
}
});
});setTimetable(generatedTimetable);
};const getTimeString = (minutes) => {
const hours = Math.floor(minutes / 60);
const mins = minutes % 60;
return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
};
return (
<div>
 <h1>Timetable Generator</h1>
<div>
<label>Add Subject:</label>
<input type="text" placeholder="Subject Name" id="subjectName" />
<input type="number" placeholder="Total Hours per Week" id="subjectDuration" />
<button onClick={() => addSubject(document.getElementById("subjectName").value,
document.getElementById("subjectDuration").value)}>
Add Subject
</button>
</div>
<div>
<label>Total Periods per Day: </label>
<input type="number" value={totalPeriodsPerDay} onChange={(e) =>
setTotalPeriodsPerDay(e.target.value)} />
</div>
<div>
<h2>Subjects</h2>
<ul>
{subjects.map((subject, index) => (
<li key={index}>
{subject.name} - {subject.duration} total hours per week
<button onClick={() => removeSubject(index)}>Remove</button>
</li>
))}
</ul>
</div>

<div>
<button onClick={generateTimetable}>Generate Timetable</button>
</div>
<table>
 <thead>
<tr>
<th>Day/Hour</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>BREAK</th>
<th>4</th>
<th>5</th>
<th>BREAK</th>
<th>6</th>
<th>7</th>
<th>8</th>
</tr>
</thead>
<tbody>
{schedule.map((daySchedule, dayIndex) => (
<tr key={dayIndex}>
<td>{['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'][dayIndex]}</td>
{daySchedule.map((subject, subjectIndex) => (
<td key={subjectIndex}>{subject}</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);} <div>
<h2>Generated Timetable</h2>
<table>
 <thead>
<tr>
<th>Day</th>
<th>Period</th>
<th>Subject</th>
<th>Duration (minutes)</th>
<th>Start Time</th>
<th>End Time</th>
</tr>
</thead>
<tbody>
{Object.keys(timetable).map((day) => (
timetable[day].map((entry, index) => (
<tr key={day + index}>
<td>{day}</td>
<td>{entry.period}</td>
<td>{entry.subject}</td>
<td>{entry.duration}</td>
<td>{entry.startTime}</td>
<td>{entry.endTime}</td>
</tr>
))
))}
</tbody>
</table>
</div>
</div>);}
export default App;
SNAPSHOTS :

CONCLUSION:
The " Timetable Generator" is a user-friendly and versatile web application built using Reactthat
simplifies the process of creating and visualizing personalized academic timetables. Thisproject
addresses the need for an intuitive and efficient tool for students, educators, and individuals who
require a clear and organized schedule.
 Development of APP for Student Attendance with ID BAR CODE

Abstract

This project aims to create a full-stack web application that automates student attendance using barcode scanning
technology. Students will scan their ID barcodes to mark their attendance, and the system will store, manage, and
track this data in a database. The system includes user authentication for students and teachers, allowing secure
access to attendance records. Administrators can generate reports, while students and teachers can view
attendance statistics.

System Requirements
Software Requirements:

• Front-End: HTML5, CSS3, JavaScript, React.js

• Back-End: Node.js with Express.js
• Database: MongoDB (or MySQL/PostgreSQL as an alternative)
• Barcode Scanner: External or in-app barcode scanner using a camera (for mobile/web)
• Authentication: JSON Web Tokens (JWT) for secure authentication
• Package Manager: npm/yarn

Hardware Requirements:

• Scanner: Either external barcode scanner or a webcam capable of scanning barcodes.

• Server: Cloud service or local machine with Node.js environment.

System Architecture

1. User Interface (UI): The user interface will allow students to scan their barcodes and see their
attendance history. Teachers will have the ability to view attendance reports for all students.
2. API Layer: RESTful APIs using Express.js will handle the communication between the front-end and
the back-end server.
3. Database: MongoDB will store student and attendance records. This data will be managed and accessed
through APIs.
4. Barcode Scanning Integration: For web, we'll use JavaScript libraries such as quaggaJS or zxing to
read barcodes via the webcam. For mobile or external scanners, the input will be handled via APIs.

Code
1. Front-End (React.js)

• App.js

import React, { useState } from "react";

import BarcodeScannerComponent from "react-qr-barcode-scanner";

function App() {

const [data, setData] = useState("No result");

 return (

<div className="App">

<h1>Student Attendance System</h1>

<BarcodeScannerComponent

width={500}

height={500}

onUpdate={(err, result) => {

if (result) setData(result.text);

}}

/>

<p>Barcode Data: {data}</p>

</div>

);

export default App;

index.js:

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);
 Style (CSS)

.App {

text-align: center;

font-family: Arial, sans-serif;

margin: 20px;

2. Back-End (Node.js + Express)

• app.js

const express = require('express');

const mongoose = require('mongoose');

const bodyParser = require('body-parser');

const cors = require('cors');

const jwt = require('jsonwebtoken');

const app = express();

app.use(cors());

app.use(bodyParser.json());

// Connect to MongoDB

mongoose.connect('mongodb://localhost:27017/student_attendance', {

useNewUrlParser: true,

useUnifiedTopology: true

});

// Attendance Schema
const attendanceSchema = new mongoose.Schema({

studentId: String,

date: { type: Date, default: Date.now }

});
const Attendance = mongoose.model('Attendance', attendanceSchema);

// Route to mark attendance

app.post('/attendance', authenticateToken, (req, res) => {

const attendance = new Attendance({

studentId: req.body.studentId,

});

attendance.save()

.then(() => res.status(200).send('Attendance marked'))

.catch((err) => res.status(500).send('Error saving attendance'));

});

// JWT Authentication Middleware

function authenticateToken(req, res, next) {

const token = req.headers['authorization'];

if (!token) return res.sendStatus(403);

jwt.verify(token, process.env.ACCESS_TOKEN_SECRET, (err, user) => {

if (err) return res.sendStatus(403);

req.user = user;

next();

});

// Start the server

app.listen(3000, () => {

console.log('Server is running on port 3000');

});
 package.json

"name": "student-attendance-system",

"version": "1.0.0",

"main": "app.js",

"scripts": {

"start": "node app.js"

},

"dependencies": {

"express": "^4.17.1",

"mongoose": "^5.11.15",

"cors": "^2.8.5",

"body-parser": "^1.19.0",

"jsonwebtoken": "^8.5.1"

Database Setup
mongo

use student_attendance

db.createCollection("attendances")
 Development of APP for Student Achievement in Department
Abstract

This project focuses on the development of a student achievement management system for an academic
department. The system aims to track, manage, and analyze student achievements, including academic records,
extracurricular participation, awards, and certifications. The system will be implemented as a full-stack web
application, providing interfaces for students, teachers, and administrators. The app will offer functionalities such
as viewing and submitting achievements, as well as generating reports to analyze overall student performance.
This system will help administrators to better monitor and encourage student success within the department.

System Requirements
Software Requirements

• Front-End: React.js (JavaScript, HTML5, CSS3)

• Back-End: Node.js with Express.js
• Database: MongoDB (or MySQL/PostgreSQL as alternatives)
• Authentication: JSON Web Tokens (JWT) for secure user login
• Framework: Material UI for styling and UI components
• Package Manager: npm or yarn for managing dependencies

Hardware Requirements

• Standard PC or server for hosting the application

• Database server for storing student records

System Architecture
1. User Interface (UI): Students can log in and submit their achievements (e.g., certificates, awards). Teachers and
administrators can log in to review these submissions and generate performance reports.
2. API Layer: RESTful APIs using Express.js will be used for interactions between the front-end and back-end
systems.
3. Database: A NoSQL or relational database will store student details, achievements, and their metadata.
4. Reporting & Analytics: Data visualization libraries (such as Chart.js or D3.js) will be integrated to analyze
student achievements over time.

Code
1. Front-End (React.js)

• App.js

import React, { useState, useEffect } from "react";

import AchievementForm from './AchievementForm';

import AchievementList from './AchievementList';

import axios from 'axios';

function App() {

const [achievements, setAchievements] = useState([]);

 useEffect(() => {

axios.get('/api/achievements').then(response => {

setAchievements(response.data);

});

}, []);

return (

<div className="App">

<h1>Student Achievement System</h1>

<AchievementForm setAchievements={setAchievements} />

<AchievementList achievements={achievements} />

</div>

);

export default App;

AchievementForm.js

import React, { useState } from "react";

import axios from "axios";

function AchievementForm({ setAchievements }) {

const [formData, setFormData] = useState({

title: "",

description: "",

date: "",

category: "",

});
const handleSubmit = (e) => {

e.preventDefault();

axios.post('/api/achievements', formData).then(response => {

setAchievements(prev => [...prev, response.data]);

});

};

return (

<form onSubmit={handleSubmit}>

<input

type="text"

placeholder="Achievement Title"

value={formData.title}

onChange={(e) => setFormData({ ...formData, title: e.target.value })}

/>

<input

type="text"

placeholder="Description"

value={formData.description}

onChange={(e) => setFormData({ ...formData, description: e.target.value })}

/>

<input

type="date"

value={formData.date}

onChange={(e) => setFormData({ ...formData, date: e.target.value })}

/>

<input

type="text"
 placeholder="Category"

value={formData.category}

onChange={(e) => setFormData({ ...formData, category: e.target.value })}

/>

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

</form>

);

export default AchievementForm;

• AchievementList.js

import React from "react";

function AchievementList({ achievements }) {

return (

<div>

<h2>Achievements</h2>

<ul>

{achievements.map((achievement, index) => (

<li key={index}>

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

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

<small>{achievement.date}</small>

</li>

))}

</ul>

</div>

);
 }

export default AchievementList;

2. Back-End (Node.js + Express.js)

• app.js

const express = require('express');

const mongoose = require('mongoose');

const cors = require('cors');

const bodyParser = require('body-parser');

const app = express();

app.use(cors());

app.use(bodyParser.json());

// MongoDB connection

mongoose.connect('mongodb://localhost:27017/student_achievement', {

useNewUrlParser: true,

useUnifiedTopology: true,

});

// Achievement Schema

const achievementSchema = new mongoose.Schema({

title: String,

description: String,

date: Date,

category: String,
 studentId: String,

});

const Achievement = mongoose.model('Achievement', achievementSchema);

// Get all achievements

app.get('/api/achievements', (req, res) => {

Achievement.find()

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

.catch((err) => res.status(500).send(err));

});

// Add a new achievement

app.post('/api/achievements', (req, res) => {

const newAchievement = new Achievement(req.body);

newAchievement.save()

.then(() => res.status(200).json(newAchievement))

.catch((err) => res.status(500).send(err));

});

// Start server

app.listen(3000, () => {

console.log('Server is running on port 3000');

});
package.json

"name": "student-achievement-system",

"version": "1.0.0",

"main": "app.js",

"scripts": {

"start": "node app.js"

},

"dependencies": {

"express": "^4.17.1",

"mongoose": "^5.11.15",

"cors": "^2.8.5",

"body-parser": "^1.19.0"

Database Setup

mongo

use student_achievement

db.createCollection("achievements")
 Development of APP for Student Result Analysis with parents tracking system

Abstract
This project is focused on developing a full-stack application for student result analysis with a parent tracking
system. The app will allow teachers to input student results and track their academic progress over time. It will
provide detailed analytics on student performance and notify parents when their children’s grades fall below a
certain threshold. The system will facilitate improved communication between the school and parents, enabling
both parties to closely monitor and respond to the student’s academic performance.

System Requirements
Software Requirements

• Front-End: React.js (JavaScript, HTML5, CSS3)

• Back-End: Node.js with Express.js
• Database: MongoDB (or MySQL/PostgreSQL as alternatives)
• Authentication: JSON Web Tokens (JWT) for secure access
• Notification System: Email notifications using Nodemailer or similar services
• Data Visualization: Chart.js/D3.js for result analytics

Hardware Requirements

• Server/PC to host the web application

• Database server to store student and result data
• Email server for sending notifications to parents

System Architecture
1. User Interface (UI): Teachers can input student results, and both parents and students can log in to view the
performance reports. The system will also offer analytical graphs for easier visualization of results.
2. Parent Tracking System: The system will automatically send notifications to parents when students’ results fall
below a certain threshold. It will also allow parents to schedule meetings with teachers if needed.
3. Database: A NoSQL (MongoDB) or SQL database will store student details, results, and parent contact
information.
4. Analytics: The system will use data visualization tools to analyze and display trends in student performance,
helping teachers and parents to identify areas needing attention.

Code
1. Front-End (React.js)

• App.js

import React, { useState, useEffect } from "react";

import ResultForm from './ResultForm';

import ResultList from './ResultList';

import axios from 'axios';

function App() {

const [results, setResults] = useState([]);

 useEffect(() => {

axios.get('/api/results').then(response => {

setResults(response.data);

});

}, []);

return (

<div className="App">

<h1>Student Result Analysis with Parent Tracking</h1>

<ResultForm setResults={setResults} />

<ResultList results={results} />

</div>

);

export default App;

ResultForm.js

import React, { useState } from "react";

import axios from "axios";

function ResultForm({ setResults }) {

const [formData, setFormData] = useState({

studentName: "",

subject: "",

marks: "",

parentEmail: ""

});

const handleSubmit = (e) => {

e.preventDefault();

axios.post('/api/results', formData).then(response => {

 setResults(prev => [...prev, response.data]);

});

};

return (

<form onSubmit={handleSubmit}>

<input

type="text"

placeholder="Student Name"

value={formData.studentName}

onChange={(e) => setFormData({ ...formData, studentName: e.target.value })}

/>

<input

type="text"

placeholder="Subject"

value={formData.subject}

onChange={(e) => setFormData({ ...formData, subject: e.target.value })}

/>

<input

type="number"

placeholder="Marks"

value={formData.marks}

onChange={(e) => setFormData({ ...formData, marks: e.target.value })}

/>

<input

type="email"

placeholder="Parent Email"

value={formData.parentEmail}

onChange={(e) => setFormData({ ...formData, parentEmail: e.target.value })}

/>

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

</form>
 );

export default ResultForm;

ResultList.js

import React from "react";

function ResultList({ results }) {

return (

<div>

<h2>Results</h2>

<ul>

{results.map((result, index) => (

<li key={index}>

<h3>{result.studentName}</h3>

<p>{result.subject} - {result.marks} Marks</p>

<small>Parent Email: {result.parentEmail}</small>

</li>

))}

</ul>

</div>

);

export default ResultList;

2. Back-End (Node.js + Express.js)

• app.js

const express = require('express');

const mongoose = require('mongoose');

const bodyParser = require('body-parser');

const nodemailer = require('nodemailer');

const cors = require('cors');

const app = express();

app.use(cors());

app.use(bodyParser.json());

// Connect to MongoDB

mongoose.connect('mongodb://localhost:27017/student_results', {

useNewUrlParser: true,

useUnifiedTopology: true

});

// Result Schema

const resultSchema = new mongoose.Schema({

studentName: String,

subject: String,

marks: Number,

parentEmail: String

});

const Result = mongoose.model('Result', resultSchema);

// Email notification function

async function sendEmailNotification(email, studentName, marks) {

let transporter = nodemailer.createTransport({

service: 'gmail',
 auth: {

user: 'your-email@gmail.com',

pass: 'your-password'

});

let info = await transporter.sendMail({

from: '"School Admin" <your-email@gmail.com>',

to: email,

subject: 'Student Performance Alert',

text: `Dear Parent, Your child ${studentName} has scored ${marks} marks, which is below the
threshold.`,

html: `<b>Dear Parent,</b><br>Your child <b>${studentName}</b> has scored

<b>${marks}</b> marks, which is below the threshold.`

});

console.log('Message sent: %s', info.messageId);

// Route to add result and send notification if marks are below threshold

app.post('/api/results', (req, res) => {

const newResult = new Result(req.body);

newResult.save()

.then(() => {

// Send notification if marks < 40

if (req.body.marks < 40) {

sendEmailNotification(req.body.parentEmail, req.body.studentName, req.body.marks);

res.status(200).json(newResult);

})

.catch((err) => res.status(500).send(err));

});
// Route to get all results

app.get('/api/results', (req, res) => {

Result.find()

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

.catch(err => res.status(500).send(err));

});

// Start the server

app.listen(3000, () => {

console.log('Server is running on port 3000');

});

package.json

"name": "student-result-analysis",

"version": "1.0.0",

"main": "app.js",

"scripts": {

"start": "node app.js"

},

"dependencies": {

"express": "^4.17.1",

"mongoose": "^5.11.15",

"nodemailer": "^6.4.6",

"body-parser": "^1.19.0",

"cors": "^2.8.5"

}
 Database Setup

mongo

use student_results

db.createCollection("results")

Conclusion

The Student Result Analysis with Parent Tracking System helps improve academic performance by analyzing
results and notifying parents when students are struggling. The system creates a collaborative environment
between parents, students, and teachers, allowing for proactive interventions to improve student performance.

Viva Questions

1. What is the purpose of the parent tracking system in this application?

o The parent tracking system notifies parents when their child’s academic performance falls below a
threshold, promoting engagement and allowing for timely interventions.
2. What technologies are used in the front-end and back-end?
o React.js is used for the front-end, while Node.js/Express is used for the back-end. The database is managed
using MongoDB.
3. How are email notifications triggered?
o Email notifications are triggered when a student’s marks fall below a certain threshold (e.g., less than 40),
and they are sent via the Nodemailer library.
4. Why did you choose MongoDB for this project?
o MongoDB’s schema flexibility makes it suitable for evolving applications and allows for easy storage of
student and parent information.
5. How can the system be extended in the future?
o The system can be extended to include SMS notifications, mobile app integration, and more advanced
analytics such as predictive performance tracking.

Result: