In this assignment, you will be tasked with developing a Next.js application that demonstrates your proficiency in advanced Next.js concepts and web development skills. The assignment will assess your ability to architect and implement complex features using Next.js, React, and related technologies. You will be required to build a multi-page application with specific functionality and meet certain criteria outlined below.

1. Fork this project repo to your profile and clone it to work on the project.

2. Design and implement a multi-page application called "Music World" that allows users to search for and discover music albums.

3. The application should have the following pages:

   • Home Page: Display a list of trending albums with their cover images and artist names. The list should be fetched from an API endpoint.
   • Search Page: Provide a search bar where users can enter the name of an artist or album. On form submission, display a list of search results (albums) fetched from an API endpoint.
   • Album Details Page: When a user clicks on an album from the search results or trending list, they should be taken to a page that displays detailed information about the album, including the album cover image, artist name, release date, tracklist etc.

Use the following API endpoint for fetching data:

• https://docs.7digital.com/reference
• https://www.last.fm/api
• https://www.discogs.com/
• (Recommended) https://rapidapi.com/blog/top-free-music-data-apis/

You can use any of the above apis available. Also, You are free to use any other apis according to your preference.

• Make use of Next js 13 latest features
• Use Next.js for server-side rendering (SSR) and client-side rendering (CSR) as appropriate.
• Implement efficient data fetching strategies using Next.js data fetching methods based on the specific page requirements. (TanStack Query is preferred)
• Implement a responsive and visually appealing UI using tailwind css.
• Implement client-side routing to enable smooth transitions between pages.
• Handle loading and error states gracefully during data fetching.
• Maintain global state management with Redux Toolkit / Recoil
• Write clean, maintainable, and well-documented code.
• Use Git for version control and commit your code regularly to the forked public Git repository in your profile.
• Deploy the application to a hosting platform (e.g., Vercel, Netlify) and provide a live demo URL in your repo and the submission form.

• Implement client-side caching mechanisms to optimize API requests and minimize redundant network calls.
• Enhance the UI with animations or interactive elements to improve user experience. (Headless UI and Component libraries like Chakra/Mantine can be used)
• Implement pagination or infinite scrolling for the search results page.
• Add unit tests or integration tests to ensure the correctness of your code.

1. Fork this GitHub repository Assignment Repo to your own GitHub account.
2. Commit your code regularly and push the changes to your forked repository.
3. Do not create pull request just submit your forked repository.
4. Provide a DOCS.md file with instructions on how to set up and run your application.
5. Once you have completed the assignment, share the repository URL along with live deployed url of your project with us via the submission form

• Submission Deadline: Tuesday 30 May, 2023, 11:30 PM

Note: The assignment is intentionally challenging, and you are not expected to complete all the bonus tasks. Focus on delivering high-quality code and meeting the core requirements first.

Good luck with your assignment! If you have any questions, feel free to ask for clarification.