Octave

🌐View live demo🌐

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start

🤖 Introduction

Octave is more than just a music streaming service — it's the ultimate audio destination. Songs, podcasts and audiobooks. Whether you're a casual listener or an audiophile, Octave has something for everyone.

⚙️ Tech Stack

• React
• Next.js
• Jamendo
• Firebase
• Zustand
• Clerk
• TailwindCSS
• TypeScript

🔋 Features

👉 User Authentication & Management: A comprehensive user management flow powered by Clerk.

👉 Music Library: Powered by the Jamendo api.

👉 State Management: Provided by zustand.

👉 Music Player: A full-featured built from scratch music player with play/pause, next/previous and shuffling.

👉 Minimalistic Design: Fresh and simple UI with only the essentials for ease of use and a clean aesthetic.

Add More As the project grows!

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/0ddFl3xx/octave.git
cd octave

Installation

Install the project dependencies using npm:

npm i

Set Up Environment Variables Create a file named .env in the root of your project and add:

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

# Jamendo
JAMENDO_KEY=

• To populate the Clerk keys, you can obtain these credentials by signing up & creating a new project on the Clerk website.
• To populate the Jamendo key, you can obtain it by signing up & creating a new project on the Jamendo website.

NOTE: Avoid committing your .env file to the repository.

Go to your .gitignore file and add the following line:

# env files (can opt-in for commiting if needed)
.env*

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.