Scribd
Upload
2 views3 pages

Angular Test Aperture

Uploaded by

madnight222
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views3 pages

Angular Test Aperture

Uploaded by

madnight222
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Angular Test

Contents
Overview

Product Specification
Landing Page - Login With Spotify
Artist Search Page
Bonus Feature
Browsing Artists Page
Register Form Page
Bonus Feature

Technical Specifications

Evaluation Criteria

Deliverable

Build a basic Spotify application integrated with the Spotify API and create a
registration form. The Spotify application should allow users to log in, search for
artists, and retrieve information about their albums. The registration form does not
require any integration.

2. Product Specification
Using the Spotify API , to implement the following features:
User authentication using the Spotify Implicit Grant flow.
Artist search functionality to retrieve information about albums using the Spotify
artist search API.
Implement the registration pages using Reactive Forms in angular
The application should consist of the following pages:
3. Landing Page - Login With Spotify
Display a landing page with a "Login with Spotify" button.
Integrate the authentication flow using the Spotify Implicit Grant.
After successful authentication, redirect the user to the "Artist Search" page.

4. Artist Search Page


Display a search input field to allow users to search for artists.
Use the Spotify artist search API to present the search results.

Bonus Feature
Implement a "search-as-you-type" functionality as a bonus feature.

5. Browsing Artists Page


Display the search results from the "Artist Search" page.
The displayed results should match the visuals presented in the wireframes (Page
and meet the following specifications:
Show the artist's image.
Display the artist's popularity as a star rating (1-5 stars).
Show the number of followers for that artist.
Allow users to click on an artist to retrieve their albums.

6. Register Form Page


Create a form for users to register a new artist.
The form should include the following fields:
Artist Personal Information:
First Name* (min length: 3)
Last Name* (min length: 3)
Date of Birth* (min age: 25)
Email*
Phone Number* ( use regex expression to validate the Lebanese phone
numbers)
Profile Picture*
Stage Name
Artist Backstory
Starting Date
Albums
Picture
Date
Songs
Name
Duration
Fields marked with * are mandatory, others are not
Upon saving, log the registered model without any integration.

Bonus
Use State Management like ngneat elf to save the registered model
7. Technical Specifications
Build a single-page application using Angular.
You may use a CSS framework, such as Tailwind or Angular Material, for the appli-
cation's design.
Ensure your application is responsive and can adapt to different devices.

8. Evaluation Criteria
Your application should work correctly and meet the specifications.
Demonstrate good knowledge of the Angular API and its core concepts through
your code.
Create a clean and consistent UI for your application.
Be prepared to explain your technical choices and guide us through your code-
base.

9. Deliverable
Provide a link to your public GitHub repository along with instructions on how to build
and run your application.

Please let me know if you need any further clarification or have any specific ques-
tions!

You might also like