Building a Full-Stack Application: React Frontend + Node.js Backend

Project Overview

We'll build a complete full-stack application with React frontend and Node.js/Express backend, demonstrating how to connect frontend and backend through APIs.

Backend Setup

// backend/server.js
const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');

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

mongoose.connect('mongodb://localhost:27017/myapp');
app.use('/api/users', require('./routes/users'));

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

API Service Layer

// frontend/services/api.js
import axios from 'axios';

const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000/api';

export const api = {
  async getUsers() {
    const response = await axios.get(`${API_URL}/users`);
    return response.data;
  },
  
  async createUser(userData) {
    const response = await axios.post(`${API_URL}/users`, userData);
    return response.data;
  }
};

React Component Example

import React, { useState, useEffect } from 'react';
import { api } from '../services/api';

function UserList() {
  const [users, setUsers] = useState([]);
  
  useEffect(() => {
    loadUsers();
  }, []);

  const loadUsers = async () => {
    const data = await api.getUsers();
    setUsers(data);
  };

  return (
    <div>
      {users.map(user => (
        <div key={user.id}>
          <h3>{user.name}</h3>
          <p>{user.email}</p>
        </div>
      ))}
    </div>
  );
}

Deployment

Deploy your full-stack app:

• Backend: Heroku, AWS Elastic Beanstalk, or DigitalOcean
• Frontend: Vercel, Netlify, or AWS S3 + CloudFront
• Database: MongoDB Atlas or AWS RDS