In today's fast-paced web development landscape, understanding both frontend and backend integration is crucial for developers. A full-stack project demonstrates the seamless connection between user interfaces and server-side logic, ensuring smooth data handling and user experience.
In this blog, we'll guide you through building a simple full-stack To-Do App using React (frontend), Node.js/Express (backend), and MongoDB (database). By the end, you'll have a fully functional web application that allows users to create, read, update, and delete tasks.
2. Project Overview
We’ll build a To-Do App with the following features:
Frontend (React)
- User interface to add, view, update, and delete tasks.
- API integration to fetch and manage tasks.
Backend (Node.js/Express)
- REST API for CRUD operations.
- Handles data requests and responses.
Database (MongoDB)
- Stores tasks persistently.
- Uses Mongoose for database interaction.
3. Setting Up the Backend
Step 1: Initialize the Project
mkdir backend && cd backend
npm init -y
Step 2: Install Dependencies
npm install express mongoose cors dotenv
Step 3: Create the Server
Create server.js and set up a basic Express server:
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
require('dotenv').config();
const app = express();
app.use(cors());
app.use(express.json());
mongoose.connect(process.env.MONGO_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
const taskSchema = new mongoose.Schema({
title: String,
completed: Boolean,
});
const Task = mongoose.model('Task', taskSchema);
app.get('/api/tasks', async (req, res) => {
const tasks = await Task.find();
res.json(tasks);
});
app.post('/api/tasks', async (req, res) => {
const task = new Task(req.body);
await task.save();
res.json(task);
});
app.listen(5000, () => console.log('Server running on port 5000'));
Step 4: Connect to MongoDB
Create a .env file:
MONGO_URI=mongodb://localhost:27017/todoapp
Testing the API in Postman
4. Setting Up the Frontend
Step 1: Initialize the React Project
npx create-react-app frontend
cd frontend
npm install axios
Step 2: Create Components
TaskList.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function TaskList() {
const [tasks, setTasks] = useState([]);
useEffect(() => {
axios.get('http://localhost:5000/api/tasks')
.then(response => setTasks(response.data));
}, []);
return (
<ul>
{tasks.map(task => (
<li key={task._id}>{task.title}</li>
))}
</ul>
);
}
export default TaskList;
5. Connecting Frontend and Backend
Enable CORS in Backend
Ensure cors is used in server.js:
const cors = require('cors');
app.use(cors());
Fetch Data from Backend in React
useEffect(() => {
axios.get('http://localhost:5000/api/tasks')
.then(response => setTasks(response.data));
}, []);
6. Deployment
Deploy the Backend
Use Render, Heroku, or Vercel to deploy the Node.js server.
Deploy the Frontend
Use Vercel or Netlify to deploy the React app.
7. Conclusion
We successfully built a full-stack To-Do App, covering backend setup, frontend UI, and full integration. This knowledge is essential for full-stack developers, enabling them to build and deploy complete applications.
