/Coding-Challenge-1

Primary LanguageJavaScript

Coding Challenge

This is a Next.js project bootstrapped with create-next-app.

How to use this Project locally

First, you need to register at LastFM to create an API_KEY and story it into an environment variable

env.local

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Or visit the Vercel Deployment

Open Link

How this app works

  • frontend
    • user can search for artists
    • if there are matches, display them in a list
    • display button to download the csv file
    • display button to jump top and focus input field
  • backend
    • search input is sent to the backend api route
    • backend sends request to last.fm API
    • if there are results, send them to the frontend
    • if there are no results or no connection, send the local file to the frontend instead
    • error handling is implemented

API Routing

API routes can be accessed on http://localhost:3000/api/searchArtist. This endpoint can be edited in pages/api/searchArtist.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.