Implementation Details

1. Dashboard Component

• File: src/components/Dashboard.js
• Purpose: Renders the three widget components (UserStats, Weather, Crypto) in a grid layout.
• Reason: Centralizes the dashboard layout and ensures widgets are modular, making it easy to add or remove widgets as needed.

2. Widget Components

• UserStats.js: Displays mock user statistics (Total Users, Active Domains, Companies, Cities) with a static API response.
• Weather.js: Fetches weather data using the Open-Meteo API based on geolocation, including temperature, elevation, and wind speed.
• Crypto.js: Fetches cryptocurrency prices (Bitcoin, Ethereum, Cardano) using a mock API response.
• Reason: Each widget is isolated to handle specific data types, improving readability and scalability. Public APIs ensure real-time data simulation.

3. Custom Hooks

• useApi.js: Handles API data fetching with loading, error, and lastUpdated states.
• useAutoRefresh.js: Implements a 10-second auto-refresh for each widget using setInterval.
• useGeolocation.js: Retrieves latitude, longitude, and address using the browser's geolocation API and Nominatim for reverse geocoding.
• Reason: Custom hooks encapsulate reusable logic, reduce code duplication, and enhance performance by managing state and side effects efficiently.

4. Performance Optimization

• Auto-refresh is set to 10 seconds as per requirements, using useAutoRefresh to avoid manual interval management.
• Modular component design minimizes re-renders and optimizes resource usage.
• Reason: Ensures real-time updates without overwhelming the UI or API, aligning with the performance optimization goal.

APIs Used

• Open-Meteo API: For weather data based on geolocation.
• Mock API: Simulated for UserStats and CryptoPrices to mimic real API behavior.
• Nominatim (OpenStreetMap): For reverse geocoding to get the address from coordinates.

Screenshots

Desktop View

• Displays the dashboard with three widgets side by side on a larger screen.
• Last updated timestamps are visible for each widget (e.g., 3:44:52 PM EAT).

Mobile View

• Stacks widgets vertically for better readability on smaller screens.
• Maintains all data points with adjusted styling for mobile responsiveness.

How to Run

1. Clone the repository: git clone https://github.com/MainaMwangiy/dashboard-challenge
2. Navigate to the project directory: cd dashboard-challenge
3. Install dependencies: npm install or yarn install
4. Start the development server: npm start or yarn start
5. Open http://localhost:3000 in your browser.

Challenges and Solutions

• Geolocation Accuracy: Handled potential errors with fallback values and error messages in useGeolocation.
• API Rate Limits: Used mock data where necessary to simulate API behavior without exceeding limits.
• Responsive Design: Ensured widgets adapt to mobile and desktop using CSS flexbox and media queries.

Future Improvements

• Add error boundaries for better robustness.
• Implement lazy loading for widgets to improve initial load time.
• Enhance styling with Tailwind CSS for rapid UI adjustments.

Submission

This project meets the requirements for the 1st round interview assessment for the Frontend Software Engineer role at iZone Africa Limited. The code is submitted within 24 hours as requested.

Thank you for the opportunity!

---