UI/UX - lesson 5 | HackIndia Skills

UI/UX - lesson 5 | HackIndia Skills | HackIndia

Example

React example

This example handles three states for a simple events list: loading, empty, and error. You can adapt the same pattern for jobs, notes, complaints, expenses, or team members.

Keep the button copy specific. “Try again” is better than “Submit” after a failed load.

function EventsList({ loading, error, events, onRetry, onCreate }) {
  if (loading) {
    return <p className="status">Loading events...</p>;
  }

  if (error) {
    return (
      <section className="state state-error" role="alert">
        <h2>Could not load events</h2>
        <p>Check your connection and try again.</p>
        <button onClick={onRetry}>Try again</button>
      </section>
    );
  }

  if (events.length === 0) {
    return (
      <section className="state">
        <h2>No events added yet</h2>
        <p>Create your first event so students can register.</p>
        <button onClick={onCreate}>Add event</button>
      </section>
    );
  }

  return (
    <ul>
      {events.map((event) => (
        <li key={event.id}>{event.name}</li>
      ))}
    </ul>
  );
}

Tip

Use AI carefully

Ask ChatGPT, Gemini, or Claude for empty and error copy for each screen. Give it your app idea, user type, and action.

Then check three things yourself: is it specific, does it tell the user what to do next, and is it short enough for a phone screen?

Prompt:
I am building a hackathon app for college students to split canteen expenses.
Write empty states and error messages for these screens:
1. No groups yet
2. No expenses in a group
3. Failed to add expense
4. Invalid UPI ID
Keep each message short and include a clear next action.

Design empty and error states

The core idea

Empty is useful

Build an empty state

Errors need recovery

Common mistake

React example

Use AI carefully

Do this now

Quick check