A challenge from https://github.com/RodyRafa/challenge/tree/master/react
- Possibility to insert the name of the song or album and get a list;
- If an album is searched and returned, when the album is selected, the user will be directed to the music list of that album.
- Play the song preview.
- You must use React;
- You must create a repository and share it with us;
- You must not use any CSS Framework (Bootstrap, PureCss, etc.);
- You should not use scaffolds (Create React App, etc.), we want to see how you will build your project structure;
- I want to be able to run your project running yarn/npm start;
- The application must request the token that will be used to make requests to the API;
- TOKEN persistence, when expired request a new token;
- We need to make sure that our application works as expected, some tests would be welcome, we are using enzyme and jest here, but feel free to test with what you feel most comfortable with.
- Think that your application will go through 3 environments, DSV - HML - PRD, mount build and use environment variables.
- When the user makes a request, it would be nice to save it inside redux, if he types and searches for the album again, we get a copy from there so as not to make multiple requests to the API.
- When the user enters the application, we can display a list with the last albums searched/clicked to improve the experience.
- Today most of the accesses to websites are made by cell phone, a responsive layout makes perfect sense for our application!
- Our UX team is very demanding, they think a lot about the user experience, some animations and effects would be interesting too.### Extras
- Everything running on a free infrastructure.
- OAuth for logging in and getting the access token.
- Infinite scroling and load more button for better ux.
- Backend so that the access token doesn't get exposed and for SSR.
- Deployed online on vercel.
- Display song lyrics.
- Error handling and fallbacks.
- Errors observability in production with Axiom.
- E2E tests withouth mocking.
- CI and CD pipeline, automated tests run in every push and is automatically deployed to vercel..
- Analytics with @vercel/analytics.
- Reusable ui components that you can add classes to.
- Lazy loading components for better performance.
- Full english and portuguese localization!
- Dark mode and light mode.
- SEO friendly.
- SSR for speed and better SEO.
- Ratelimiting the api through upstash.
- Localhost query caching.
- Playing the full song in case you have an premium account by using the spotify-web-player sdk.
- Run on the edge runtime for maximum performance and lowest cost with no cold starts.
- Fully typesafe by using strict Typescript and protecting the backend on the runtime by using zod.
- Images optimized with sharp through vercel.
- Middleware for ensuring that the user is logged in.
- Panel with documentation for viewing the backend api.
- Accesible for everyone, Screen reader friendly and keyboard navegation.
Open the terminal
Download the repo with git clone https://github.com/YgorPerez/spotify-api-challenge.git
cd spotify-api-challenge
Run pnpm i
Then go to the env.example and follow the instructions
Now you can run pnpm dev for serving the application on localhost:3000
spotify only leaves emails registered in the dashboard connect in the app so anyone who wants to see the app will have to ask me to add their spotify email there. I have already requested access to their quota extension to allow any user, but it is possible that I can't since they have lots and lots of requirements that would end up degrading the app's UI and I decided not to implement it to follow the layout given.
I can't run all the backend on the edge runtime due to vercel limitation in mode free that allows only 1MB for edge function size and I use 80KB more than that.
App Home
App home in light mode
App album page
App album page in light mode
