CREATE DATABASE userdb;

CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100)
);

Table Schema Breakdown

Step 1: Initialize Vite Project

Step 2: Configure Project

• Project name: frontend
• Select framework: React
• Select variant: JavaScript
• Use rolldown-vite (Experimental)? No
• Install with npm and start now? Yes

Step 1: Create Backend Folder

Step 2: Initialize Node.js Project

console.log('Hello');

Test the Backend

Package Descriptions

const { Pool } = require('pg');

const pool = new Pool({
  user: 'postgres',
  host: 'localhost',
  database: 'userdb',
  password: 'your_password_here',
  port: 5432,
});

module.exports = pool;

Configuration Breakdown

• user: PostgreSQL username (default is ‘postgres’)
• host: Database server location (localhost for local development)
• database: Name of the database we created (‘userdb’)
• password: PostgreSQL password you set during installation
• port: PostgreSQL default port (5432)

const express = require('express');
const pool = require('./config');

const app = express();
const PORT = 5000;

// Middleware
app.use(express.json());
app.use(require('cors')());

// GET: Fetch all users
app.get('/users', async (req, res) => {
  try {
    const result = await pool.query('SELECT * FROM users');
    res.json(result.rows);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Database error' });
  }
});

// POST: Create new user
app.post('/users', async (req, res) => {
  const { name, email } = req.body;

  try {
    const result = await pool.query(
      'INSERT INTO users (name, email) VALUES ($1, $2) RETURNING *',
      [name, email]
    );
    res.status(201).json(result.rows[0]);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Database error' });
  }
});

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

Code Explanation

Package Descriptions

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

@import "tailwindcss";

@import "tailwindcss";

import React from "react";
import UserForm from "./UserForm";
import UserList from "./UserList";
import "./App.css";

function App() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      <div className="container mx-auto px-4 py-8">
        <h1 className="text-4xl font-bold text-center mb-8 text-gray-800">
          User Management System
        </h1>

        <div className="grid md:grid-cols-2 gap-8">
          <UserForm />
          <UserList />
        </div>
      </div>
    </div>
  );
}

export default App;

import React, { useState } from "react";
import axios from "axios";

const UserForm = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!name || !email) {
      alert("Please fill all fields");
      return;
    }

    try {
      await axios.post("http://localhost:5000/users", {
        name,
        email,
      });

      alert("User created successfully");
      setName("");
      setEmail("");
    } catch (error) {
      console.error(error);
      alert("Error creating user");
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="bg-white p-6 rounded-lg shadow-md w-full max-w-md">
        <h1 className="text-2xl font-bold text-center mb-6">
          Create New User
        </h1>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label htmlFor="name" className="block text-sm font-medium mb-1">
              Enter Name
            </label>
            <input
              id="name"
              type="text"
              placeholder="Enter Name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          <div>
            <label htmlFor="email" className="block text-sm font-medium mb-1">
              Enter Email
            </label>
            <input
              id="email"
              type="email"
              placeholder="Enter Email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          <button
            type="submit"
            className="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition"
          >
            Submit
          </button>
        </form>
      </div>
    </div>
  );
};

export default UserForm;

Component Features

• State Management: Uses React hooks (useState) for form fields
• Form Validation: Checks if fields are filled before submission
• API Integration: Posts data to backend using Axios
• User Feedback: Shows success/error alerts
• Form Reset: Clears fields after successful submission

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

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = async () => {
    try {
      const res = await axios.get("http://localhost:5000/users");
      setUsers(res.data);
    } catch (error) {
      console.error(error);
      alert("Failed to fetch users");
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <p className="text-center mt-10 text-gray-600">
        Loading users...
      </p>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="max-w-4xl mx-auto bg-white p-6 rounded-lg shadow">
        <h2 className="text-2xl font-bold mb-4 text-center">
          User List
        </h2>

        {users.length === 0 ? (
          <p className="text-center text-gray-500">
            No users found
          </p>
        ) : (
          <table className="w-full border-collapse">
            <thead>
              <tr className="bg-gray-200">
                <th className="border p-2 text-left">ID</th>
                <th className="border p-2 text-left">Name</th>
                <th className="border p-2 text-left">Email</th>
              </tr>
            </thead>
            <tbody>
              {users.map((user) => (
                <tr key={user.id} className="hover:bg-gray-100">
                  <td className="border p-2">{user.id}</td>
                  <td className="border p-2">{user.name}</td>
                  <td className="border p-2">{user.email}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
};

export default UserList;

Component Features

• Data Fetching: Uses useEffect to fetch users on component mount
• Loading State: Shows loading message while data is being fetched
• Empty State: Displays appropriate message when no users exist
• Data Display: Renders users in a clean, responsive table
• Error Handling: Catches and displays fetch errors

Test 1: Add a User

1. Open http://localhost:5173 in your browser
2. Fill in the “Create New User” form with name and email
3. Click “Submit”
4. You should see a success alert
5. Refresh the page to see the new user in the User List

Test 2: Verify Database

SELECT * FROM users;