🎵 Potify

Potify is a modern web application built with Next.js, React 19, and Tailwind CSS, powered by the Spotify Web API. It allows users to authenticate via Spotify, browse music content, and interact with their playlists.

---

🚀 Tech Stack

• Framework: Next.js 15
• Language: TypeScript
• UI Library: React 19, Tailwind CSS 4
• Authentication: NextAuth.js
• Spotify API SDK: @spotify/web-api-ts-sdk
• HTTP Client: axios
• Utility Libraries: clsx for classnames

---

📦 Installation

Prerequisites

• Node.js 20.x or later
• A Spotify Developer Account (required to get client ID and secret)

Setup

1. Clone the repository:

git clone https://github.com/Shiro-cha/potify.git
cd potify

2. Install dependencies:

npm install

3. Create a .env.local file in the root directory and add your credentials:

SPOTIFY_CLIENT_ID=your_spotify_client_id
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_random_secret

Generate a NEXTAUTH_SECRET with:

openssl rand -base64 32

---

🧪 Development

Start the development server:

npm run dev

Uses next dev --turbopack for faster development.

Run with HTTPS (if needed):

npm run dev:https

Make sure https-server.js is configured properly for your local certificates.

---

🏗️ Build and Production

Build for production:

npm run build

Start the production server:

npm start

---

✅ Linting

Run ESLint to check for issues:

npm run lint

---

📁 Project Structure

potify/
├── components/          # Reusable UI components
├── lib/                 # Helpers and API wrappers
├── pages/               # Next.js pages
├── public/              # Static files
├── styles/              # Tailwind global styles
├── https-server.js      # Optional HTTPS dev server
├── .env.local           # Environment variables
├── package.json
└── README.md

---

🧰 Features (WIP)

• Spotify OAuth login via NextAuth.js
• Display user profile and playlists
• Music search by artist, album, or track
• Audio previews
• Playlist creation and management
• Dark/light mode toggle

---

🧠 Best Practices

This project follows:

• SOLID principles
• Clean, typed code with TypeScript
• Modern ESLint setup via eslint-config-next
• Component-based architecture with reusable logic

---

🧾 License

MIT © Shiro Yukami