Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/syedahmedullah14/ai-on-air

A cutting-edge AI SaaS platform that enables users to create, discover, and enjoy podcasts with advanced features like text-to-audio conversion with multi-voice AI, podcast thumbnail image generation, and seamless playback. The platform is built using Next.js, TypeScript, Convex, OpenAI, Stripe, Clerk, ShadCN, and Tailwind CSS.
https://github.com/syedahmedullah14/ai-on-air

ai clerk convex javascript jwt nexys4ddr openai openai-api reactjs saas saas-application shadcn-ui subscriptions tailwindcss transcribe transcription typescript zod

Last synced: about 1 month ago
JSON representation

A cutting-edge AI SaaS platform that enables users to create, discover, and enjoy podcasts with advanced features like text-to-audio conversion with multi-voice AI, podcast thumbnail image generation, and seamless playback. The platform is built using Next.js, TypeScript, Convex, OpenAI, Stripe, Clerk, ShadCN, and Tailwind CSS.

Awesome Lists containing this project

README 

        


  


      Project Banner

  



  


    typescript

    nextdotjs

    tailwindcss

    openai

    convex

    clerk

    shadcn

    zod



  



  
OnAir.ai Podcast Platform



  ![GitHub deployments](https://img.shields.io/github/deployments/deepsingh132/aionair/production?label=build)

  [![Node.js CI](https://github.com/deepsingh132/aionair/actions/workflows/node.js.yml/badge.svg)](https://github.com/deepsingh132/aionair/actions/workflows/node.js.yml)

  [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebook/react/blob/main/LICENSE)

  [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)

  

  [!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png)](https://www.buymeacoffee.com/deepsingh132)






## 📋 Table of Contents



1. 🤖 [Introduction](#introduction)

2. ⚙️ [Tech Stack](#tech-stack)

3. 🔋 [Features](#features)

4. 📸 [Screenshots](#screenshots)

5. 🤸 [Getting Started](#getting-started)

6. 📄 [License](#license)

7. 📞 [Contact](#contact)



## 🤖 Introduction



A cutting-edge AI SaaS platform that enables users to create, discover, and enjoy podcasts with advanced features like text-to-audio conversion with multi-voice AI, podcast thumbnail Image generation and seamless playback. The platform is built using Next.js, TypeScript, Convex, OpenAI, Clerk, ShadCN, and Tailwind CSS. It offers a modern home page, podcast discovery page, search functionality, podcast creation page, profile page, podcast details page, and a responsive design for a seamless user experience.



## ⚙️ Tech Stack



- Next.js

- TypeScript

- Convex

- OpenAI

- Stripe (for payments)

- Clerk

- ShadCN

- Tailwind CSS

- Zod (for validation)



## 🔋 Features



👉 **Advanced Authentication**: Offers secure and dependable user login and registration functionalities.



👉 **Contemporary Home Page**: Highlights trending podcasts with a persistent player for uninterrupted listening.



👉 **Podcast Discovery Page**: A dedicated section for users to explore a wide range of new and popular podcasts.



👉 **Comprehensive Search Functionality**: Empowers users to effortlessly find podcasts using various filters and criteria.



👉 **Podcast Creation Page**: Facilitates podcast creation with text-to-speech conversion, AI-generated images, and preview options.



👉 **Multi-Voice AI Capability**: Provides multiple AI-generated voice options for creating dynamic and engaging podcasts.



👉 **User Profile Page**: Allows users to view and manage their created podcasts, including options to delete them.



👉 **Detailed Podcast Page**: Presents in-depth information about each podcast, including creator details, listener statistics, and transcripts.



👉 **Enhanced Podcast Player**: Includes features like rewind/fast forward controls and mute/unmute functionality for an optimal listening experience.



👉 **Responsive Design**: Ensures the platform looks great and works seamlessly on all devices and screen sizes.



and many more, including code architecture and reusability



## 📸 Screenshots



| Homepage |

| :-----------: |

|  Home Page  |

| Discover Page |

| Discover Page   |

| Create Podcast Page |

| Create Podcast Page |

| Podcast Details Page |

|  Podcast Details Page |

| Profile Page |

|  Profile Page |

| Plans Page |

|  Plans Page |

| Payment / Stripe Checkout Page |

|  Payment Page |

| Usage Page |

|  Usage Page |



## 🤸 Getting Started



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



**Prerequisites**



Make sure you have the following installed on your machine:



- [Git](https://git-scm.com/)

- [Node.js](https://nodejs.org/en)

- [npm](https://www.npmjs.com/) (Node Package Manager)



**Cloning the Repository**



```bash

git clone https://github.com/deepsingh132/aionair.git

cd aionair

```



**Installation**



Install the project dependencies using npm:



```bash

npm install

```



**Set Up Environment Variables**



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



```env

CONVEX_DEPLOYMENT=

NEXT_PUBLIC_CONVEX_URL=

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=

CLERK_SECRET_KEY=

NEXT_PUBLIC_CLERK_SIGN_IN_URL='/sign-in'

NEXT_PUBLIC_CLERK_SIGN_UP_URL='/sign-up'

OPENAI_API_KEY=

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=

STRIPE_SECRET_KEY=

```



Replace the placeholder values with your actual Convex & Clerk credentials. You can obtain these credentials by signing up on the [Convex](https://www.convex.dev/) and [Clerk](https://clerk.com/) websites.



**Running the Project**



```bash

npm run dev

```



Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.



**Testing Stripe Payments**



To test the Stripe payments/subscriptions functionality, you can use the following test card details:



- **Card Number**: 4242 4242 4242 4242

- **Expiry Date**: Any future date

- **CVC/CVV**: Any 3-digit number

- **Cardholder Name**: Any name

- **Address**: Any address (e.g., 123 Main Street)

- **ZIP Code**: Any 5-digit number



You can also use the [Stripe Test Cards](https://docs.stripe.com/testing#cards) for more test card details.



## 📞 Contact



If you have any queries or feedback, please feel free to reach out to me at my [email](mailto:[email protected]) or connect with me on [LinkedIn](https://www.linkedin.com/in/ahmedullahsyed/).