This is an Angular application that renders cards with video details from the YouTube API based on the search query. This project was generated with Angular CLI version 15.2.2.
- Angular
- RxJS
- NgRX
- Only authenticated users may use the search functionality of the app implemented with
AuthGuard - There is a reactive login form with validation
- Once the user loggs in, the token is stored in local storage
- After the user enters at least 3 characters in the Search input field, a list of 15 cards with YouTube videos is fetched from the Youtube API and rendered on the main screen
- If the user clicks on the
Settingsbutton, a sort/filter dashboard will appear - Using the search dashboard, the user can:
- sort the results by date in descending or ascending order
- sort the results by views in descending or ascending order
- filter the results by a search query
-
The bottom line on the video card indicates how old the video is:
- older than 6 months – Red
- between a month up to 6 months – Yellow
- between seven days up to a month – Green
- younger than 7 days – Blue
-
Custom
Http Interceptorswere implemented to add the base url and the youtube API key. -
There is an admin page implemented to add a new video card. It uses a reactive form with validation:
- The searched Youtube cards are saved to the
Reduxstore and retrieved from there
- The admin cards are saved to the
Reduxstore and are retrieved from there
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 build to build the project. The build artifacts will be stored in the dist/ directory.
Run npm run deploy to deploy the project to gh-pages.
The deployed version is at: https://rolling-scopes-school.github.io/mlatysheva-ANGULAR2023Q1/