ZenStream is a calming, AI-powered podcast web app that helps users relax, focus, and find serenity. Users can sign in, select or search for topics, and generate personalized podcasts with text-to-speech support. The two main components of the app are the use of Google Cloud and MongoDB. We used the Gemini Api and the Google Cloud for deployment and MongoDB for vector search.
https://zen-stream-243709338804.northamerica-northeast1.run.app
- Clerk Authentication: Secure sign-in and sign-up with Clerk
- Personal Dashboard: Each user has a unique homepage with a sidebar and profile menu.
- Topic Suggestions: Google-style search box with topic suggestions as you type.
- Podcast Generation: Create new podcasts based on selected or typed topics.
- Text-to-Speech: Listen to generated podcasts directly in the browser.
- Responsive UI: Clean, modern interface with user-friendly navigation.
- Node.js (v20 or newer recommended)
- npm or yarn
- Clerk account (for authentication keys)
-
Clone the repository:
git clone https://github.com/yourusername/zen-stream.git cd zen-stream -
Install dependencies:
npm install # or yarn install -
Set up environment variables:
Create a
.env.localfile in the root directory and add your Clerk keys:NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key CLERK_SECRET_KEY=your_clerk_secret_key -
Run the development server:
npm run dev # or yarn dev -
Open http://localhost:3000 in your browser.
- Sign In: Click the "Sign In" button to authenticate with Clerk.
- Search Topics: Start typing in the search box to see topic suggestions.
- Select a Topic: Choose a suggested topic or type your own.
- Generate Podcast: Click "+ New Podcast" to create a personalized podcast.
- Listen: Use the play button to listen to the generated podcast via text-to-speech.
Made with ❤️ for relaxation and focus.
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.