<frontend-challenge />

Build a Customer Directory • Show Your UI/UX Skills • Document Your AI Journey

🇧🇷 Leia em Português

🎯 What We're Looking For

The main objective of this challenge is to assess your Front-end Development skills, your approach to UI/UX, and how you leverage AI tools in your workflow.

💡 Check out our frontend-guideline for some of our patterns and best practices.

📑 Table of Contents

• 🚀 The Challenge
• 📐 Layout
• 🔌 API
• ⭐ Evaluation Criteria
• 🤖 AI Journey (Required)
• 📤 Submission
• ❓ FAQ

🚀 The Challenge

Build a Customer Directory application that allows users to browse, search, and view customer details.

flowchart LR
    subgraph INPUT["📥 Data Source"]
        API[("JSON API\nCustomer Data")]
    end

    subgraph APP["⚙️ Your Application"]
        FETCH["Fetch Data"]
        LIST["Customer List\n+ Filters"]
        DETAIL["Customer\nDetail Page"]
    end

    subgraph UX["✨ User Experience"]
        SEARCH["🔍 Search"]
        FILTER["📍 Filter by State"]
        PAGINATE["📄 Pagination"]
    end

    API --> FETCH
    FETCH --> LIST
    LIST --> DETAIL
    SEARCH --> LIST
    FILTER --> LIST
    PAGINATE --> LIST

📋 Requirements

You must implement:

📐 Layout

🎨 Be Creative!

Feel completely free to add:

• ✨ Animations and micro-interactions
• 🎯 New filters and sorting options
• 📱 Responsive design improvements
• ♿ Accessibility features
• 🌙 Dark mode
• 🔔 Any feature you think adds value

🔌 API

Endpoint

https://jsm-challenges.s3.amazonaws.com/frontend-challenge.json

Sample Response

{
  "results": [
    {
      "gender": "female",
      "name": {
        "title": "mrs",
        "first": "ione",
        "last": "da costa"
      },
      "location": {
        "street": "8614 rua santa catarina",
        "city": "ponta grossa",
        "state": "distrito federal",
        "postcode": 24358,
        "coordinates": {
          "latitude": "-73.6753",
          "longitude": "142.4098"
        },
        "timezone": {
          "offset": "-3:00",
          "description": "Brazil, Buenos Aires, Georgetown"
        }
      },
      "email": "ione.dacosta@example.com",
      "dob": {
        "date": "1968-01-24T18:03:23Z",
        "age": 50
      },
      "phone": "(01) 5765-3027",
      "cell": "(75) 9398-8111",
      "picture": {
        "large": "https://randomuser.me/api/portraits/women/50.jpg",
        "medium": "https://randomuser.me/api/portraits/med/women/50.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/women/50.jpg"
      }
    }
  ]
}

⭐ Evaluation Criteria

We assess your submission across 7 competencies. There are no "levels" to choose — just deliver your best work, and we'll evaluate where you stand.

🤖 AI Journey (Required)

Create an /ai-journey folder in your repository documenting how you collaborated with AI tools.

📁 Required Structure

📁 ai-journey/
├── 📄 README.md          # Summary of your AI usage
├── 📄 prompts.md         # Key prompts you used
└── 📄 learnings.md       # What you learned in the process

📝 What to Document

prompts.md — The interesting parts, not everything

## 🔧 Prompt: Component architecture
**Tool:** ChatGPT-4 / Claude / Copilot

**What I asked:**
"How should I structure my React components for a customer directory app?"

**What happened:**
Initial suggestion was over-engineered. I simplified to...

**Final approach:**
[your architecture]

learnings.md — Reflect on the experience

## ✅ What worked well
- AI helped with CSS animations I wasn't familiar with
- Great for generating test boilerplate

## ❌ What didn't work
- Accessibility suggestions were incomplete
- Had to research WCAG guidelines myself

## 🔄 What I'd do differently
- Be more specific about design system constraints
- Ask for simpler solutions first

📤 Submission

💻 Tech Stack

Choose your favorite framework/library. We're framework-agnostic!

📁 Repository Structure

📁 your-repo/
├── 📂 src/                  # Source code (tests alongside components)
├── 📂 ai-journey/           # AI documentation (required!)
│   ├── 📄 README.md
│   ├── 📄 prompts.md
│   └── 📄 learnings.md
└── 📄 README.md             # Setup instructions

📮 How to Submit

flowchart LR
    A["1️⃣ Create public\nGitHub repo"] --> B["2️⃣ Open Issue\nin this repo"]
    B --> C["3️⃣ Wait for\nour feedback"]

Issue format:

• Title: [Frontend] Your Name
• Content: Link to your repository + brief description

⏰ Timeline

❓ FAQ

🔗 Other Challenges

💬 Questions?

📋 Open an Issue  •  ✉️ vagas-dev@juntossomosmais.com.br

Before asking, check if your question was already answered in previous issues.

_{Made with 💛 by the Engineering Team at Juntos Somos Mais}