SevenLabz

Build this project step by step with our detailed tutorial on Js with John YouTube. Join the family!

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🕸️ Snippets (Code to Copy)
6. 🔗 Assets
7. 🚀 More

🚨 Tutorial

This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, Js with John.

If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!

🤖 Introduction

A AI Audio Platform. Built with the latest Next.js 15 and the Appwrite Node SDK.

If you're getting started and need assistance or face any bugs, please send a message to me.

⚙️ Tech Stack

• React 19
• Next.js 15
• Appwrite
• TailwindCSS
• ShadCN
• TypeScript
• ElevenLabs API

🔋 Features

👉 User Authentication with Clerk: Implement google login, and logout functionality using Clerk authentication system.

👉 View and Manage Audios: Users can browse through their files audios in Appwrite .

👉 Download Audios: Users can download their audios.

👉 Modern Responsive Design: A fresh and minimalist UI that emphasizes usability, ensuring a clean aesthetic across all devices.

and many more, including the latest React 19, Next.js 15 and Appwrite features alongside code architecture and reusability

🤸 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/jovimoura/sevenlabs
cd sevenlabs

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env.local in the root of your project and add the following content:

ELEVENLABS_API_KEY=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/app
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/app
DATABASE_URL=
APPWRITE_PROJECT=
APPWRITE_ENDPOINT="https://cloud.appwrite.io/v1"
APPWRITE_STORAGE=
STRIPE_SECRET_KEY=

Replace the values with your actual Appwrite credentials. You can obtain these credentials by signing up & creating a new project on the Appwrite website.

Running the Project

npm run dev

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

🔗 Assets

• Watch Next.js 15 Crash Course