👥 Users List App

A React + TypeScript application that consumes an external API to fetch users and allows adding, editing, and deleting users locally, with form validation, loading state, and portal-based overlay.

---

✨ Features

✅ Fetch users from an external API ✅ Global loading state with overlay (Portal) ✅ Error handling ✅ Add new users ✅ Edit existing users ✅ Delete users with confirmation ✅ Form validation ✅ Simple and functional UI ✅ Fully typed with TypeScript

---

🧱 Tech Stack

• React
• TypeScript
• Axios
• React DOM Portals
• CSS / Utility Classes
• JSONPlaceholder API

---

🌐 API Used

https://jsonplaceholder.typicode.com/users

Used only to fetch the initial list of users. All create, update, and delete operations are handled locally in state.

---

📁 Project Structure

src/
│
├── App.tsx
├── App.css
└── main.tsx

---

🚀 Getting Started

1. Install dependencies

npm install
# or
pnpm install

2. Start the development server

npm run dev
# or
pnpm dev

The application will be available at:

http://localhost:3000

---

🧠 Core Logic

📌 User Type Definition

type User = {
  id: string;
  name: string;
  username: string;
  email: string;
  phone: string;
};

---

📌 Fetching Users

useEffect(() => {
  setLoading(true);

  axios
    .get(apiURL)
    .then(({ data }) => setUsers(data))
    .catch(() => setError('Error loading users'))
    .finally(() => setLoading(false));
}, []);

---

✅ Form Validation

const isFormValid =
  userName.trim() &&
  userUsername.trim() &&
  userEmail.trim() &&
  userPhone.trim();

---

➕ Add User

const addUser = () => {
  const newUser = {
    id: crypto.randomUUID(),
    name: userName,
    username: userUsername,
    email: userEmail,
    phone: userPhone,
  };

  setUsers((prev) => [...prev, newUser]);
};

---

✏️ Edit User

const saveEdit = () => {
  setUsers((prev) =>
    prev.map((user) =>
      user.id === editingId ? { ...user, name, username, email, phone } : user
    )
  );
};

---

🗑️ Delete User

const deleteUser = (userId: string) => {
  if (window.confirm('Are you sure you want to delete this user?')) {
    setUsers((prev) => prev.filter((user) => user.id !== userId));
  }
};

---

⏳ Loading Overlay with Portal

{loading &&
  createPortal(
    <div className="fixed inset-0 bg-black/40 flex items-center justify-center">
      Loading...
    </div>,
    document.body
)}

---

📸 Screenshot (Optional)

## 📸 Screenshot

![Users App](./public/screenshot.png)

---

🧪 Possible Future Improvements

• 🔄 Real backend integration (full CRUD)
• ✅ Advanced validation with regex
• 📱 Improved mobile responsiveness
• 🧪 Unit and integration tests (Jest / Vitest)
• 🔐 Authentication
• 📦 Pagination and search

---

📄 License

This project is open for learning and portfolio purposes.

---