Podcastr Ai_app_next
AI Podcast Platform
📋 Table of Contents
- ✨ Introduction
- ⚙️ Tech Stack
- 📝 Features
- 🚀 Quick Start
✨ Introduction
[EN] A cutting-edge AI SaaS platform that empowers users to create, discover, and enjoy podcasts with advanced features such as text-to-audio conversion using multi-voice AI powered by OpenAI API, podcast thumbnail image generation, and seamless playback. The platform includes secure authentication using Clerk, ensuring a safe and personalized user experience.
[FR] Une plateforme SaaS d'IA de pointe qui permet aux utilisateurs de créer, découvrir et apprécier des podcasts avec des fonctionnalités avancées telles que la conversion texte-en-audio utilisant une IA multi-voix alimentée par l'API OpenAI, la génération d'images miniatures de podcasts et une lecture fluide. La plateforme inclut une authentification sécurisée utilisant Clerk, garantissant une expérience utilisateur sûre et personnalisée.
⚙️ Tech Stack
React is a popular JavaScript library for building user interfaces, particularly single-page applications, by creating reusable UI components and managing the state of the application efficiently.
Next.js is a powerful React framework for building server-rendered applications and static websites with ease. It offers features like automatic code splitting, server-side rendering, and static site generation.
TypeScript is a statically typed superset of JavaScript that enhances code quality and maintainability by providing optional static typing, early error detection, and robust tooling.
Convex is a modern backend-as-a-service (BaaS) that simplifies data management, real-time synchronization, and serverless functions, allowing developers to focus on building features without worrying about infrastructure.
OpenAI API is a leading artificial intelligence research and deployment company known for its advanced AI models, including GPT-4, which provides state-of-the-art natural language processing capabilities.
Clerk is an authentication and user management platform that simplifies adding secure and scalable authentication to web applications, providing features like multi-factor authentication, social logins, and user profiles.
shadcn/ui is a component library that provides reusable, customizable, and accessible UI components, designed to work seamlessly with modern frontend frameworks like React.
Tailwind is a utility-first CSS framework that allows developers to rapidly build custom designs without writing custom CSS, promoting consistency and productivity through pre-defined classes.
📝 Features
👉 Robust Authentication: Secure and reliable user login and registration system.
👉 Modern Home Page: Showcases trending podcasts with a sticky podcast player for continuous listening.
👉 Discover Podcasts Page: Dedicated page for users to explore new and popular podcasts.
👉 Fully Functional Search: Allows users to find podcasts easily using various search criteria.
👉 Create Podcast Page: Enables podcast creation with text-to-audio conversion, AI image generation, and previews.
👉 Multi Voice AI Functionality: Supports multiple AI-generated voices for dynamic podcast creation.
👉 Profile Page: View all created podcasts with options to delete them.
👉 Podcast Details Page: Displays detailed information about each podcast, including creator details, number of listeners, and transcript.
👉 Podcast Player: Features backward/forward controls, as well as mute/unmute functionality for a seamless listening experience.
👉 Responsive Design: Fully functional and visually appealing across all devices and screen sizes.
🚀 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:
Cloning the Repository
git clone {git remote URL}
Installation
Let's install the project dependencies, from your terminal, run:
npm install
# or
yarn install
Set Up Environment Variables
Create a new file named .env in the root of your project and add the following content:
# Convex
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
CLERK_WEBHOOK_SECRET=
NEXT_PUBLIC_CLERK_SIGN_IN_URL='/sign-in'
NEXT_PUBLIC_CLERK_SIGN_UP_URL='/sign-up'
# OpenAI (Use it in Convex dashboard -> https://dashboard.convex.dev)
OPENAI_API_KEY=
Replace the placeholder values with your actual credentials:
Running the Project
Installation will take a minute or two, but once that's done, you should be able to run the following command:
npm run dev
# or
yarn dev
Open http://localhost:3000 in your browser to view the project.
