Building a Modern Web App with React and Node.js

Creating a full-stack web application doesn't need to be complicated. Let me show you how to build a practical project using React for the front end and Node.js for the back end. I'll guide you through making a simple task management system that you can use as a starting point for your own projects.

Project Overview

We'll create a task manager where users can add, edit, delete, and mark tasks as complete. The front end will handle the user interface and interactions, while the back end will manage data storage and API endpoints.

Setting Up the Development Environment

First, make sure you have Node.js installed on your computer. You can get it from nodejs.org. Create two separate folders for our front end and back end code:

bash

1mkdir task-manager
2cd task-manager
3mkdir client server

Back End Setup with Node.js and Express

In the server folder, initialize a new project:

bash

1cd server
2npm init -y
3npm install express cors mongoose dotenv

Create a basic server setup in server.js:

javascript

1const express = require('express');
2const cors = require('cors');
3const app = express();
4
5app.use(cors());
6app.use(express.json());
7
8app.listen(5000, () => {
9  console.log('Server running on port 5000');
10});

Creating the Database Structure

We'll use MongoDB with Mongoose to store our tasks. Create a task model:

javascript

1const mongoose = require('mongoose');
2
3const taskSchema = new mongoose.Schema({
4  title: String,
5  completed: Boolean,
6  createdAt: Date
7});
8
9module.exports = mongoose.model('Task', taskSchema);

Setting Up the React Front End

Move to the client folder and create a new React project:

bash

1cd ../client
2npx create-react-app .
3npm install axios

Create a simple task component in React:

jsx

1function Task({ task, onDelete, onToggle }) {
2  return (
3    <div className="task">
4      <input
5        type="checkbox"
6        checked={task.completed}
7        onChange={() => onToggle(task._id)}
8      />
9      <span>{task.title}</span>
10      <button onClick={() => onDelete(task._id)}>Delete</button>
11    </div>
12  );
13}

Connecting Front End to Back End

Create API calls using axios in your React app:

javascript

1const API_URL = 'http://localhost:5000';
2
3async function getTasks() {
4  const response = await axios.get(`${API_URL}/tasks`);
5  return response.data;
6}
7
8async function createTask(title) {
9  const response = await axios.post(`${API_URL}/tasks`, { title });
10  return response.data;
11}

Adding Features and Functionality

Let's implement task creation in our React component:

jsx

1function TaskForm() {
2  const [title, setTitle] = useState('');
3
4  const handleSubmit = async (e) => {
5    e.preventDefault();
6    if (!title.trim()) return;
7    
8    await createTask(title);
9    setTitle('');
10  };
11
12  return (
13    <form onSubmit={handleSubmit}>
14      <input
15        value={title}
16        onChange={(e) => setTitle(e.target.value)}
17        placeholder="Add new task"
18      />
19      <button type="submit">Add Task</button>
20    </form>
21  );
22}

Testing the Application

Start both servers: - Run npm start in the client folder

Run node server.js in the server folder

Your task manager should now work! You can add tasks, mark them complete, and delete them. The data persists in your MongoDB database.

Next Steps

You can enhance this project by:

Adding user authentication
Implementing task categories
Adding due dates
Creating task priorities
Adding search and filter options

This project serves as a solid foundation for learning full-stack development. The code is straightforward and can be expanded based on your needs.