Spotify Next.js API Interface

A front-end portfolio project built with React, Next.js, Express and the Spotify Web API. The project demonstrates an API-driven user journey where a user authenticates with Spotify, moves through a routed interface, and interacts with music data through a web application.

This project is relevant to front-end interface roles because it shows practical experience with component-based UI structure, routing, API authentication flow, server-backed Next.js setup, and user-facing interaction design.

Key Features

• React-based user interface
• Next.js page routing
• Express server for running the Next.js application
• Spotify Web API authentication flow
• User journey from landing page to Spotify login and authenticated pages
• Reusable layout component structure
• Bootstrap-based responsive page layout
• Deployment-oriented scripts for build/start workflows

Technology Stack

• React
• Next.js
• JavaScript
• Express
• Node.js
• Spotify Web API
• Bootstrap
• Webpack / Next build workflow

Why This Project Matters

This project demonstrates transferable front-end interface skills for roles involving:

• API-backed web interfaces
• User authentication flows
• Client-side routing and page structure
• Responsive UI delivery
• JavaScript application development
• Data-driven user journeys

Local Setup

npm install
npm run dev

Then open:

http://localhost:8080

Available Scripts

npm run dev
npm run build
npm start

Project Structure

components/     Reusable layout and header components
constants/      API configuration constants
pages/          Next.js pages and routed views
server.js       Express server wrapping the Next.js app
package.json    Project dependencies and scripts

Notes

This is an older training project, so dependency versions reflect the original build environment. The project remains useful as evidence of React, Next.js, Express and API integration foundations.

Repository Owner

Meisi Xu
GitHub: https://github.com/kate666kate