weather.github.io

• This project was generated with Angular CLI version 16.x
• Typescript 5.1
• Ngrx && Rxjs
• Styling with Angular Material based on SCSS
• Testing with Jasmin + Karma + jasmine-marbles

Built With

Features

*All functionality

Function	Description	Implemention
Weather API Integration	Integrate with a weather API of your choice to fetch weather data.(openweather,...) Use RxJS Observables and operators to handle asynchronous data fetching.	-Login to openweathermap ref site and get an API KEY for getting data you pass it as params with url e.g. /data/2.5/weather?q={city}&&appid={API key}&units=metric
Caching static files and data and Offline as well	Implement caching mechanisms to reduce API requests and improve performance. Support offline functionality by caching previously fetched weather data.	- Using Interceptor and capture request, ShareReplay rxjs , Servive Worker, pwa , and configure Production Build with http-server Help ref
Display Weather Data	Display the current weather information, including temperature, humidity, and weather condition.
Search Functionality	Implement an input field with a search button. Fetch and display the weather data for the searched city.
ErrorHandling and Logging	Handle errors that may occur during API requests. Display appropriate error messages to the user. Integrate a logging service (e.g., Sentry) to log errors and exceptions.	- Create account and login to Sentry ref site - # Using npm (Angular 12+) npm install --save @sentry/angular-ivy - setting the sentry dsn , init the sentry in project , and register the sentry sonfig in provider of the module - Using Toast notify
StateManagement with NgRx	Use NgRx to manage the application state. Define actions, reducers, and effects to handle fetching weather data and updating the state accordingly. Use selectors to retrieve specific weather data from the state.	NgRx ref
UnitTesting and TestCoverage	Write unit tests using Angular's testing frameworks (e.g., Jasmine, Karma). Aim for a high level of test coverage to ensure code reliability and maintainability.	testing-code-coverage ref
Performance Optimization	Optimize the application's performance by lazy-loading modules, using code splitting, and optimizing network requests. Implement memoization techniques to cache expensive calculations and computations
Internationalization and Localization	Implement internationalization (i18n) and localization (l10n) support to provide multi-language support in the application.	ngx-translate ref
Responsive Design	Design and layout the application with a responsive and mobile-friendly interface. Ensure the application is visually appealing and usable on different screen sizes.
Continuous Integration and Deployment	Deploy the application to a hosting platform on Netlify	View Site - Ref - Netlify

Development server

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.

Code scaffolding

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.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests and test-coverage

  npm run test
  npm run test test-coverage

Further help

Analyze statically the code to quickly find problems.

  npm run lint
  npm run lint:fix

Format the code with Prettier

  npm run prettier

configure Production Build with http-server and run /dist/ on a server throght cli ( Testing offline mode)

  npm run start-pwa

View(Demo) of project