https://v0.dev/chat/podcast-platform-redesign-pPd4tJzK1CB
continue generating the codes without any pause "Design a sleek and modern podcast platform UI similar to the provided screenshots. The platform should include:
Authentication Page: A clean login/sign-up interface with a focus on user authentication. Dashboard: A user-friendly homepage displaying recommended podcasts, trending episodes, and easy navigation. Podcast Details Page: A detailed page for each podcast, featuring a cover image, episode list, play controls, and a transcript section. Create Page: A form-based interface where users can upload and manage their podcasts. Profile Page: A structured profile layout with user details, uploaded podcasts, and customization options. Search & Empty States: A well-designed search results page and an intuitive empty state layout for when no results are found. The UI should have a professional yet engaging feel, with a balanced color scheme, rounded UI elements, and a smooth user experience. Prioritize clear typography, easy-to-navigate sections, and high accessibility standards. The design should be optimized for both desktop and mobile screens."
import diffrent images to full fill the blank image section from google also make sure every button must work and shouyld be connceted to each other to make me redirect from one point to second point
the create podcast and discover page isnt working make them working too also make their logic and codin well to work integrated with other pages and use sonner instead of toast so rewrite the code again also while creating podcast page use the screenshot as a refrence and make same as it and inigrate Elevellabs for text-to speech feature you can see in the screenshot there is text-to speech text area to create posdcat with the help of ai you should do the same also use an ai to generate thumbnail by ai and extra option to upload your own thumbnail from file explorer and every button should be working re check multiple times to make sure everything work fine also the refer the screenshot and make verything accordingly same as it is and the other parts such as player which is helpful when i play a podcast it shows the time duration etc. you know what i mean and also make it more clean and minimaly beautiful
use real api keys and create a .env.local file to make the text-to-speech feature work in real life which means when someone put there own words the new audio should be generated and should be working and can be publish in the application also the thumbnail of every podcast is same try diffrent diffrent podcast for each of the podcast also use the real generated diffrent audio for every podcast and the profile should be working the user must be able to ogin and logout if they wants to here are the various apis for every variable and use convex to store podcasts, users and other parts i have also shared the github repositry link to use refer it work on backend #Convex
CONVEX_DEPLOYMENT=dev:groovy-owl-509 # team: kabir-singh-og, project: podcastr-10075 NEXT_PUBLIC_CONVEX_URL=https://groovy-owl-509.convex.cloud
#Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_cHJvdmVuLXN3aWZ0LTc4LmNsZXJrLmFjY291bnRzLmRldiQ CLERK_SECRET_KEY=sk_test_WwAZBmhkxRbkkFJaAuiw2eBdZ02oQTgL1kiJZChxkG CLERK_WEBHOOK_SECRET=whsec_s3lB2VqbA8vZqs3zt5jNJda74QC1PQTg NEXT_PUBLIC_CLERK_SIGN_IN_URL='/sign-in' NEXT_PUBLIC_CLERK_SIGN_UP_URL='/sign-up'
#OpenAI OPENAI_API_KEY=sk-svcacct-FNpQO85w0bzpdzxeGtdxUA0GiwWvH5PKKIDqw1p709h6_j-IUB9rfJcKpS4aeaNsJ_T3BlbkFJr-I_oToe2H0-_0bUhgmL4YlUnaABVZnXDwnBnPpQIFLHPs95BUAtkL_hdStgtsCXEA
#ElevenLabs ELEVENLABS_API_KEY="sk_6118f2811814ec542b8f2e053f8c3c404061c71245be9664"
#HuggingFace HUGGINGFACE_API_KEY=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
NEXT_PUBLIC_SERVER_URL=http://localhost:3000
also this is the reposirty link https://github.com/adrianhajdin/podcastr refer the every code to create a backend of the project also in the home page the left sidebar where all the 4 page options are make them go in out in three lines to provide extra space in home page for users also in discover page the search bar should be working also when an user makes or upload or publish an new podcast that podcast should automatically sync in discover page in the new podcast also in create podcast section the area is very consested make the tiles little smaller so they can fit in the page also while genrating podcast when i put the prompt and click generated it is same audio everytime so make it work real in real life by means whenever or whatever user put the generated audio should be the prompt and no something which is already is there in the project also while in the upload your thumbnail section on the not only the click to upload section but the whole page wherver i click the file explorer get opens same goes to upload our own thumbnail and the whole project must be comaptible in working in editor like vs code and webstrom to make it that way
also if possible enhance the look of whole project a little more the monthly listener and the duration of the podcasts must be real and working like if the podcast is of 10 sec. it must show 10 secss and if longer so it must show the longer change the logo of podcastr app in top bottom also make it work in every deice such as phone tablet etc
I'll create a comprehensive podcast platform with authentication, dashboard, podcast details, creation tools with AI integration, and more. The application will use Clerk for authentication, Convex for data storage, and ElevenLabs for text-to-speech functionality.
Please make sure to add the following environment variables to your project: