- 10
- 265 205
Code With Gionatha
Italy
Приєднався 29 сер 2012
Hey 👋 I'm Gionatha, in this channel we're going to discover and build many great apps together.
Build a Q&A and Polls platform with Nextjs, Supabase, Kinde, Prisma | Part 2/2
🌱 Source Code: github.com/CodeWithGionatha-Labs/dory-clone
💬 Discord: discord.gg/mN8WD6M4dR
Part 1: ua-cam.com/video/k8N9slcdHR8/v-deo.html
✨ Key features:
🔒 Authentication (w/ Kinde)
👥 User Roles
📈 Database (w/ Supabase)
🌱 Database Seeding
🛠️ ORM (w/ Prisma)
🎨 Modern & Responsive Design (w/ ShadCN)
🔄 Server Actions (w/ next-safe-action)
📝 Forms (w/ react-hook-form)
✔️ Data Validation (w/ zod)
⚡ Realtime Updates (w/ Supabase Realtime)
🔔 Notification System
👍 Upvoting System
🚀 Optimistic Updates
🔃 Infinite Scrolling
📚 Resources
Nextjs installation: nextjs.org/docs/getting-started/installation
Shadcn installation: ui.shadcn.com/docs/installation/next
Prisma setup: shorturl.at/aDUf8
Kinde setup: shorturl.at/iYdQf
Supabase setup: supabase.com/partners/integrations/prisma
Database seeding guide: www.prisma.io/docs/orm/prisma-migrate/workflows/seeding
Realtime updates guide: supabase.com/docs/guides/realtime/postgres-changes
This comprehensive 17-hour course will guide you through building a full-stack Q&A and Polls platform using Next.js, Shadcn, Supabase, Kinde Auth, and Prisma. In the second part of the course, we'll cover all the remaining topics such as real-time polls, infinite scrolling, and notifications.
Chapters
00:00:00 Preview
00:00:26 Chapter 18: Polls page layout
00:16:27 Chapter 19: Polls UI
01:34:17 Chapter 20: Poll Voting
02:08:57 Chapter 21: Poll real-time updates
02:32:00 Chapter 22: Fixing an important bug
02:34:42 Chapter 23: Create Poll
03:12:56 Chapter 24: Polls actions (end, delete)
03:29:20 Chapter 25: Event bookmarking
03:39:22 Chapter 26: Event creation
04:01:27 Chapter 27: Event update and delete
04:22:00 Chapter 28: Infinite scrolling
05:11:26 Chapter 29: Notifications
💬 Discord: discord.gg/mN8WD6M4dR
Part 1: ua-cam.com/video/k8N9slcdHR8/v-deo.html
✨ Key features:
🔒 Authentication (w/ Kinde)
👥 User Roles
📈 Database (w/ Supabase)
🌱 Database Seeding
🛠️ ORM (w/ Prisma)
🎨 Modern & Responsive Design (w/ ShadCN)
🔄 Server Actions (w/ next-safe-action)
📝 Forms (w/ react-hook-form)
✔️ Data Validation (w/ zod)
⚡ Realtime Updates (w/ Supabase Realtime)
🔔 Notification System
👍 Upvoting System
🚀 Optimistic Updates
🔃 Infinite Scrolling
📚 Resources
Nextjs installation: nextjs.org/docs/getting-started/installation
Shadcn installation: ui.shadcn.com/docs/installation/next
Prisma setup: shorturl.at/aDUf8
Kinde setup: shorturl.at/iYdQf
Supabase setup: supabase.com/partners/integrations/prisma
Database seeding guide: www.prisma.io/docs/orm/prisma-migrate/workflows/seeding
Realtime updates guide: supabase.com/docs/guides/realtime/postgres-changes
This comprehensive 17-hour course will guide you through building a full-stack Q&A and Polls platform using Next.js, Shadcn, Supabase, Kinde Auth, and Prisma. In the second part of the course, we'll cover all the remaining topics such as real-time polls, infinite scrolling, and notifications.
Chapters
00:00:00 Preview
00:00:26 Chapter 18: Polls page layout
00:16:27 Chapter 19: Polls UI
01:34:17 Chapter 20: Poll Voting
02:08:57 Chapter 21: Poll real-time updates
02:32:00 Chapter 22: Fixing an important bug
02:34:42 Chapter 23: Create Poll
03:12:56 Chapter 24: Polls actions (end, delete)
03:29:20 Chapter 25: Event bookmarking
03:39:22 Chapter 26: Event creation
04:01:27 Chapter 27: Event update and delete
04:22:00 Chapter 28: Infinite scrolling
05:11:26 Chapter 29: Notifications
Переглядів: 1 246
Відео
Build a Q&A and Polls platform with Nextjs, Supabase, Kinde, Prisma | Part 1/2
Переглядів 8 тис.Місяць тому
🌱 Source Code: github.com/CodeWithGionatha-Labs/dory-clone 💬 Discord: discord.gg/mN8WD6M4dR ✨ Key features: 🔒 Authentication (w/ Kinde) 👥 User Roles 📈 Database (w/ Supabase) 🌱 Database Seeding 🛠️ ORM (w/ Prisma) 🎨 Modern & Responsive Design (w/ ShadCN) 🔄 Server Actions (w/ next-safe-action) 📝 Forms (w/ react-hook-form) ✔️ Data Validation (w/ zod) ⚡ Realtime Updates (w/ Supabase Realtime) 🔔 Noti...
Build a Music Player app with React Native, Expo, Typescript and Zustand
Переглядів 75 тис.5 місяців тому
🌱 Source Code: github.com/CodeWithGionatha-Labs/music-player 💬 Discord: discord.gg/mN8WD6M4dR 📚 Resources Expo development build: docs.expo.dev/develop/development-builds/create-a-build/ Expo Router: docs.expo.dev/router/installation/#prerequisites React Native Track Player: rntp.dev/docs/basics/installation In this project, we are going to build a native music player application (inspired by A...
How to create a scalable codebase architecture with Nx, Typescript, Prettier and Eslint
Переглядів 3,4 тис.8 місяців тому
🌱 Source Code: github.com/CodeWithGionatha-Labs/nx-playground 💬 Discord: discord.gg/mN8WD6M4dR 📚 Resources Nx: nx.dev/ Prettier: prettier.io/ Eslint: eslint.org/ In this video, we will learn how to create a modern scalable codebase architecture by using Nx, Typescript, Prettier, and Eslint (monorepo pattern). Timestamps 00:00:00 Intro 00:01:56 Creating an Nx workspace 00:03:32 Exploring the wor...
Build a Markdown Notes app with Electron, React, Typescript, Tailwind and Jotai
Переглядів 93 тис.9 місяців тому
🌱 Source Code: github.com/CodeWithGionatha-Labs/NoteMark 💬 Discord: discord.gg/mN8WD6M4dR 📚 Resources electron-vite: electron-vite.org/ In this video, we are going to build a Markdown Notes desktop application using Electron, React, Typescript, Tailwind, and Jotai. Timestamps 00:00:00 Intro 00:02:16 Creating an Electron Project 00:09:38 Codebase configuration (Prettier, eslint, tsconfig) 00:19:...
Build a UI Library with React, Typescript, TailwindCSS and Storybook
Переглядів 34 тис.9 місяців тому
🌱 Source Code: github.com/CodeWithGionatha-Labs/simple-ui 💬 Discord: discord.gg/mN8WD6M4dR In this video, we are going to build a basic React UI Library by using React, TailwindCSS, Typescript, and Storybook. Timestamps 00:00 Intro 01:07 Project setup 06:17 Tailwind setup 08:18 Storybook setup 11:34 Creating our first story 15:39 Explaining how styling works 18:23 The cn function 19:37 Adding B...
Making Minecraft in ThreeJS
Переглядів 5 тис.Рік тому
🕹️ Demo: three-craft.vercel.app/ (recommended Chrome) 🌱 Source Code: github.com/gionny96/ThreeCraft 📚 Resources three.js: threejs.org/ I'm going to share with you my journey recreating Minecraft on the web by using Typescript and three.js. CREDITS Voxel Geometry Article: threejs.org/manual/#en/voxel-geometry Minecraft Terrain Generation in a Nutshell: ua-cam.com/video/CSa5O6knuwI/v-deo.html Thi...
Build a Twitch Chat Clone with React, Typescript, TailwindCSS and Socket.io
Переглядів 2,8 тис.2 роки тому
🌱 Source Code: github.com/CodeWithGionatha-Labs/twitch-chat-clone 💬 Discord: discord.gg/mN8WD6M4dR 📚 Resources Socket.io: socket.io/docs/v4/ Vite: vitejs.dev/guide/ Typescript Hooks: github.com/juliencrn/usehooks-ts In this video, we are going to build a real-time Twitch Chat clone by using React, Tailwind, Typescript, and Socket.io. Timestamps 00:00 Intro 01:09 Project Setup 03:05 Base Style 0...
Build a draggable Kanban Board with React, Chakra UI and LocalStorage
Переглядів 35 тис.2 роки тому
👀 Demo: dnd-kanban-board.vercel.app/ 🌱 Source Code: github.com/CodeWithGionatha-Labs/dnd-kanban-board 💬 Discord: discord.gg/mN8WD6M4dR 📚 Resources Vite: vitejs.dev/guide/ ChakraUI: chakra-ui.com/getting-started React-DnD: react-dnd.github.io/react-dnd/about Autoresizable Textarea: www.npmjs.com/package/react-textarea-autosize Typescript Hooks: github.com/juliencrn/usehooks-ts In this video, we ...
Build a Typing Speed App with React, Typescript, TailwindCSS & Framer Motion
Переглядів 9 тис.2 роки тому
👀 Demo: speed-typing-ten.vercel.app/ 🌱 Source Code: github.com/CodeWithGionatha-Labs/speed-typing 💬 Discord: discord.gg/mN8WD6M4dR 📚 Resources TailwindCSS: tailwindcss.com/docs/guides/create-react-app Framer Motion: www.npmjs.com/package/framer-motion Classnames: www.npmjs.com/package/classnames React icons: www.npmjs.com/package/react-icons In this video, we are going to build a Typing Speed a...
"Hello! I would like to suggest a very useful project for your channel: a complete school management software. It would allow for the registration of students and teachers, the inclusion of grades, tracking of school attendance, and also have a robust financial area. In this area, it would be possible to issue invoices for guardians, track payments, and generate the teachers' payroll. It would be amazing to see the development of a system with all these features, teaching step by step how to create a practical and efficient solution for schools!"
09:57 you're configuring something into your main.ts file under storybook folder what is that and where did you get from that, would be so nice if you helped me out
eslint is depreciated. nice. im cooked.
Before I commit to watching this, can you do everything he does and follow along using Metro instead? I have a raging hate for expo. I mean YES that's the point of EXPO it PROVIDES THIS THAT YADDA YADDA what if I want it the harder way, what if I want to setup my own router, or learn how to use a bare filesystem, abstract it away etc.? It's like ok don't reinvent the wheel, but this isn't C, this is abstraction layers upon abstraction layers of many technologies, for learning purposes don't use expo Jesus is this so hard.
Just wondering about the use of caching query functions? You are wrapping the functions with cache? why do you need do this when Nextjs is strong at caching?
Great question! By default, Next.js only caches fetch functions automatically. However, since we're using the Prisma Client SDK instead of fetch functions, we need to handle caching manually. Otherwise, we risk executing the same queries multiple times when rendering different components.
@@gionatha the amount of knowledge that I have learnt from this video is phenomenal. Dude you are awesome to release such videos. Please keep them coming. I haven't even done half of the video and I am already an expert lol. When is the next video coming ?
@@bilal-khan I’ll try my best to keep releasing new videos at a reasonable pace 😃 I hope to release a new video before the end of the year.
@@gionatha looking forward
Thanks!
Wow! Thanks so much 🙏
Im working on a PC and using Expo Go on an iphone. I followed your tutorial all the way to where you are installing xcode with the simulator. I'm a little confused, are you saying this project cannot be done on Windows? I didn't see that anywhere before I started working on it so wanted to check. When i run npx expo start it generates a QR code which i was successfully able to open on the iPhone with Expo Go, but I can't use this setup? Thanks in advance.
That's an incredible video. I've learnt a lot from it. Thank you ❤
I'm glad :)
Notice to people trying to follow this for android some of the things he uses here are ios specific for instance some of the options in the native stack navigator options so you should try finding ways around this and follow up with the rest of the tutorial
exactly, are you done implementing this using android? if yes, share source code.
Great Job @gionatha The next app books app ?
great tutoral, very helpfull for music app I am developing
Hey can you do a video about creating a design system with RN
Hey man cool video - how did you get started is UI engineering? I am trying to learn the path.
Hi, thanks for you tutorial, I am watching the `setUpTrackPLayer` part, and I see the function `useSetupTrackPlayer` using variable `isInitialized` which is redundant because I dont see it is used to check in elsewhere . Would you help share more on this one ``` export function useSetupTrackPlayer({ onLoad }: { onLoad?: () => void }) { const isInitialized = useRef(false) ..... ```
Nice work thanks , please make a video big production of clone Newegg fullstack with admin panel by nextjs but not multivendor just exactly like Newegg, thanks 🙏
Мне нравится 😁
Missing tests
Beautiful project, except kinde is not open source
There is no answer feature. but QnA? I don't understand about this app's idea. Sorry
Wow great, thanks for the complete tutorial
Good Job Johnatan
Can anyone tell me which video editor is used to make this intro?
could you provide the deployment url please
I don't understand abou this QnA.. Where are the answers of the questions?
I really like your demo thank you, I have a question. I can see that you use usePlaylist for example to get data to the flatlist, in the case where we fetch data from server, is it possible to do the same concept? like make request to the server inside the usePlaylist, is that going to work ?
Good Job! I would like a course that is a Chat app, like Telegram, WhatsApp, Discord or something like that, and it could be a UA-cam clone or a Notion clone. Greetings and good work!
great video
great make more on next js with cicd docker deployment
can after this build can you plz make one Real time project in React native
The amount of configurations for mobile development scares me
Can't able to run on Android
Can I download an app already made? I just need a better music app, not looking to make one.
Cool
Great video man, but I think there is an error that with expo router I also facing that is try to navigate from notification controller to the app, just give an unmatched route. Is there a way to achieve this?
3 hr video and you're incapable of manually setting up the boilerplate? That's wild
should we use tailwind ? doesn't it overwrite
hey sir can you help me. I need to create a folder /usr/local/bin if is not exist but if exist next step is copy the cli tools to that folder. because my app need to comunicate with that cli tool. but to perform that operation on mac aplication need a sudo access. can i make the process when user first time install my app. when aplication installer run we need to ask the permission for move the file into /usr/local/bin. how can i do that.. thank you sir. i hope you response this comment and i hope you understand my english is not good.
Amazing tutorial. i loved every part of it. You are amazing teacher. i built the android version, now trying to read the react-native-trackplayer documentation to see if i can load the tracks from local storage, instead of using the json library data prop. Thank you once again
Hhai bro, can you please share the source code
i don't use ios can i follow this tutorial for android??, or do i need to do something by myself??
@@nehalpradhan2229 its not entirely useful for android, since many expo features work only on ios and not on android. i had build my custom header, tab bar etc
Thanks for the tutorial, you're a champion!
Tailwind license restricts using the library for ui-libs
after page refresh disappears favorites song help me please sir
You might be keeping the state local which might be causing the flushing of state, try making favorite global so that you can see after refresh
@@humbler144 can you help me
@@humbler144 can you help me please
I'm getting this error when trying to build. Any idea? error during build: [vite:dts] Internal Error: Unable to determine module for: C:/<project-folder>/dist/index.d.ts You have encountered a software defect. Please consider reporting the issue to the mnpm\@micraintainers of this application. lib\analy at ExportAnalyzer._getModuleSymbolFromSourceFile (C:\PROD\vee-ui ode_modules\.pnpm\@microsoft+api-extractor@7.47.4_@types+node@22.1.0 ode_modules\@microsoft\api-em\@microsxtractor\lib\analyzer\ExportAnalyzer.js:169:15) b\analyze at ExportAnalyzer.fetchAstModuleFromSourceFile (C:\PROD\vee-ui ode_modules\.pnpm\@microsoft+api-extractor@7.47.4_@types+node@22.1.0 ode_modules\@microsoft\api-ext.pnpm\@miractor\lib\analyzer\ExportAnalyzer.js:70:35) Any idea?
Nice tutorial bro,,,,,,,,,,,,, just 1 suggestion - You could have used native-wind Ui library for styling
its better he didnt so he lets people choose whatever library they want to use
Is it only for IOS alone
As a beginner it is hard to understand but thank you
I want to be you when I grow up.
Hey, what is your vscode theme?