From Beginner to Pro: Building Your First Full-Stack App in 4

Building your first full-stack application is a monumental milestone in any developer's journey. In this guide, we’ll walk you through the process of creating a Task Manager App using React, Node.js, and MongoDB. Along the way, we’ll explain every step, from setting up your environment to deploying your app on Vercel and Render.

By the end, you’ll have a live, fully functional app and the confidence to tackle more complex projects.

1. Prerequisites: Preparing Your Tools Before diving into code, let’s ensure your development environment is ready. Here's what you need:

Essential Software
Node.js (Download here):https://nodejs.org/fr
Node.js is a runtime that allows you to run JavaScript outside the browser. Install it to use its built-in package manager, npm, for handling dependencies.

node -v && npm -v
Run the command above after installation to verify the versions.

Git (Download here):https://git-scm.com/
Git is a version control system that tracks changes to your code and facilitates collaboration.

MongoDB Atlas (Sign up here):https://www.mongodb.com/products/platform/atlas-database
Atlas offers a free cloud-hosted MongoDB database, perfect for beginners.

Vercel CLI (Installation Guide):https://vercel.com/
Vercel is a platform for deploying your React front-end quickly and efficiently.

Render Account (Sign up here):https://render.com/
Render provides a robust environment for deploying your back-end services.

1. Setting Up Your Project

Step 1: Create the Project Structure

Open your terminal and create a directory for your app:

mkdir task-manager-app && cd task-manager-app

Initialize a Git repository:

git init

Set up a package.json file to manage dependencies:

npm init -y

Step 2: Install Dependencies

Back-End Dependencies

The back-end will be built with Node.js and Express, and it will connect to MongoDB for data storage.

Install the required packages:

npm install express mongoose dotenv cors
npm install --save-dev nodemon

• express: Framework for building server-side applications.
• mongoose: Object Data Modeling (ODM) library for MongoDB.
• dotenv: For managing environment variables.
• cors: Middleware to handle cross-origin requests.
• nodemon: A tool for automatic server restarts during development.

Front-End Dependencies

The front-end will use React for building user interfaces.

Set up a React app:

npx create-react-app client

cd client

Inside the React directory, install additional libraries:

npm install axios react-router-dom

• axios: For making HTTP requests to the back-end API.
• react-router-dom: For managing routes in your application.

1. Building the Back-End: API with Express and MongoDB

Step 1: Create the Directory Structure

Organize your project like this:

npm install express mongoose dotenv cors
npm install --save-dev nodemon

Step 2: Create the Express Server

Inside the server/ directory, create a server.js file:

task-manager-app/
├── server/
│   ├── models/       # Contains database models
│   ├── routes/       # Contains API routes
│   ├── .env          # Stores environment variables
│   ├── server.js     # Main server file

Step 3: Configure Environment Variables

Create a .env file in the server/ directory and add your MongoDB

connection string:

MONGO_URI=

Step 4: Define the Mongoose Model

Inside the server/models/ directory, create Task.js:

require('dotenv').config();
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
const PORT = process.env.PORT || 5000;

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

// Connect to MongoDB
mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log("Connected to MongoDB"))
  .catch(err => console.error(err));

// API Routes
app.use('/api/tasks', require('./routes/taskRoutes'));

// Start the server
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Step 5: Create API Routes

Inside the server/routes/ directory, create taskRoutes.js:

const mongoose = require('mongoose');

const TaskSchema = new mongoose.Schema({
  title: { type: String, required: true },
  completed: { type: Boolean, default: false },
}, { timestamps: true });

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

1. Building the Front-End: React

Step 1: Set Up React Components

Organize your React directory like this:

const express = require('express');
const router = express.Router();
const Task = require('../models/Task');

// Fetch all tasks
router.get('/', async (req, res) => {
  const tasks = await Task.find();
  res.json(tasks);
});

// Add a new task
router.post('/', async (req, res) => {
  const task = await Task.create(req.body);
  res.json(task);
});

// Update a task
router.put('/:id', async (req, res) => {
  const task = await Task.findByIdAndUpdate(req.params.id, req.body, { new: true });
  res.json(task);
});

// Delete a task
router.delete('/:id', async (req, res) => {
  await Task.findByIdAndDelete(req.params.id);
  res.json({ message: 'Task deleted' });
});

module.exports = router;

Step 2: Fetch Data from the API

In src/components/TaskList.js:

client/
├── src/
│   ├── components/
│   │   ├── TaskList.js
│   │   ├── AddTask.js
│   │   ├── Task.js
│   ├── App.js
│   ├── index.js

1. Deployment: Taking Your App Live

Back-End Deployment on Render

Push your code to GitHub:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const TaskList = () => {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/api/tasks')
      .then(response => setTasks(response.data))
      .catch(err => console.error(err));
  }, []);

  return (
    <div>
      {tasks.map(task => (
        <div key={task._id}>
          <h3>{task.title}</h3>
          <p>{task.completed ? 'Completed' : 'Incomplete'}</p>
        </div>
      ))}
    </div>
  );
};

export default TaskList;

Deploy on Render:

Connect your repository.
Set the root directory to /server.
Add environment variables (e.g., MONGO_URI).

Front-End Deployment on Vercel

Navigate to the client directory:

cd client

Deploy:

vercel (https://vercel.com/)

Conclusion
Congratulations! ? You’ve built and deployed your first full-stack application. By mastering this process, you’re well on your way to creating more complex and impactful projects.

Stay Connected
? Explore more at GladiatorsBattle.com
? Follow us on Twitter
? Read more on DEV.to
? Interactive demos on CodePen

Let’s build something amazing together! ?

The above is the detailed content of From Beginner to Pro: Building Your First Full-Stack App in 4. For more information, please follow other related articles on the PHP Chinese website!