Software Developer Practical Test: Complete Weather App Guide with Pro Hints & Solutions

Project Challenge: Weather Application Development

Develop a functional weather application that integrates with a public weather API to display real-time weather conditions for user-specified locations.

Core Requirements

✅ Location-based Weather Retrieval

• Implement location input (city/country)

• Fetch real-time data from any public weather API (OpenWeatherMap, Weatherstack, etc.)

✅ Comprehensive Weather Display

• Show temperature (current, min/max)

• Display humidity, wind speed, atmospheric pressure

• Include weather condition icons/descriptions

✅ User Experience

• Responsive, visually appealing interface

• Loading states and error handling

• Intuitive user interactions

Technical Implementation Guidelines

Technology Options

Option 1: JavaScript/TypeScript

• Frameworks: React, Angular, or Vue

• Key Requirement:

  • Use async/await or promises for API calls

  • Implement proper error handling

Option 2: Dart/Flutter

• Develop cross-platform mobile app

• Key Requirement:

  • Utilize Flutter widgets for UI

  • Implement state management

Submission Requirements

Mandatory Deliverables

1. Source Code

   • Upload to public GitHub repository named: dhis2-practical-interview

   • Include clear execution instructions in README.md

2. Design Documentation (in repository)

   • API integration approach

   • Error handling strategy

   • UX design decisions

   • Technical challenges and solutions

3. Functional Application

   • Working prototype meeting all requirements

   • Clean, maintainable code structure

Evaluation Criteria

🔹 Functionality (40%) - All features working correctly
🔹 Code Quality (30%) - Structure, readability, best practices
🔹 User Interface (20%) - Aesthetics and responsiveness
🔹 Documentation (10%) - Clear explanations and instructions

Additional Notes

🌦 API Suggestions:

• OpenWeatherMap (free tier available)

• Weatherstack

• AccuWeather

💡 Bonus Considerations:

• Location autocomplete

• Temperature unit conversion

• Weather forecast display

• Offline capability

Complete Task Breakdown with Expert Hints

1. Core Requirements (Must-Have Features)

✅ Basic Functionality

• Location input field with submit button

• API call to fetch weather data

• Display current weather conditions

💡 Pro Hint:
*"Use the free tier of OpenWeatherMap API (1000 calls/day) - register now to secure your API key!"*

// Sample API endpoint structure
const API_URL = `https://api.openweathermap.org/data/2.5/weather?q={CITY}&appid={API_KEY}&units=metric`;

2. Recommended Tech Stack

Option A: JavaScript/TypeScript (Web)

Suggested Framework: React.js
Key Packages:

• axios for API calls

• react-icons for weather icons

• styled-components for CSS

💡 Pro Hint:
"Create a custom hook useWeatherAPI() to separate data fetching logic from components"

// Sample custom hook structure
const useWeatherAPI = (location: string) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await axios.get(API_URL);
        setData(response.data);
      } catch (error) {
        console.error("API Error:", error);
      }
      setLoading(false);
    };
    
    if (location) fetchData();
  }, [location]);

  return { data, loading };
};

Option B: Dart/Flutter (Mobile)

Key Packages:

• http for API calls

• flutter_spinkit for loading animations

• provider for state management

💡 Pro Hint:
"Implement a WeatherModel class to parse API responses and handle business logic"

class WeatherModel {
  final String city;
  final double temperature;
  final int humidity;
  
  WeatherModel.fromJson(Map<String, dynamic> json) :
    city = json['name'],
    temperature = json['main']['temp'],
    humidity = json['main']['humidity'];
}

3. UI/UX Implementation Guide

✅ Essential UI Components:

1. Search input with clear button

2. Weather card displaying:

   • Location name

   • Current temperature

   • Weather condition icon

   • Humidity/Wind details

3. Loading state

4. Error messages

💡 Pro Hint:
"Use a Card component with box-shadow for better visual hierarchy - add a subtle gradient background based on temperature ranges"

/* Sample temperature-based background */
.card {
  background: linear-gradient(
    135deg,
    ${temp > 30 ? '#ff9a9e' : temp > 20 ? '#fad0c4' : '#a1c4fd'},
    ${temp > 30 ? '#fad0c4' : temp > 20 ? '#a1c4fd' : '#c2e9fb'}
  );
}

4. Error Handling Strategies

Must-Cover Scenarios:

• Invalid location input

• API rate limits exceeded

• Network connectivity issues

• Malformed API responses

💡 Pro Hint:
"Implement a toast notification system to show user-friendly error messages without breaking UI flow"

// Sample error handling
try {
  const response = await axios.get(API_URL);
  if (response.data.cod === "404") {
    showToast("Location not found - try another city");
  }
} catch (err) {
  showToast(err.response?.data?.message || "Network error occurred");
}

5. Performance Optimization Tips

1. Debounce search input (300ms delay)

2. Cache API responses locally

3. Lazy load heavy components

4. Minimize re-renders with React.memo/useMemo

💡 Pro Hint:
"Use localStorage to cache weather data with timestamp validation (expire after 10 mins)"

// Sample caching implementation
const getCachedWeather = (city) => {
  const cached = localStorage.getItem(`weather_${city}`);
  if (cached) {
    const { data, timestamp } = JSON.parse(cached);
    if (Date.now() - timestamp < 600000) return data;
  }
  return null;
};

Submission Checklist

1. GitHub Repository named dhis2-practical-interview containing:

   • Complete source code

   • Detailed README.md with:

     • Setup instructions

     • Technology choices explanation

     • Known limitations

2. Design Documentation covering:

   • Architecture diagram

   • API response handling strategy

   • Error handling approach

   • UI design decisions

3. Working Prototype that:

   • Runs without errors

   • Handles edge cases gracefully

   • Provides good user feedback

Common Pitfalls to Avoid

🚫 API Key Exposure - Never hardcode in frontend (use environment variables)
🚫 No Loading States - Always show activity indicators during API calls
🚫 Poor Error Handling - Plan for all possible failure scenarios
🚫 Non-Responsive UI - Test on mobile/desktop breakpoints

Bonus Features (For Standout Submissions)

⭐ 5-day forecast view
⭐ Temperature unit toggle (C/F)
⭐ Geolocation detection
⭐ Animated weather icons
⭐ Offline mode with cached data