1.
PORTFOLIO WEBSITE
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Your Name</h1>
<p>Web Developer | Designer | Creative Thinker</p>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>This is where you can introduce yourself. Talk about your experience, skills, and what
you’re passionate about.</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<div class="portfolio-grid">
<div class="portfolio-item">
<img src="[Link]" alt="Project 1">
<h3>Project Title</h3>
<p>Short description of the project.</p>
</div>
<div class="portfolio-item">
<img src="[Link]" alt="Project 2">
<h3>Project Title</h3>
<p>Short description of the project.</p>
</div>
<!-- Add more portfolio items as needed -->
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<form id="contact-form">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" placeholder="Your Message" required></textarea>
<button type="submit">Send</button>
</form>
</section>
<footer>
<p>© 2023 Your Name. All rights reserved.</p>
</footer>
<script src="[Link]"></script>
</body>
</html>
[Link]:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
color: #333;
}
header {
text-align: center;
padding: 1rem;
background: #333;
color: #fff;
}
header h1 {
margin-bottom: 0.5rem;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
padding: 1rem 0;
}
nav ul li {
margin: 0 1rem;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
padding: 2rem 1rem;
max-width: 800px;
margin: 0 auto;
}
#portfolio {
background: #f4f4f4;
}
.portfolio-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.portfolio-item {
background: #fff;
padding: 1rem;
border: 1px solid #ddd;
text-align: center;
}
.portfolio-item img {
max-width: 100%;
height: auto;
margin-bottom: 1rem;
}
#contact-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
#contact-form input,
#contact-form textarea {
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 5px;
}
#contact-form button {
padding: 0.5rem;
background: #333;
color: #fff;
border: none;
cursor: pointer;
border-radius: 5px;
}
footer {
text-align: center;
padding: 1rem;
background: #333;
color: #fff;
}
[Link]
[Link]('contact-form').addEventListener('submit', function(e) {
[Link]();
alert('Thank you for your message!');
});
OUTPUT:
2. TO-DO LIST
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<div class="input-section">
<input type="text" id="taskInput" placeholder="Add a new task...">
<button onclick="addTask()">Add Task</button>
</div>
<ul id="taskList"></ul>
</div>
<script src="[Link]"></script>
</body>
</html>
[Link]
/* Basic Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
}
.container {
background: #fff;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 400px;
text-align: center;
}
h1 {
margin-bottom: 1rem;
color: #333;
}
.input-section {
display: flex;
margin-bottom: 1rem;
}
input[type="text"] {
flex: 1;
padding: 0.5rem;
font-size: 1rem;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
padding: 0.5rem 1rem;
font-size: 1rem;
color: #fff;
background-color: #28a745;
border: none;
border-radius: 4px;
margin-left: 0.5rem;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem;
background: #f9f9f9;
border-bottom: 1px solid #ddd;
border-radius: 4px;
margin-top: 0.5rem;
}
[Link] {
text-decoration: line-through;
color: #888;
}
li .delete-btn {
background-color: #dc3545;
color: #fff;
border: none;
padding: 0.3rem 0.5rem;
border-radius: 4px;
cursor: pointer;
}
li .delete-btn:hover {
background-color: #c82333;
}
[Link]
// Function to add a new task
function addTask() {
const taskInput = [Link]("taskInput");
const taskText = [Link]();
if (taskText === "") {
alert("Please enter a task.");
return;
}
const taskList = [Link]("taskList");
const li = [Link]("li");
// Task text
const taskContent = [Link]("span");
[Link] = taskText;
[Link] = function () {
[Link]("completed");
};
// Delete button
const deleteButton = [Link]("button");
[Link] = "Delete";
[Link]("delete-btn");
[Link] = function () {
[Link](li);
};
[Link](taskContent);
[Link](deleteButton);
[Link](li);
// Clear input
[Link] = "";
}
OUTPUT:
3. MICRO BLOGGING WEBSITE
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Micro-Blog</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<header>
<h1>Micro-Blog</h1>
<p>Share your thoughts in a few words</p>
</header>
<section class="post-form">
<textarea id="post-content" placeholder="What's on your mind?" rows="3"></textarea>
<button id="post-button">Post</button>
</section>
<section id="post-feed" class="post-feed">
<!-- Posts will appear here -->
</section>
</div>
<script src="[Link]"></script>
</body>
</html>
[Link]
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f9;
}
.container {
width: 100%;
max-width: 500px;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
header {
text-align: center;
margin-bottom: 20px;
}
header h1 {
font-size: 2rem;
color: #333;
}
header p {
color: #555;
}
.post-form {
margin-bottom: 20px;
}
#post-content {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
resize: none;
}
#post-button {
width: 100%;
padding: 10px;
margin-top: 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#post-button:hover {
background-color: #555;
}
.post-feed {
display: flex;
flex-direction: column;
gap: 15px;
}
.post {
padding: 15px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
}
.post .content {
font-size: 1rem;
color: #333;
}
.post .timestamp {
margin-top: 5px;
font-size: 0.85rem;
color: #888;
text-align: right;
}
[Link]
[Link]('post-button').addEventListener('click', addPost);
function addPost() {
const postContent = [Link]('post-content').[Link]();
if (postContent === '') {
alert('Please enter some content before posting!');
return;
}
const postFeed = [Link]('post-feed');
const postItem = [Link]('div');
[Link]('post');
const content = [Link]('p');
[Link]('content');
[Link] = postContent;
const timestamp = [Link]('span');
[Link]('timestamp');
[Link] = new Date().toLocaleString();
[Link](content);
[Link](timestamp);
[Link](postItem);
[Link]('post-content').value = '';
}
OUTPUT:
4. FOOD DELIVERY WEBSITE
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Delivery</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Food Delivery</h1>
<p>Delivering delicious food right to your door</p>
</header>
<section class="menu">
<h2>Menu</h2>
<div class="food-item" data-price="10">
<h3>Pizza</h3>
<p>$10</p>
<button onclick="addToCart('Pizza', 10)">Add to Cart</button>
</div>
<div class="food-item" data-price="7">
<h3>Burger</h3>
<p>$7</p>
<button onclick="addToCart('Burger', 7)">Add to Cart</button>
</div>
<div class="food-item" data-price="12">
<h3>Pasta</h3>
<p>$12</p>
<button onclick="addToCart('Pasta', 12)">Add to Cart</button>
</div>
<div class="food-item" data-price="5">
<h3>Salad</h3>
<p>$5</p>
<button onclick="addToCart('Salad', 5)">Add to Cart</button>
</div>
</section>
<section class="cart">
<h2>Your Cart</h2>
<ul id="cart-items"></ul>
<p>Total: $<span id="cart-total">0</span></p>
</section>
<script src="[Link]"></script>
</body>
</html>
[Link]
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: #f8f9fa;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 20px;
}
header h1 {
font-size: 2rem;
color: #333;
}
header p {
color: #555;
}
.menu, .cart {
width: 100%;
max-width: 400px;
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h2 {
font-size: 1.5rem;
color: #333;
margin-bottom: 10px;
}
.food-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.food-item h3 {
font-size: 1.2rem;
color: #333;
}
button {
padding: 5px 10px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
.cart ul {
list-style-type: none;
margin-bottom: 10px;
}
.cart li {
margin-bottom: 5px;
color: #333;
}
#cart-total {
font-weight: bold;
color: #333;
}
[Link]
let cart = [];
function addToCart(itemName, itemPrice) {
const item = { name: itemName, price: itemPrice };
[Link](item);
updateCart();
}
function updateCart() {
const cartItemsContainer = [Link]('cart-items');
[Link] = '';
let total = 0;
[Link](item => {
const listItem = [Link]('li');
[Link] = `${[Link]} - $${[Link]}`;
[Link](listItem);
total += [Link];
});
[Link]('cart-total').textContent = total;
}
OUTPUT:
5. LEAVE MANAGEMENT SYSTEM USING [Link]
// src/components/[Link]
import React, { useState } from 'react';
import LeaveForm from './LeaveForm';
import LeaveBalance from './LeaveBalance';
import './[Link]'; // Import the global CSS
const App = () => {
const [balance, setBalance] = useState({
casual: 10,
medical: 5,
});
const handleApplyLeave = ({ leaveType, days }) => {
if (balance[leaveType] >= days) {
setBalance((prevBalance) => ({
...prevBalance,
[leaveType]: prevBalance[leaveType] - days,
}));
alert(`Leave applied successfully for ${days} ${leaveType} days.`);
} else {
alert(`Insufficient ${leaveType} leave days.`);
}
};
return (
<div className="container">
<h1>Leave Management System</h1>
<div className="leave-balance">
<LeaveBalance balance={balance} />
</div>
<LeaveForm onApplyLeave={handleApplyLeave} />
<footer>
<p>© 2024 Your Organization</p>
</footer>
</div>
);
};
export default App;
//[Link]
import React from 'react';
import ReactDOM from 'react-dom/client';
import './[Link]';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = [Link]([Link]('root'));
[Link](
<[Link]>
<App />
</[Link]>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals([Link]))
// or send to an analytics endpoint. Learn more: [Link]
reportWebVitals();
// src/components/[Link]
import React from 'react';
const LeaveBalance = ({ balance }) => {
return (
<div>
<h3>Leave Balance</h3>
<p>Casual Leave: {[Link]}</p>
<p>Medical Leave: {[Link]}</p>
</div>
);
};
export default LeaveBalance;
// src/components/[Link]
import React, { useState } from 'react';
import './[Link]'; // Import the CSS file
const LeaveForm = ({ onApplyLeave }) => {
const [leaveType, setLeaveType] = useState('casual');
const [days, setDays] = useState(1);
const handleSubmit = (e) => {
[Link]();
onApplyLeave({ leaveType, days });
setDays(1); // Reset days after submission
};
return (
<form className="leave-form" onSubmit={handleSubmit}>
<h3>Apply for Leave</h3>
<label>
Leave Type:
<select value={leaveType} onChange={(e) => setLeaveType([Link])}>
<option value="casual">Casual Leave</option>
<option value="medical">Medical Leave</option>
</select>
</label>
<label>
Number of Days:
<input
type="number"
min="1"
value={days}
onChange={(e) => setDays([Link])}
/>
</label>
<button type="submit">Apply Leave</button>
</form>
);
};
export default LeaveForm;
/* src/components/[Link] */
.leave-form {
border: 1px solid #ccc;
border-radius: 8px;
padding: 20px;
max-width: 400px;
margin: 20px auto;
background-color: #b12e2e;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.leave-form h3 {
text-align: center;
margin-bottom: 20px;
}
.leave-form label {
display: block;
margin-bottom: 10px;
}
.leave-form select,
.leave-form input {
width: 90%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.leave-form button {
width: 100%;
padding: 10px;
background-color: #c7cd25;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.leave-form button:hover {
background-color: #0056b3;
}
OUTPUT:
6. PROJECT MANAGEMENT DASHBOARD USING [Link]
### 1. Project Setup
#### Tools Required
- **[Link]**: Ensure you have [Link] installed.
- **Create React App**: For bootstrapping your React application.
#### Initial Setup
1. **Create a New React App**:
```bash
npx create-react-app project-dashboard
cd project-dashboard
```
2. **Install Dependencies** (if needed):
You can add libraries like `uuid` for generating unique task IDs.
```bash
npm install uuid
```
### 2. Application Structure
Organize your app with the following structure:
```
project-dashboard/
├── src/
│ ├── components/
│ │ ├── [Link]
│ │ ├── [Link]
│ │ └── [Link]
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
```
### 3. Core Components
#### 3.1. App Component
In `[Link]`, manage the state for tasks and render the form and task list.
```javascript
import React, { useState } from 'react';
import TaskForm from './components/TaskForm';
import TaskList from './components/TaskList';
import './[Link]';
const App = () => {
const [tasks, setTasks] = useState([]);
const addTask = (task) => {
setTasks([...tasks, task]);
};
const updateTaskStatus = (id, status) => {
const updatedTasks = [Link]((task) =>
[Link] === id ? { ...task, status } : task
);
setTasks(updatedTasks);
};
return (
<div className="app">
<h1>Project Management Dashboard</h1>
<TaskForm addTask={addTask} />
<TaskList tasks={tasks} updateTaskStatus={updateTaskStatus} />
</div>
);
};
export default App;
```
#### 3.2. Task Form Component
In `[Link]`, create a form to add new tasks.
```javascript
import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
const TaskForm = ({ addTask }) => {
const [title, setTitle] = useState('');
const handleSubmit = (e) => {
[Link]();
if ([Link]()) {
const newTask = {
id: uuidv4(),
title,
status: 'Pending',
};
addTask(newTask);
setTitle('');
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={title}
onChange={(e) => setTitle([Link])}
placeholder="Enter task title"
required
/>
<button type="submit">Add Task</button>
</form>
);
};
export default TaskForm;
```
#### 3.3. Task List Component
In `[Link]`, render the list of tasks.
```javascript
import React from 'react';
import TaskItem from './TaskItem';
const TaskList = ({ tasks, updateTaskStatus }) => {
return (
<div>
<h2>Task List</h2>
<ul>
{[Link]((task) => (
<TaskItem key={[Link]} task={task} updateTaskStatus={updateTaskStatus} />
))}
</ul>
</div>
);
};
export default TaskList;
```
#### 3.4. Task Item Component
In `[Link]`, create a component for each task item, allowing users to change the status.
```javascript
import React from 'react';
const TaskItem = ({ task, updateTaskStatus }) => {
const handleChange = (e) => {
updateTaskStatus([Link], [Link]);
};
return (
<li>
<span>{[Link]}</span>
<select value={[Link]} onChange={handleChange}>
<option value="Pending">Pending</option>
<option value="InProgress">In Progress</option>
<option value="Completed">Completed</option>
</select>
</li>
);
};
export default TaskItem;
```
### 4. Basic Styling
In `[Link]`, add some basic styles to make the dashboard look better.
```css
.app {
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
}
h1 {
text-align: center;
}
form {
display: flex;
justify-content: space-between;
}
input {
flex: 1;
padding: 10px;
margin-right: 10px;
}
button {
padding: 10px 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
}
```
### 5. Run Your Application
Now, run your application to see the project management dashboard in action:
```bash
npm start
```
OUTPUT:
7. ONLINE SURVEY APPLICATION USING [Link]
### 1. Project Setup
#### Initial Setup
1. **Create a New React App**:
```bash
npx create-react-app online-survey
cd online-survey
```
2. **Install Dependencies** (if necessary):
You may want to install a UUID library for generating unique question IDs.
```bash
npm install uuid
```
### 2. Application Structure
Organize your app with the following structure:
```
online-survey/
├── src/
│ ├── components/
│ │ ├── [Link]
│ │ └── [Link]
│ ├── data/
│ │ └── [Link]
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
```
### 3. Sample Questions Data
Create a file `[Link]` in the `data` folder that contains a list of questions.
```javascript
// src/data/[Link]
const questions = [
{ id: 1, text: "What is your favorite color?" },
{ id: 2, text: "What is your favorite food?" },
{ id: 3, text: "Where do you like to travel?" },
{ id: 4, text: "What is your hobby?" },
{ id: 5, text: "What is your favorite movie?" },
{ id: 6, text: "What sport do you enjoy?" },
{ id: 7, text: "What is your dream job?" },
{ id: 8, text: "What is your favorite book?" },
{ id: 9, text: "What is your favorite season?" },
{ id: 10, text: "What is your pet's name?" },
];
export default questions;
```
### 4. Core Components
#### 4.1. App Component
In `[Link]`, you will manage the selection of random questions and render the survey
component.
```javascript
import React, { useState, useEffect } from 'react';
import Survey from './components/Survey';
import questions from './data/questions';
import './[Link]';
const App = () => {
const [selectedQuestions, setSelectedQuestions] = useState([]);
useEffect(() => {
// Shuffle questions and select 5
const shuffledQuestions = [Link](() => 0.5 - [Link]());
setSelectedQuestions([Link](0, 5));
}, []);
return (
<div className="app">
<h1>Online Survey</h1>
<Survey questions={selectedQuestions} />
</div>
);
};
export default App;
```
#### 4.2. Survey Component
In `[Link]`, render the questions and collect user responses.
```javascript
import React, { useState } from 'react';
import Question from './Question';
const Survey = ({ questions }) => {
const [responses, setResponses] = useState({});
const handleChange = (id, answer) => {
setResponses((prev) => ({ ...prev, [id]: answer }));
};
const handleSubmit = (e) => {
[Link]();
[Link]('Responses:', responses);
// Handle the response submission (e.g., send to a server)
alert('Survey submitted! Check the console for responses.');
};
return (
<form onSubmit={handleSubmit}>
{[Link]((question) => (
<Question
key={[Link]}
question={question}
handleChange={handleChange}
/>
))}
<button type="submit">Submit Survey</button>
</form>
);
};
export default Survey;
```
#### 4.3. Question Component
In `[Link]`, create a component for displaying each question.
```javascript
import React from 'react';
const Question = ({ question, handleChange }) => {
return (
<div className="question">
<label>{[Link]}</label>
<input
type="text"
onChange={(e) => handleChange([Link], [Link])}
placeholder="Your answer"
required
/>
</div>
);
};
export default Question;
```
### 5. Basic Styling
In `[Link]`, add some basic styles to enhance the UI.
```css
.app {
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f9f9f9;
}
h1 {
text-align: center;
}
.question {
margin: 15px 0;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
```
### 6. Run Your Application
Now, you can run your application:
```bash
npm start
```
OUTPUT:
8. CLASSIFIEDS WEB APPLICATION USING REACT FOR THE FRONTEND AND A
SIMPLE [Link]/EXPRESS BACKEND
### Project Overview
1. **Frontend**: React application to handle UI and interactions.
2. **Backend**: [Link] with Express to handle API requests and database interactions.
3. **Database**: Use MongoDB or any other database to store user and product data.
### 1. Project Setup
#### Frontend Setup
1. **Create React App**:
```bash
npx create-react-app classifieds-app
cd classifieds-app
```
2. **Install Dependencies**:
Install necessary packages:
```bash
npm install react-router-dom axios
```
#### Backend Setup
1. **Create Backend Folder**:
In a separate directory, create a new folder for the backend:
```bash
mkdir classifieds-backend
cd classifieds-backend
npm init -y
npm install express mongoose cors body-parser dotenv
```
### 2. Backend Development
#### Basic Server Setup
Create a basic Express server. Create a file `[Link]`:
```javascript
// [Link]
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require('body-parser');
require('dotenv').config();
const app = express();
const PORT = [Link] || 5000;
// Middleware
[Link](cors());
[Link]([Link]());
// MongoDB connection
[Link]([Link].MONGODB_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
// Product Schema
const productSchema = new [Link]({
title: String,
description: String,
price: Number,
imageUrl: String,
});
const Product = [Link]('Product', productSchema);
// API Routes
[Link]('/api/products', async (req, res) => {
const products = await [Link]();
[Link](products);
});
[Link]('/api/products', async (req, res) => {
const newProduct = new Product([Link]);
await [Link]();
[Link](newProduct);
});
[Link](PORT, () => {
[Link](`Server is running on [Link]
});
```
#### Environment Variables
Create a `.env` file in your backend directory to store sensitive information like MongoDB URI:
```
MONGODB_URI=your_mongodb_connection_string
```
### 3. Frontend Development
#### Project Structure
In the `src` folder of your React app, create the following structure:
```
classifieds-app/
├── src/
│ ├── components/
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ └── [Link]
│ ├── pages/
│ │ ├── [Link]
│ │ └── [Link]
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
```
#### 3.1. App Component
Set up routing and main structure in `[Link]`:
```javascript
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import AddProduct from './pages/AddProduct';
import './[Link]';
const App = () => {
return (
<Router>
<Navbar />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/add" component={AddProduct} />
</Switch>
</Router>
);
};
export default App;
```
#### 3.2. Navbar Component
Create a navigation bar in `[Link]`:
```javascript
import React from 'react';
import { Link } from 'react-router-dom';
const Navbar = () => {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/add">Add Product</Link>
</nav>
);
};
export default Navbar;
```
#### 3.3. Home Page and Product List
In `[Link]`, fetch and display products:
```javascript
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import ProductList from '../components/ProductList';
const Home = () => {
const [products, setProducts] = useState([]);
useEffect(() => {
const fetchProducts = async () => {
const response = await [Link]('[Link]
setProducts([Link]);
};
fetchProducts();
}, []);
return (
<div>
<h1>Classifieds</h1>
<ProductList products={products} />
</div>
);
};
export default Home;
```
#### 3.4. Product List and Product Card
In `[Link]`, render the list of products:
```javascript
import React from 'react';
import ProductCard from './ProductCard';
const ProductList = ({ products }) => {
return (
<div className="product-list">
{[Link]((product) => (
<ProductCard key={product._id} product={product} />
))}
</div>
);
};
export default ProductList;
```
In `[Link]`, create a card for each product:
```javascript
import React from 'react';
const ProductCard = ({ product }) => {
return (
<div className="product-card">
<img src={[Link]} alt={[Link]} />
<h2>{[Link]}</h2>
<p>{[Link]}</p>
<p>${[Link]}</p>
</div>
);
};
export default ProductCard;
```
#### 3.5. Add Product Page
In `[Link]`, create a form to add new products:
```javascript
import React, { useState } from 'react';
import axios from 'axios';
const AddProduct = () => {
const [formData, setFormData] = useState({
title: '',
description: '',
price: '',
imageUrl: '',
});
const handleChange = (e) => {
setFormData({ ...formData, [[Link]]: [Link] });
};
const handleSubmit = async (e) => {
[Link]();
await [Link]('[Link] formData);
alert('Product added successfully!');
setFormData({ title: '', description: '', price: '', imageUrl: '' });
};
return (
<form onSubmit={handleSubmit}>
<input type="text" name="title" value={[Link]} onChange={handleChange}
placeholder="Title" required />
<input type="text" name="description" value={[Link]}
onChange={handleChange} placeholder="Description" required />
<input type="number" name="price" value={[Link]} onChange={handleChange}
placeholder="Price" required />
<input type="text" name="imageUrl" value={[Link]} onChange={handleChange}
placeholder="Image URL" required />
<button type="submit">Add Product</button>
</form>
);
};
export default AddProduct;
```
### 4. Basic Styling
In `[Link]`, add some basic styles:
```css
body {
font-family: Arial, sans-serif;
}
nav {
background: #333;
color: #fff;
padding: 10px;
}
nav a {
color: #fff;
margin: 0 15px;
text-decoration: none;
}
.product-list {
display: flex;
flex-wrap: wrap;
}
.product-card {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
width: 200px;
text-align: center;
}
.product-card img {
max-width: 100%;
height: auto;
}
```
### 5. Run Your Application
1. **Start the Backend**:
Make sure MongoDB is running and then start your backend server:
```bash
node [Link]
```
2. **Start the Frontend**:
In your `classifieds-app` directory, run:
```bash
npm start
```
OUTPUT:
IT3511 FULL STACK WEB DEVELOPMENT LAB
LIST OF EXPERIMENTS:
1. Develop a portfolio website for yourself which gives details about yourself for a potential
recruiter.
2. Create a web application to manage the TO-DO list of users, where users can login and
manage their to-do items
3. Create a simple micro blogging application (like twitter) that allows people to post their
content which can be viewed by people who follow them.
4. Create a food delivery website where users can order food from a particular restaurant listed
in the website.
5. Develop a classifieds web application to buy and sell used products.
6. Develop a leave management system for an organization where users can apply different
types of leaves such as casual leave and medical leave. They also can view the available
number of days.
7. Develop a simple dashboard for project management where the statuses of various tasks are
available. New tasks can be added and the status of existing tasks can be changed among
Pending, InProgress or Completed.
8. Develop an online survey application where a collection of questions is available and users
are asked to answer any random 5 questions.