Build a Customer Directory • Show Your UI/UX Skills • Document Your AI Journey
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.
| ✅ | Your coding style and component architecture |
| ✅ | Knowledge of frameworks and modern technologies |
| ✅ | UI/UX skills and attention to detail |
| ✅ | Testing strategies |
| ✅ | How you collaborate with AI tools |
Important
🤖 AI collaboration is mandatory. We don't want to know if you used AI. We want to know how you used it. Document your journey!
💡 Check out our frontend-guideline for some of our patterns and best practices.
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
You must implement:
| Feature | Description |
|---|---|
| 🔍 Search | Search customers by name and/or last name |
| 📍 Filter by State | Filter the customer list by Brazilian states |
| 📄 Pagination | Navigate between pages of customer cards |
| 👤 Customer Cards | Display customer information in card format |
| 📑 Detail Page | Internal page with more customer details (use your creativity!) |
| 🧪 Tests | We'll be happy if you write tests for it |
Note
This is just a prototype! We want to see your ability to propose improvements and new contributions to the UI.
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
https://jsm-challenges.s3.amazonaws.com/frontend-challenge.json
📄 Click to see JSON structure
{
"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"
}
}
]
}Tip
Feel free to use a BFF (Backend for Frontend) layer if you think it makes sense for your architecture.
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.
|
|
Caution
This section is mandatory. Submissions without AI documentation will not be evaluated.
Create an /ai-journey folder in your repository documenting how you collaborated with AI tools.
📁 ai-journey/
├── 📄 README.md # Summary of your AI usage
├── 📄 prompts.md # Key prompts you used
└── 📄 learnings.md # What you learned in the process
## 🔧 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]## ✅ 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
Choose your favorite framework/library. We're framework-agnostic!
📁 your-repo/
├── 📂 src/ # Source code (tests alongside components)
├── 📂 ai-journey/ # AI documentation (required!)
│ ├── 📄 README.md
│ ├── 📄 prompts.md
│ └── 📄 learnings.md
└── 📄 README.md # Setup instructions
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
| Recommended | Need more time? |
|---|---|
| 10 days | Just let us know in the issue! |
🛠️ What frameworks can I use?
Any modern framework: React, Vue, Angular, Svelte, Next.js, Nuxt, etc. Choose what you're most comfortable with.
💼 Are there open positions?
Not always, but we maintain a talent pool. Great submissions stay on our radar for future opportunities.
⚠️ What if I can only complete part of the challenge?
Submit what you have! Partial submissions with quality code tell us more than complete submissions with poor code. Just document what's missing and why.
🎨 Should I follow the layout exactly?
No! The layout is just a starting point. We want to see your creativity and UI/UX improvements. Feel free to redesign it entirely if you have good ideas.
📊 How will I know my seniority level?
We don't ask you to self-declare a level. We evaluate your submission across all criteria and determine fit based on our internal standards.
🔧 Can I use component libraries (Material UI, Chakra, etc.)?
Yes, but we also want to see your CSS skills. A mix of custom styling and library components is perfectly fine.
| Position | Repository |
|---|---|
| ⚙️ Backend | backend-challenge |
📋 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