JavaScript Mastery
JavaScript Mastery
  • 133
  • 54 263 366
Build and Deploy a Saas Podcast Platform in Next.js
Build a unique Software-as-a-Service app with AI-powered features like text-to-multiple-voices functionality and AI-generated images with Next.js 14 and Convex.
⭐ Convex - convex.dev/c/jsmastery
🌟 Clerk - go.clerk.com/VFH8CMR
🎨 AI Podcast App Figma Design - resource.jsmastery.pro/ai-podcast-app
📘 Ultimate ChatGPT Handbook Guide - resource.jsmastery.pro/chatgpt-guide
🤖 Special Discord Forum - resource.jsmastery.pro/ai-podcast-discord
🌟 Become a top 1% Next.js 14 developer: jsmastery.pro/next14
🚀 Skyrocket your career in 4 months: jsmastery.pro/masterclass
📚 Materials/References:
GitHub Repository (give it a star ⭐): github.com/adrianhajdin/podcastr
README (assets & code): github.com/adrianhajdin/podcastr/blob/main/README.md
Time Stamps 👇
00:00:00 - Intro
00:06:05 - Setup
00:20:30 - File & Folder Structure
00:28:40 - Left Sidebar
00:43:33 - Homepage Layout
00:59:07 - Convex Setup
01:19:53 - Clerk Setup
01:45:18 - Create Podcast Page
02:10:03 - Generate Podcast
02:25:35 - Integrate Open AI
02:50:57 - Generate Thumbnail
03:35:00 - Displaying Podcasts
03:38:50 - Podcast Details Page
04:05:10 - Right Sidebar
04:38:40 - Podcast Player
04:59:50 - Discover Page
05:15:30 - Mobile Nav
05:23:24 - Profile Page
05:33:33 - Deployment
zhlédnutí: 79 076

Video

Next js 15 is Here… New Changes Again?!
zhlédnutí 101KPřed 14 dny
Next.js 15 and React 19 are just around the corner. Learn about everything they bring to the table. 📚 Next 15 Guide: resource.jsmastery.pro/nextjs-15-guide 🌟 Become a top 1% Next.js developer in only one course: www.jsmastery.pro/next14 📹 Vercel Ship: czcams.com/users/liveroRx0b_VXsU 👋 Social Media: discord.gg/javascript-mastery-programming-coding-community-710138849350647871 jsmast...
Build and Deploy an Amazing Developer Portfolio with Next JS and Framer Motion
zhlédnutí 160KPřed 21 dnem
Learn how to build and deploy a modern developer portfolio with animations using Next.js. Perfect for showcasing your web development skills! ⭐ Hostinger - hostinger.com/mastery10 Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans. 🌟 Sentry - bit.ly/4abT6PG 🎨 Portfolio Figma Design - resource.jsmastery.pro/minimal-portfolio 📘 Portfolio Best Practices Guide - resource.j...
Build and Deploy a Banking App with Finance Management Dashboard Using Next.js 14
zhlédnutí 304KPřed měsícem
Learn how to build and deploy a banking app with a finance management dashboard that connects multiple bank accounts, displays real-time transactions, and allows you to transfer money to other users on the platform using Next.js 14. ⭐ Appwrite: apwr.dev/JavaScriptMastery 🌟 Sentry: bit.ly/4abT6PG 🎨 Horizon Design Figma File: resource.jsmastery.pro/banking-app 🧭 Logical Flow Diagram Figjam File: ...
React Native Course for Beginners in 2024 | Build a Full Stack React Native App
zhlédnutí 338KPřed měsícem
Master the foundations of React Native and build your first full-stack mobile app. If you're having trouble with the expo initial configuration with Expo v51, run this command: npx create-expo-app@latest ./ template blank ⭐ Appwrite: apwr.dev/JavaScriptMastery 📙 React Native Guide: resource.jsmastery.pro/ultimate-react-native-guide 🎨 Aora Design Figma File: resource.jsmastery.pro/aora-design 🌟 ...
Build and Deploy a Full Stack Video Conferencing App with Next JS
zhlédnutí 169KPřed 2 měsíci
Learn to develop a professional enterprise-ready video conferencing app in hours using Next.js 14, Stream, and Tailwind CSS. ⭐ Stream: gstrm.io/4cwPaLp ⭐ Clerk: go.clerk.com/JZu31Lm 🎨 Zoom Clone Figma File: resource.jsmastery.pro/zoom-clone? 🌟 Become a top 1% Next.js 14 developer in only one course: jsmastery.pro/next14? 🚀 Skyrocket your career in 4 months: jsmastery.pro/masterclass? 📚Materials...
Beginner Three.js & GSAP Tutorial | Build and Deploy an Apple Website using React
zhlédnutí 199KPřed 2 měsíci
Recreate the Apple iPhone 15 Pro website, combining GSAP animations and Three.js 3D effects. From custom animations to animated 3D models, this tutorial covers it all. ⭐ Hostinger - hostinger.com/mastery10 Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans. 🌟 Sentry - bit.ly/4abT6PG 📙 Three.js & GSAP Guide - resource.jsmastery.pro/threejs-gsap-guide? 📘 ESLint & Prettie...
Build and Deploy a Fully Responsive Website with Modern UI/UX in React JS with Tailwind
zhlédnutí 269KPřed 3 měsíci
Learn to create modern websites with sleek parallax effects and bento box layouts. This course covers everything from stylish UI design to mobile-first principles while strengthening your React.js and Tailwind CSS skills. ⭐ Hostinger - hostinger.com/mastery10 Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans. 🌟 Become a top 1% Next.js 14 developer: jsmastery.pro/next1...
Build and Deploy a Full Stack AI SaaS Platform with Next js 14, TypeScript, Stripe
zhlédnutí 260KPřed 3 měsíci
Build a REAL Software-as-a-Service app with AI features and a payments and credits system that you might even turn into a side income or business using Next.js 14, Cloudinary AI, Clerk, and Stripe. ✨Get 3 Bonus Credits for your Free Cloudinary Account: cld.media/jsmastery 📙 Next Cloudinary Documentation: next.cloudinary.dev/ ⭐ Clerk: dub.sh/j4oY3Io 🌟 Become a top 1% Next.js 14 developer in only...
Build and Deploy a Figma Clone
zhlédnutí 225KPřed 4 měsíci
Build a Figma clone with real-world features like live collaboration through cursor chat, comments, reactions, and drawing designs (shapes, image upload) on the canvas using Next.js 14, Fabric.js, and Liveblocks. ⭐ Liveblocks: liveblocks.io 🌟 Become a top 1% Next.js 14 developer in only one course: jsmastery.pro/next14 📚 Materials/References: GitHub Repository (give it a star ⭐): github.com/adr...
Build and Deploy a React Admin Dashboard With Real time Data, Charts, Events, Kanban, CRM, and More
zhlédnutí 358KPřed 4 měsíci
Build an admin dashboard with full authentication, a homepage displaying charts and activities, a comprehensive table for companies with CRUD and search, and a Kanban board with real-time synchronization using Refine Framework. ⭐ Refine: github.com/refinedev/refine ‎💻 App Source Code and Readme (code snippets at the bottom): github.com/refinedev/refine/tree/master/examples/app-crm-minimal 🌟 Bec...
Learn Docker in 1 Hour | Full Docker Course for Beginners
zhlédnutí 273KPřed 5 měsíci
Master Docker in one course; learn about images and containers on Docker Hub, running multiple containers with Docker Compose, automating workflows with Docker Compose Watch, and much more. 🐳 ⭐ Docker: www.docker.com 🌟 Become a top 1% Next.js 14 developer in only one course: jsmastery.pro/next14 📙 Docker Guide: resource.jsmastery.pro/docker-guide 🎉 Giveaway: to participate, like the video, leav...
Build and Deploy a Full Stack Next 14 MERN Events App with Stripe, Typescript, Tailwind
zhlédnutí 225KPřed 5 měsíci
Build and Deploy a Full Stack Next 14 MERN Events App with Stripe, Typescript, Tailwind
Build and Deploy a Full Stack E-Commerce App with an Admin Dashboard & CMS in 2024 | Next 14, Stripe
zhlédnutí 400KPřed 6 měsíci
Build and Deploy a Full Stack E-Commerce App with an Admin Dashboard & CMS in 2024 | Next 14, Stripe
Build Modern Next 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion Animations
zhlédnutí 184KPřed 6 měsíci
Build Modern Next 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion Animations
Build and Deploy an Amazing 3D Developer Portfolio in React with Three.js
zhlédnutí 664KPřed 7 měsíci
Build and Deploy an Amazing 3D Developer Portfolio in React with Three.js
Build and Deploy a Full Stack Social Media App | React JS, Appwrite, Tailwind CSS, React Query
zhlédnutí 685KPřed 7 měsíci
Build and Deploy a Full Stack Social Media App | React JS, Appwrite, Tailwind CSS, React Query
Build and Deploy a Fully Responsive Modern UI/UX Website | React.js, Next.js 13, Tailwind CSS
zhlédnutí 258KPřed 7 měsíci
Build and Deploy a Fully Responsive Modern UI/UX Website | React.js, Next.js 13, Tailwind CSS
Web Scraping Full Course 2024 | Build and Deploy eCommerce Price Tracker
zhlédnutí 297KPřed 8 měsíci
Web Scraping Full Course 2024 | Build and Deploy eCommerce Price Tracker
How I Made My Website Load in 0.364 Seconds
zhlédnutí 213KPřed 8 měsíci
How I Made My Website Load in 0.364 Seconds
Next.js isn't React
zhlédnutí 195KPřed 8 měsíci
Next.js isn't React
Build and Deploy 3 Modern API Applications in 7 Hours - Full Course
zhlédnutí 182KPřed 9 měsíci
Build and Deploy 3 Modern API Applications in 7 Hours - Full Course
Tailwind CSS Full Course 2023 | Build and Deploy a Nike Website
zhlédnutí 541KPřed 9 měsíci
Tailwind CSS Full Course 2023 | Build and Deploy a Nike Website
Build and Deploy a Full Stack MERN Next.js 14 Threads App | React, Next JS, TypeScript, MongoDB
zhlédnutí 569KPřed 10 měsíci
Build and Deploy a Full Stack MERN Next.js 14 Threads App | React, Next JS, TypeScript, MongoDB
Transforming a Design into a Fully Responsive App in an Hour
zhlédnutí 125KPřed 10 měsíci
Transforming a Design into a Fully Responsive App in an Hour
10-Hour Masterclass: Develop 4 React Web Apps & Jumpstart Your Dev Career
zhlédnutí 289KPřed 11 měsíci
10-Hour Masterclass: Develop 4 React Web Apps & Jumpstart Your Dev Career
Build and Deploy a Full Stack Next.js 14 Application | React, Next JS 14, TypeScript, Tailwind CSS
zhlédnutí 359KPřed 11 měsíci
Build and Deploy a Full Stack Next.js 14 Application | React, Next JS 14, TypeScript, Tailwind CSS
Build and Deploy a Modern Next.js 14 Application | React, Next JS 14, TypeScript, Tailwind CSS
zhlédnutí 667KPřed rokem
Build and Deploy a Modern Next.js 14 Application | React, Next JS 14, TypeScript, Tailwind CSS
The Story of JavaScript Mastery
zhlédnutí 35KPřed rokem
The Story of JavaScript Mastery
Creating a Sushi-Themed Website: 2023 HTML & CSS Guide for Beginners
zhlédnutí 219KPřed rokem
Creating a Sushi-Themed Website: 2023 HTML & CSS Guide for Beginners

Komentáře

  • @nickmurdaugh9856
    @nickmurdaugh9856 Před 19 hodinami

    God. I would kill for a channel on Vue that was as good as this.

  • @CC_Double
    @CC_Double Před 19 hodinami

    it you get an error with <Card image={image} key={image._id} /> MAKE sure you use Type Assertion to ger rid of it like so: <Card image={image} key={image._id as string} /> Adrian thank you for these tutorials, they are awesome!

  • @anrzdev
    @anrzdev Před 20 hodinami

    I was watching some of your videos and the content is amazing

  • @evans3995
    @evans3995 Před 21 hodinou

    Champ of the champions. The real deal! I'd love it if you could in the future consider putting an app for something like a govt national identification system/census/registry

  • @dovh49
    @dovh49 Před 21 hodinou

    So, what was once simple. Is now highly complex. I don't understand the point of all this. Now people need to not only learn HTML/CSS/JavaScript. Now they need to learn all this stuff on top of it. What should just be some simple classes now you have to know that what is a class in the background could be a component, an attribute, or an actual class. Holy complexity increase batman!

  • @dovh49
    @dovh49 Před 22 hodinami

    This is amazing, it has all the APIs in the docs. What would be even more amazing if we could just use vanilla HTML.

  • @zondyinc-ig1gy
    @zondyinc-ig1gy Před 22 hodinami

    1:54:13

  • @jmariwyatt
    @jmariwyatt Před 23 hodinami

    I cant get the images to show anywhere in the application. im around the 50 minute mark. Doesnt throw any errors neither.

  • @zondyinc-ig1gy
    @zondyinc-ig1gy Před dnem

    1:29:07

  • @oshim2912
    @oshim2912 Před dnem

    1:17:14

  • @ikeodira4761
    @ikeodira4761 Před dnem

    Thank you Adrian, everything works, and I have learnt alot

  • @sharpesthawk
    @sharpesthawk Před dnem

    The database is not getting created when I signin. Every thing URI, password, Network Access, Database Access is perfect, but still share_prompts doesnt get created? Here's my code: import mongoose from 'mongoose'; let isConnected = false; // track connection status export const connectToDB = async () => { mongoose.set('strictQuery', true); if(isConnected) { console.log('MongoDB is already connected.'); return; } try { await mongoose.connect(process.env.MONGODB_URI, { dbName: 'share_prompt', useNewUrlParser: true, useUnifiedTopology: true, }) isConnected = true; console.log('MongoDB connected.'); } catch (error) { console.log(error); } }

  • @AmroAlmutasim
    @AmroAlmutasim Před dnem

    there is a proplem with constants file the console tell me that

  • @deathdefier45
    @deathdefier45 Před dnem

    Love you man this is the absolute best tutorial to get up and running with nextjs 14

  • @jeslela
    @jeslela Před dnem

    The favicon is no longer in the zipped folder

  • @gerryhoekema2561
    @gerryhoekema2561 Před dnem

    Sorry, stopped the video too soon. It works fine after going further with the instructions.!

  • @InsaneBadge
    @InsaneBadge Před dnem

    Ваши связки всегда выручают. Огромное спасибо!

  • @derekkahongomukenge1888

    You deserve respect. I'm newbie and I want to learn . I just suggested to give preliminary to enable new to adapt. Thanks ❤

  • @wendreslucas5415
    @wendreslucas5415 Před dnem

    First of all, thank you for such a rich and professional content. I didn't realize you mentioned it, but can you provide the backend repository?

  • @sycorax9994
    @sycorax9994 Před dnem

    Horizontal Scrollbar is not setting in horizontal position , it's vertical what to do now... tried everything anybody any explaination

  • @gerryhoekema2561
    @gerryhoekema2561 Před dnem

    Having a problem with react-docker. I keep getting: ➜ Local: localhost:5173/ ➜ Network: use --host to expose and when I go to localhost:5173, I get "This page isn't working". Any ideas?

  • @raiffb
    @raiffb Před dnem

    Anyone have the missing Login index.module.scss?

  • @varishtyagi1469
    @varishtyagi1469 Před dnem

    Sir please create minimum 2 projects on Web 3 means blockchain technology based please sir

  • @frankoppongkonadu6676

    When your google account name contain more than 2 words, in my case Frank Oppong Konadu, and you log in for the first time and you sign out and try to login again, it will not work because the matching for the username will fail and the reason is how we are replacing the spaces in the profile.name, so is advisable to use regular expression like profile.name.replace(/\s+/g, "").toLowerCase(),

  • @_BahrurRizky
    @_BahrurRizky Před dnem

    Does anyone know how to download the video file in the home tutorial section in appwrite?

  • @rimondebnath2342
    @rimondebnath2342 Před dnem

    going to add in my resume that i have learned docker

  • @rumaisadurrany8693

    Amazing ! I just want to know ... 1) can large number of participants join in this zoom clone? Or does it limits the participants count 2) Is the meeting time unlimited or will it expire in 40 min like zoom😢

  • @fahaddevnikar8713
    @fahaddevnikar8713 Před dnem

    Please Make SaaS web apps with Gemini API as once Open AI usage is finished then we cannot use it without paying

  • @mezsan309
    @mezsan309 Před dnem

    Hello we got a big issue if we do like you, the tech section, each techs have their own webgl context , but they are limited on chrome. so do you have any idea about how to do for resolve this issue?

  • @kalpitchandekar1736

    💌💌💌💌💌 from INDIA

  • @lonewolf9874
    @lonewolf9874 Před dnem

    I don't hate them i just like to serve my static files with express and i want more freedom so i end up making my own setup(framework) with vite or babel what ever

  • @aboladeayoade6858
    @aboladeayoade6858 Před dnem

    can't access payload from Nigeria smh

  • @aniketbhosale1858
    @aniketbhosale1858 Před dnem

    appwriteException: Creation of a session is prohibited when a session is active getting this error when i try to sign in

    • @anon9234
      @anon9234 Před dnem

      delete session on appwrite

  • @sirivellavenkatesh8124

    i need full crash course on threejs

  • @jeanjacquesstrydom

    I get a permission error when trying to run the command: "docker run -p 5173:5173 -v "$(pwd):/app" -v /app/node_modules react-docker. The error: "EACCES: permission denied, open '/app/vite.config.ts.timestamp-1718092553924-cc6ae8da1dda2.mjs'". It's really weird since I followed the tutorial exactly. I'm assuming the issue comes from a clash in permissions between my local system and the virtual system?

  • @TomKruz-cm8du
    @TomKruz-cm8du Před dnem

    i stopped here 11:29 , because there is no schema.js file in those folders, and i can't continue this video and this is so sad

  • @anousonetiphackdy5620

    czcams.com/video/ZBCUegTZF7M/video.html where is final tailwind config code . please

    • @yrew2004
      @yrew2004 Před dnem

      Check the description tho

  • @jingyaoyu2173
    @jingyaoyu2173 Před dnem

    why cannot find "package.json"

  • @JulianA-rm4ry
    @JulianA-rm4ry Před dnem

    but there's no infinite scroll...lol

  • @xinrainc
    @xinrainc Před dnem

    hmm I was having issues with the maath lib so I uninstalled it. I went to check it out at npm and it seemed sketch. is there another library I can substitue for maath? I got it figured out. change the maath import in the Hero file to < import { repeat } from "maath/misc" >

  • @nextgen9931
    @nextgen9931 Před dnem

    Hey JSM team, I was wondering if you could provide us some instructions on how to deploy the app? I've already finished the development of the app but I'm having a hard time trying to publish the application itself. Thank you!

  • @nithishn1603
    @nithishn1603 Před dnem

    The imagin studio api is not working,many have commented on the same thing and the key you provide doesn’t seem to be working so give a solution or add a pinned comment which could resolve this issue.

  • @ronakpatel7911
    @ronakpatel7911 Před dnem

    is anyone else having problems with communities saving to our db?? I can't seem to figure out whats wrong at all

  • @present_truth
    @present_truth Před dnem

    grafbase you used seems to have changed alot, :( Almost difficult following

  • @Tony_stalker
    @Tony_stalker Před dnem

    Hey community, I am going to start this courese.I would like to know that any point will i get stuck due to credits and prices or all tech stack used here is free

  • @zondyinc-ig1gy
    @zondyinc-ig1gy Před dnem

    1:02:03

  • @Mongfer13
    @Mongfer13 Před 2 dny

    you are very great teacher thank you !!!

  • @Aditya-fl7sv
    @Aditya-fl7sv Před 2 dny

    Is the project working fine ? Or are there any version compatibiltiy issues

  • @syntax2922
    @syntax2922 Před 2 dny

    Hey, I just started the video and wanted to ask, what if I don’t have a US or bug international bank account? Can I not make the project?