Hey there 👋

We’ve designed a challenge for you to flex both your frontend and backend muscles. You’ll be working with APIs, building a clean user interface, and implementing a Rails backend to handle data and calculations. Ready? Let’s go!

🛠️ What You’ll Build

Your task is to create a dynamic full-stack app that displays and interacts with user data. Here's what we're looking for:

Frontend (React)

1. Fetch and Display Users
   • Fetch the user data from an endpoint (you'll build this in the Rails backend).
   • Display a list of users with the following details:
     • Name
     • Moving From: The city the user is moving from.
     • Moving To: The city the user is moving to.
     • Current Temperature Difference: Fetch this data from the backend and show it in Celsius. 🌡️
2. Add Sorting
   • Include a button that toggles sorting by temperature difference in ascending and descending order.
3. Add Zebra Stripes
   • Add a “zebra effect” to the list (alternate row colors) for readability.
4. Make It Responsive
   • Ensure the app looks good on all screen sizes—desktop and mobile. 📱💻

Backend (Ruby on Rails)

1. User Data API
   • Create an endpoint (e.g., /api/users) that returns a list of users, including the following details:
     • Name
     • Moving From: City name and coordinates (latitude and longitude).
     • Moving To: City name and coordinates (latitude and longitude).
2. Temperature Difference Calculation
   • Use the Open-Meteo API to fetch the current temperature for each city.
   • Calculate the temperature difference between the "Moving From" and "Moving To" cities.
   • Include this calculated value in the API response for the frontend.
3. Caching
   • Implement caching for temperature data to reduce repeated API calls for the same city (e.g., using Rails.cache).
4. Sorting
   • Support sorting the user data by temperature difference (ascending or descending) directly in the API response when requested.

🚀 How to Deliver

We want to see your solution! Here are the ways you can share it:

1. GitHub Repo: Add us as collaborators and share the link.