React Native Developer Position at Ninjas Code

[charles-aric]

At Ninjas Code, we have an opening for a React Native Developer. To be considered for this position, you need to meet the following criteria:

✅ Requirements

1. Must Star the Repo ⭐
2. Open to On-Site Full-Time Role 🏢

📞 Contact for Queries

📧 Email: [email protected]
📱 Phone / WhatsApp: +92 341 8905592

⏳ Deadline for Task Submission

🕕 22th February 2024, 6:00 PM PK

⚠️ Submissions after the deadline won't be accepted.

🛠️ Project Overview

Create a Weather App in React Native that allows users to:
✅ Create an Attractive UI for the app.
✅ The app must be responsive.
✅ Search for a city and display weather details (from a local JSON file)
✅ View and manage recent searches
✅ Toggle between Celsius & Fahrenheit
✅ Mark cities as favorites
✅ Support offline mode (cache last searched city)
✅ Implement light/dark mode based on time

🎯 Features & Requirements

1️⃣ City Search & Weather Display

• Users enter a city name to get weather details.
• Data should come from a local JSON file (simulating an API).
  • Make sure you use JSON Server.
• Display:
  • 🌡 Temperature (°C/°F)
  • ☁️ Weather Condition (Sunny, Rainy, Cloudy, etc.)
  • 💨 Wind Speed & Humidity

📌 Example JSON (weatherData.json):

[
  { "city": "New York", "temperature": 18, "weather": "Cloudy", "humidity": 65, "windSpeed": 10 },
  { "city": "London", "temperature": 12, "weather": "Rainy", "humidity": 80, "windSpeed": 15 },
  { "city": "Dubai", "temperature": 35, "weather": "Sunny", "humidity": 20, "windSpeed": 5 }
]

2️⃣ Faster Recent Searches (Persistent with AsyncStorage)

• Store recent searches using AsyncStorage.
• Optimize performance using FlatList with memoization.
• Show recent searches first when the app opens.
• Clicking a recent search loads weather data instantly.
• If a city is not found, display an error message.

3️⃣ Temperature Unit Toggle (°C / °F)

• Add a toggle switch to convert temperatures.
• Context API or Redux Toolkit can be used for global state management.
• Formula:
  • °F = (°C × 9/5) + 32

4️⃣ Favorite Cities ⭐

• Users can mark a city as a favorite.
• Display a "Favorites" screen with saved cities.
• Clicking a favorite city opens its details.
  5️⃣ UI Enhancements 🎨

5️⃣ UI Enhancements 🎨

• Different backgrounds/icons for each weather type:
  • ☀️ Sunny = Yellow
  • ☁️ Cloudy = Gray
  • 🌧 Rainy = Blue

6️⃣ Offline Mode & Data Caching

• Show cached weather data if the user has searched before.
• If there is no internet, display the last saved data instead of an error.

7️⃣ Google Maps (Recommended)

• Use Google Maps to get your current location.
• Use some Third-Party API or simulated latitude and longitude data to get the weather of your location.

8️⃣ Bonus Challenges (Optional)

• 🎯 Pull-to-Refresh: Swipe down to refresh data.
• 🎯 Animations: Smooth transitions between screens.
• 🎯 Background Sync: Periodically update stored weather data.

🔥 Note

This challenge includes multiple tasks, covering different aspects of a real-world React Native app. While not all tasks are mandatory, the more you complete, the better! The goal is to showcase your skills, write clean, efficient code, and ensure everything works flawlessly.

⚡ Focus Areas:

✅ Functionality – The app should be fully functional with no major bugs.
✅ Performance – Optimize performance where possible (e.g., efficient rendering, caching).
✅ Code Quality – Write clean, maintainable, and well-structured code.
✅ User Experience – A smooth, intuitive, and visually appealing UI is a plus!

🚀 Do your best and make it shine!

To submit, add [email protected] as collaborator

We look forward to your submission!