This project was generated with Angular CLI version 16.2.0.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.
- Standalone components
- Lazy loading modules
- More logical directory structure
- Responsive layout
- Very strict ESLint rules
- Aliases
- Example tests for: Component, Service, Interceptor, Directive
- End-to-end tests configuration with Cypress
- Following the best practices!
- Use of NgOptimizedImage
The primary goal of this task is to assess the proficiency of a candidate in frontend development and software design. The task requires the creation of the following application:
- Develop an application for viewing and saving user information.
- Utilize the Angular framework for implementation.
- Fetch data from an API (details provided below).
- Display the current weather based on the user's location.
Specifications:
You are expected to build an Angular application that retrieves user data and displays weather information based on the user's location.
The first route should present randomly fetched users in a card view with the following details:
- User details
- Name
- Gender
- Profile image
- Location
- Weather
- Icon (e.g., Sunny, Cloudy, etc.)
- Current temperature
- Highest and lowest temperatures for the current date
Data Sources:
- User data: https://randomuser.me/api/
- Weather data: https://api.open-meteo.com/v1/forecast?latitude=-19.7962&longitude=178.2180¤t_weather=true&hourly=temperature_2m (Documentation: https://open-meteo.com/en/docs)
Each user card should feature a save button that stores details in the browser's local storage.
For the second route, create a list displaying saved user information. The visual style of these cards should resemble the first route's cards (without the save button).
Requirements:
- The application should be visually appealing and responsive across desktop, tablet, and mobile devices. The design is open to your interpretation.
- Authentication is not required.
- Code should be clean, readable, and ready for production.
- The solution should be fully functional, and a well-designed UI alone is insufficient for completion.
Deliverables:
- Provide a link to the source code repository (e.g., GitHub).
- Include a link to the deployed application.
Bonus:
- Link the project to a GitHub repository for code review.
- Additional points for implementing the following:
- Periodic update of the current temperature (every 5 minutes).
- Display of user location on a map (using ngx-leaflet).
- Showing user profile images on the map.
- Displaying hourly weather information.
Important Note To Dev:
Time management is crucial. Begin with implementing the core functionality ("happy flow") before attempting bonus features. If you encounter challenges while implementing a specific feature, avoid getting stuck and focus on other achievable tasks.
Important Note From Dev:
Such features were not included in the project to save time: