Scribd
Upload
4 views

Ajay Mern Stack Final Assignment Coding

The document outlines the development of a task management application using the MERN stack, including features like task creation, updating, deletion, prioritization, and categorization. It provides a step-by-step guide for setting up the development environment, backend coding with Node.js and Express.js, and frontend coding with React.js. Additionally, it includes code snippets for creating task schemas, routes, and components necessary for the application.

Uploaded by

singhajaykavitha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

Ajay Mern Stack Final Assignment Coding

The document outlines the development of a task management application using the MERN stack, including features like task creation, updating, deletion, prioritization, and categorization. It provides a step-by-step guide for setting up the development environment, backend coding with Node.js and Express.js, and frontend coding with React.js. Additionally, it includes code snippets for creating task schemas, routes, and components necessary for the application.

Uploaded by

singhajaykavitha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

MERN Stack Assignment

Develop a task management application using the MERN stack. The


application should allow users to manage their tasks with features like
creating, updating, deleting, prioritizing and categorising

Here’s a roadmap for developing a Task Management Application using the


MERN stack (MongoDB, Express.js, React.js, Node.js):

Features

Task Management:

Add new tasks.

Edit existing tasks.

Delete tasks.

Mark tasks as complete/incomplete.

Set priority levels (e.g., Low, Medium, High).

Categorize tasks (e.g., Work, Personal, Urgent).

User Management (optional for additional functionality):

User authentication (sign-up/login).

User-specific task lists.

Step-by-Step Development Guide

1. Setup the Development Environment

Install Node.js and MongoDB on your machine.

Use a package manager like npm or yarn for managing dependencies.

2. Backend (Node.js + Express.js)


Coding :

Initialize the Project:

Mkdir task-manager

Cd task-manager

Npm init -y

Npm install express mongoose dotenv body-parser cors

Npm install –save-dev nodemon

Set Up the Server Coding :

Create an index.js file:

Const express = require(‘express’);

Const mongoose = require(‘mongoose’);

Const cors = require(‘cors’);

Const dotenv = require(‘dotenv’);

Dotenv.config();

Const app = express();

App.use(cors());

App.use(express.json());

Const PORT = process.env.PORT ||


5000;Mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true,
useUnifiedTopology: true })

.then(() => {

App.listen(PORT, () => console.log(`Server running on port ${PORT}`));

})

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

Create Task Schema and Model :


In a models folder, add Task.js:

Const mongoose = require(‘mongoose’);

Const TaskSchema = new mongoose.Schema({

Title: { type: String, required: true },

Description: { type: String },

Priority: { type: String, enum: [‘Low’, ‘Medium’, ‘High’], default: ‘Medium’ },

Category: { type: String },

Completed: { type: Boolean, default: false },

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

});

Module.exports = mongoose.model(‘Task’, TaskSchema);

Set Up Routes Coding :

In a routes folder, create taskRoutes.js:

Const express = require(‘express’);

Const Task = require(‘../models/Task’);

Const router = express.Router();

Create a new task Coding :

Router.post(‘/’, async (req, res) => {

Try {

Const task = new Task(req.body);

Await task.save();
Res.status(201).json(task);

} catch (error) {

Res.status(500).json({ error: error.message });

});

Get all tasks Coding :

Router.get(‘/’, async (req, res) => {

Try {

Const tasks = await Task.find();

Res.status(200).json(tasks);

} catch (error) {

Res.status(500).json({ error: error.message });

});

Update a task Coding :

Router.put(‘/:id’, async (req, res) => {

Try {

Const task = await Task.findByIdAndUpdate(req.params.id, req.body,


{ new: true });

Res.status(200).json(task);

} catch (error) {

Res.status(500).json({ error: error.message });

});
Delete a task Coding :

Router.delete(‘/:id’, async (req, res) => {

Try {

Await Task.findByIdAndDelete(req.params.id);

Res.status(200).send(‘Task deleted’);

} catch (error) {

Res.status(500).json({ error: error.message });

});

Module.exports = router;

Link the route in index.js:

Const taskRoutes = require(‘./routes/taskRoutes’);

App.use(‘/tasks’, taskRoutes

Front End React Js coding :

Npx create-react-app task-manager-frontend

Cd task-manager-frontend

Npm install axios react-router-dom

Task.Form coding:

Import React, { useState } from ‘react’;

Import axios from ‘axios’;

Const TaskForm = ({ fetchTasks }) => {

Const [formData, setFormData] = useState({


Title: ‘’,

Description: ‘’,

Priority: ‘Medium’,

Category: ‘’,

});

Const handleChange = € => {

setFormData({ …formData, [e.target.name]: e.target.value });

};

Const handleSubmit = async € => {

e.preventDefault();

try {

await axios.post(‘http://localhost:5000/tasks’, formData);

fetchTasks();

setFormData({ title: ‘’, description: ‘’, priority: ‘Medium’, category: ‘’ });

} catch (error) {

Console.error(error.message);

};

Return (

<form onSubmit={handleSubmit}>

<input name=”title” value={formData.title}


onChange={handleChange} placeholder=”Task Title” required />

<textarea name=”description” value={formData.description}


onChange={handleChange} placeholder=”Description” />
<select name=”priority” value={formData.priority}
onChange={handleChange}>

<option value=”Low”>Low</option>

<option value=”Medium”>Medium</option>

<option value=”High”>High</option>

</select>

<input name=”category” value={formData.category}


onChange={handleChange} placeholder=”Category” />

<button type=”submit”>Add Task</button>

</form>

);

};

Export default TaskForm;

Combine page coding :

Import React from ‘react’;

Import TaskForm from ‘../components/TaskForm’;

Import TaskList from ‘../components/TaskList’;

Const HomePage = () => {

Return (

<div>

<h1>Task Manager</h1>

<TaskForm />

<TaskList />

</div>

);
};

Export default HomePage;

Add Routing Coding :

Import React from ‘react’;

Import { BrowserRouter as Router, Route, Routes } from ‘react-router-dom’;

Import HomePage from ‘./pages/HomePage’;

Const App = () => {

Return (

<Router>

<Routes>

<Route path=”/” element={<HomePage />} />

</Routes>

</Router>

);

};

Export default App;

Output :

Task Manager

[Title: _____________________]

[Description: _____________________]

[Priority: [Low] [Medium] [High]]

[Category: _____________________]

[ Add Task ]
- [ ] Complete MERN assignment

Priority: High | Category: Work

[ Mark Complete ] [ Delete ]

- [ ] Buy groceries

Priority: Medium | Category: Personal

[ Mark Complete ] [ Delete ]

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy