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:

BashCopy code
mkdir task-manager
cd task-manager
mkdir client server

Back End Setup with Node.js and Express

In the server folder, initialize a new project:

BashCopy code
cd server
npm init -y
npm install express cors mongoose dotenv

Create a basic server setup in server.js:

JavascriptCopy code
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(express.json());

app.listen(5000, () => {
  console.log('Server running on port 5000');
});

Creating the Database Structure

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

JavascriptCopy code
const mongoose = require('mongoose');

const taskSchema = new mongoose.Schema({
  title: String,
  completed: Boolean,
  createdAt: Date
});

module.exports = mongoose.model('Task', taskSchema);

Setting Up the React Front End

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

BashCopy code
cd ../client
npx create-react-app .
npm install axios

Create a simple task component in React:

JsxCopy code
function Task({ task, onDelete, onToggle }) {
  return (
    <div className="task">
      <input
        type="checkbox"
        checked={task.completed}
        onChange={() => onToggle(task._id)}
      />
      <span>{task.title}</span>
      <button onClick={() => onDelete(task._id)}>Delete</button>
    </div>
  );
}

Connecting Front End to Back End

Create API calls using axios in your React app:

JavascriptCopy code
const API_URL = 'http://localhost:5000';

async function getTasks() {
  const response = await axios.get(`\\${API_URL}/tasks`);
  return response.data;
}

async function createTask(title) {
  const response = await axios.post(`\\${API_URL}/tasks`, { title });
  return response.data;
}

Adding Features and Functionality

Let's implement task creation in our React component:

JsxCopy code
function TaskForm() {
  const [title, setTitle] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!title.trim()) return;
    
    await createTask(title);
    setTitle('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Add new task"
      />
      <button type="submit">Add Task</button>
    </form>
  );
}

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:

1. Adding user authentication
2. Implementing task categories
3. Adding due dates
4. Creating task priorities
5. 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.