- 133
- 54 263 366
JavaScript Mastery
Croatia
Registrace 25. 12. 2018
Master modern web development with a project-based approach
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
⭐ 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
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
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
God. I would kill for a channel on Vue that was as good as this.
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!
I was watching some of your videos and the content is amazing
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
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!
This is amazing, it has all the APIs in the docs. What would be even more amazing if we could just use vanilla HTML.
1:54:13
I cant get the images to show anywhere in the application. im around the 50 minute mark. Doesnt throw any errors neither.
1:29:07
1:17:14
Thank you Adrian, everything works, and I have learnt alot
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); } }
there is a proplem with constants file the console tell me that
Love you man this is the absolute best tutorial to get up and running with nextjs 14
The favicon is no longer in the zipped folder
Sorry, stopped the video too soon. It works fine after going further with the instructions.!
Ваши связки всегда выручают. Огромное спасибо!
You deserve respect. I'm newbie and I want to learn . I just suggested to give preliminary to enable new to adapt. Thanks ❤
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?
Horizontal Scrollbar is not setting in horizontal position , it's vertical what to do now... tried everything anybody any explaination
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?
Anyone have the missing Login index.module.scss?
Sir please create minimum 2 projects on Web 3 means blockchain technology based please sir
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(),
Does anyone know how to download the video file in the home tutorial section in appwrite?
going to add in my resume that i have learned docker
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😢
Please Make SaaS web apps with Gemini API as once Open AI usage is finished then we cannot use it without paying
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?
💌💌💌💌💌 from INDIA
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
can't access payload from Nigeria smh
appwriteException: Creation of a session is prohibited when a session is active getting this error when i try to sign in
delete session on appwrite
i need full crash course on threejs
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?
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
czcams.com/video/ZBCUegTZF7M/video.html where is final tailwind config code . please
Check the description tho
why cannot find "package.json"
this happend at very first step
but there's no infinite scroll...lol
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" >
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!
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.
is anyone else having problems with communities saving to our db?? I can't seem to figure out whats wrong at all
grafbase you used seems to have changed alot, :( Almost difficult following
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
1:02:03
you are very great teacher thank you !!!
Is the project working fine ? Or are there any version compatibiltiy issues
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?