API service file is used to:

Manage all API calls in one place

 

Open authService.js and look at the export statement:

• export default signupUser → use without { }
• export const signupUser or export { signupUser } → use with { }

Benefits:

• Clean code
• Reusable API
• Easy maintenance
• Easy base URL change

Create services/api.js

const API_URL = process.env.REACT_APP_API_URL;

export const signupUser = async (userData) => {
  try {
    const response = await fetch(`${API_URL}/api/signup`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(userData),
    });

    const data = await response.json();

    if (!response.ok) {
      throw new Error(data.message || "Signup failed");
    }

    return data;
  } catch (error) {
    throw error;
  }
};

Use API in Component:

import { useState } from "react";
import { signupUser } from "../services/api";

function Signup() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [password, setPassword] = useState("");

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

    const userData = {
      name,
      email,
      phone,
      password,
    };

    try {
      const result = await signupUser(userData);

      console.log(result);
      alert("User registered successfully");

      setName("");
      setEmail("");
      setPhone("");
      setPassword("");
    } catch (error) {
      console.error("Error in Signup:", error);
      alert(error.message);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>User Signup</h2>

      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />

      <input
        type="text"
        placeholder="Phone"
        value={phone}
        onChange={(e) => setPhone(e.target.value)}
      />

      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />

      <button type="submit">Sign Up</button>
    </form>
  );
}

export default Signup;

Full Code:

import { useState } from "react"; 
function Signup(){
    const[name, setName] = useState("");
    const[email, setEmail] = useState("");
    const[phone, setPhone] = useState("");
    const[password, setPassword] = useState("");
    const handleSubmit = async (e) => {
       
        e.preventDefault();
        const userData = {
            name,
            email,
            phone,
            password
        };
        try {
            const apiUrl = process.env.REACT_APP_API_URL + "/api/signup";
            const response = await fetch(apiUrl, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(userData)
            });
            const result = await response.json();
            console.log(result);
            if(response.ok) {
                alert("User registered successfully");
                setName("");
                setEmail("");
                setPhone("");
                setPassword("");
            }
            else {
                alert(result.message || "Error occurred during signup");
            }
        }
        catch (error) {
            console.error("Error in Signup:", error);   
        }

    }
    return(
        <>
        <form onSubmit={handleSubmit}>
            <h2>User Signup</h2>
            <input type="text" 
            placeholder="Name" 
            value={name}
            onChange = {(e) => setName(e.target.value)}
            />
            <input type="email" 
            placeholder="Email" 
            value={email}
            onChange = {(e) => setEmail(e.target.value)}
            />
            <input type="text" 
            placeholder="Phone" 
            value={phone}
            onChange = {(e) => setPhone(e.target.value)}
            />
            <input type="password" 
            placeholder="Password" 
            value={password}
            onChange = {(e) => setPassword(e.target.value)}
            />
            <button>Sign Up</button>
            </form>
        </>
    );
}

export default Signup;