- 14
- 87 526
De Mawo
Приєднався 16 кві 2015
Hello , On this channel I share my knowledge about web development and programming. If you like my videos please give me a star on GitHub and follow me on twitter.
Google Calendar Clone with Reactjs | Nextjs
In this tutorial, I walk you through how I built a fully functional Google Calendar clone using Next.js, React, Day.js, Neon Postgres, and Drizzle ORM. You'll learn how to work with dates efficiently, create and save events, and manage your data using a modern tech stack. Whether you're a beginner or an advanced developer, this video will provide valuable insights and practical coding tips to enhance your development skills!
👩🏾💻 Source code: github.com/de-mawo/google-calendar-clone
If you'd like to support my work, here are a few ways:
1. 💡 Purchase my Next.js Multivendor Template at saasstart.app/products/dps-resto-multivendor-template . It’s perfect for building scalable e-commerce applications quickly!
2. 📺 Subscribe to my channel to stay updated with more awesome tutorials and content.
3. ☕ Buy me a coffee at buymeacoffee.com/mawondepf to show your appreciation and keep me energized for future tutorials!
Thank you for watching, and don't forget to like, comment, and share the video if you found it helpful!
TimeStamps
00:00 Project Demo
08:45 Header Scaffolding
40:11 Main View Component
01:28:57 Zustand Global State Set Up
01:44:31 Week View
02:35:20 Day View
02:48:20 Get Current , Previous & Next Week Month/Week/Days functions
02:59:59 Events Create Dialog
03:27:28 Events Summary Dialog
03:42:27 Hide Side Bar & Create Button
03:50:23 Small Sidebar Calendar
04:17:46 Database Setup
04:58:12 Fetch and Display events from Database
👩🏾💻 Source code: github.com/de-mawo/google-calendar-clone
If you'd like to support my work, here are a few ways:
1. 💡 Purchase my Next.js Multivendor Template at saasstart.app/products/dps-resto-multivendor-template . It’s perfect for building scalable e-commerce applications quickly!
2. 📺 Subscribe to my channel to stay updated with more awesome tutorials and content.
3. ☕ Buy me a coffee at buymeacoffee.com/mawondepf to show your appreciation and keep me energized for future tutorials!
Thank you for watching, and don't forget to like, comment, and share the video if you found it helpful!
TimeStamps
00:00 Project Demo
08:45 Header Scaffolding
40:11 Main View Component
01:28:57 Zustand Global State Set Up
01:44:31 Week View
02:35:20 Day View
02:48:20 Get Current , Previous & Next Week Month/Week/Days functions
02:59:59 Events Create Dialog
03:27:28 Events Summary Dialog
03:42:27 Hide Side Bar & Create Button
03:50:23 Small Sidebar Calendar
04:17:46 Database Setup
04:58:12 Fetch and Display events from Database
Переглядів: 4 534
Відео
Build a Production-Grade Rich Text Editor with Next.js, Tiptap, TailwindCSS, Neon DB, & Drizzle
Переглядів 2,4 тис.2 місяці тому
In this tutorial, we'll guide you through the process of building a sophisticated text editor using the popular Tiptap library, styled with Tailwind CSS, and backed by a robust Neon Database and Drizzle ORM. Key takeaways: - 📕 Learn how to quickly integrate Tiptap into your Next.js project. - 🔍 Discover how to tailor the editor's appearance and functionality using Tailwind CSS - 🌍 Explore how t...
Tame the Terminal: Batch Rename Files with Shell Script (TS to JS) in 5 seconds
Переглядів 563 місяці тому
Struggling to rename a bunch of TypeScript files (.ts) to JavaScript (.js)? Ditch the manual clicking! This video shows you how to write a simple shell script to automate the process. #coding #nextjs #shellscripting #bashscripting #typescript #javascript No more repetitive tasks! Learn how to: Write a script to quickly rename multiple files. Use basic shell commands for powerful automation. Fee...
Driving Lessons Booking Multivendor Full Stack Web App with Nextjs, React
Переглядів 4,9 тис.4 місяці тому
This App is multi-vendor Driving lessons booking web-app that allows general Users to either book driving lessons from available service providers. Source Code: github.com/de-mawo/motomoto-yt If you find this project and tutorial please subscribe to my channel, give me a star on GitHub or simply buy me a coffee Features: - 📆Custom Calendar to allow users to select a date and view available time...
Full Stack Learning Management System for Bootcamp Startups/Schools: Beginner Project
Переглядів 7967 місяців тому
This is an explainer video with complementary code for a Learning Management System. I have included the code for you to try out this App. Make use of the README.md file to install and configure the App. If you find this app useful you can Buy me a Coffee : www.buymeacoffee.com/mawondepf Join my Discord Server if you need assistance: discord.gg/XwWbp9WwjB Here is the Source Code: github.com/de-...
Leave Management App : Full Stack | Beginners
Переглядів 21 тис.10 місяців тому
Lets build a Leave management app to manage employee leaves/vacations. As a beginner take your time to type out the code & break things around, the whole idea is to learn not just copy & paste. 👩💻 Source code: github.com/de-mawo/spana-yt 0:00 Project Demo 11:02 Set up 25:47 Database Schema 33:54 Database Migrations & Prisma Client 38:27 Authentication: Next-Auth 57:19 Start Building Dashboard ...
Food Delivery App : Deployment
Переглядів 567Рік тому
This if the deployment tutorial for ua-cam.com/video/PaBvl3bniOI/v-deo.html
Full Stack Food Ordering App Part 2: Beginners | Nextjs ,Graphql, Supabase, Tailwind , TypeScript
Переглядів 6 тис.Рік тому
This is the second part of the Full Stack Food Ordering App v1.0.0. Much of the focus is on the backend where we integrate our Graphql api and the front end. Watch at your own pace, Drop a question in the comments section and lets help each other improve this open source project. ⭐Demo project: dpsrestov2.vercel.app/ ⭐Source code: github.com/de-mawo/dpsresto-yt 🚢Deployment: ua-cam.com/video/H0C...
Full Stack Food Ordering App UI Design for Beginners | Nextjs ,Graphql, Urql, Supabase, Pothos,
Переглядів 9 тис.Рік тому
This tutorial is the first part of a Complete Food Ordering App. I highly recommend beginners to try this out and do this break things and fix on our own The prerequisites for this tutorial are: You need basic knowledge of Reactjs, JavaScript, CSS and how databases work. ⭐Demo project: dpsrestov2.vercel.app/ ⭐Source code: github.com/de-mawo/dpsresto-yt ⭐ Starter code: github.com/de-mawo/dpsrest...
Error: EPERM: operation not permitted, rename [solved], Windows
Переглядів 32 тис.Рік тому
Error: EPERM: operation not permitted, rename [Solved] on VSCode
React Maps, User location & address autocompletion in React
Переглядів 819Рік тому
In this tutorial, you'll discover a simple yet powerful solution to enhance user experience by enabling address autocompletion in your React applications. Join us as we explore how to effortlessly retrieve user location and implement address autocompletion with React. In this tutorial, you will learn: ✔️ How to leverage Mapbox to integrate location-based services in your React app ✔️ Step-by-st...
Free React Nextjs Template UI: DPS Resto Restaurant
Переглядів 4282 роки тому
DPS Resto is a simple react nextjs template for a restaurant. It is designed with only the necessary components and pages that are needed for the real world scenarios. Get Template here: demawo.gumroad.com/l/dpsrestoapp
Logout of all Tabs : Multi-tab logout React 2022
Переглядів 3,8 тис.2 роки тому
How to Logout of Multiple Tabs | React Web App Source code : 👉🏿 github.com/de-mawo/multitab-logout-react Follow me on twitter: 👉🏿 de_mawo Follow my blog posts: 👉🏿 dev.to/demawo You may also like to follow a post here : dev.to/demawo/how-to-logout-of-multiple-tabs-react-web-app-2egf
React Admin Dashboard (Main Frame) for Beginners | Reactv18 | React Routerv6
Переглядів 1,4 тис.2 роки тому
Hello, In this Video I am sharing how I implemented a react admin dashboard *main frame layout* that can be used in a real world situation. I have created a beginner friendly fake authentication system to make the logic more clearer and easy to follow. This is a speed code video to make you quickly see the logic behind. If you find this tutorial useful , please kindly subscribe and like Source ...
Thank you sir.. Its working
Welcome 👍
lets go
OK , that's it.The post you invited me to make has now disappeared THREE TIMES. Do you actually want to help?
can i have your email sir. I wanna talk business.
Dm me on twitter/X @de_mawo
Increase the font of the editor when recording next time. It's a bit hard to see actually.
Thank you for the feedback, will certainly do so
Any idea how to hide the new 'Create' button that has appeared on Calendar? I use a Windows 7 desktop, Firefox and a Month view, and it obscures my first Monday appointment. It appeared just this weekend sometime. Thanks
Hi may you please share a screen shot link, lets debug it
@@demawocodes Thanks! I don't have an online image facility but I will find out how to do that. AFAIA there is no way of uploading an image to youtube. 😒
No Drag and Drop ? it would have been perfect.
voice only in left channel
Thanks , will fix that i next videos
nice project
thanks
I don't have anything called, npm, npm-cache etc on that folder.
Create some unique projects like leave one which you made clones can be found anywhere though I'll still watch this ...but unique content is what everyone loves ... Anyway good video ! Hope to see some good unique projects !! And Mern Site if possible :)
nah clones are better for views
@@HappyDancerInPink yep Ig
Great work!!!🙂 If my country is not in the stripe options Can I still use Stripe's payment system? Thank you very much 🙏
Its best to use local payment gateways in such a case ,
great
Great video but any "Production-Grade" text editor must have an option to upload images, right?
yes but its paid in all rich text editors
lol work it out then
Next video influencer hiring platform
i qont deny..your content is top notch......i really wanna build this with you and am gona give you a like and a subscribe
there is no option for the admin to add a new instructor or it is only by sign-up?
Its by Sign up only for now, Then change a user role and and an Instructor profile
good!!
NICE
Thanks for the tutorial
its better u dont loggedIn user when he/she already loggedin
facing following error app-index.js:34 Warning: Extra attributes from the server: class,style at html at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11) at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11) at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11) at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9) at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:295:11) at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:159:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:100:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:130:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:436:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:128:11) at RSCComponent at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:144:11)
Next video E-Commerce Web site
thanks you a lot you save my life and day )
Thank you , it worked
Thank you so much fo this great video. quick question what about the notification and the delete the events
I am working on version 2 with a standalone Server , all those features will be there
Did you code the UI files yourself?
Yes, I guess its easier using shadcn ui + tailwindcss
It's very useful. Thanks a lot
Kuch bhi samajh nhi araha
can you make a video to deploy in vercel with all environmental values , I deployed but CREATE AND MODIFY LEAVE OR ANY OPERATION NOT WORKING
Did you use figma to come up with the design idea; i really struggle with the art of designing and planning my projects before implementing them
I usually go to Dribble to get design inspiration , then with the use of UI helpers such as shadcn ui / headless ui, i get to achieve the design side of things
yhnx for the work but you dont munchened uploding photos
Hi , I didn't get your message well . How can I assist
You literally just saved me, I’ve been trying to fix this issue for the best 2 hours
What is leave management?
In simple terms we can say its a way to manage the time when employee take time off from work. Usually that time is used to calculate wages & salaries, monitor employee work absence/presence and also regulate employee time off work .
great work , appreciate a lot , but for me there is no explanation about googel cloud api credentials creations , I couldnt login
i need mentorship from you sir
Great content i am learning a lot from you
Monna, this is great, am trying to learn webdev to change careers, currently struggling but this helps.
Nice bruh
I came across your video while looking for the RBAC solution for my next js project . Can you help with the problem.?How it should be done.and what if there are no overlapping components between different users?
Greetings , please kindly share the user roles you have and what are you trying to achieve in general
@@demawocodes Currently I have 4 user role. Admin,Manager,Employee, and Client. The client can only view his project. But our team i.e. Admin, Manager, Employees can do their tasks like can view/modify/add projects, status, add new etc. I have defined separate routes for all user like /clients have all the things available to the client but /admin routes have all the things related to admin. and same for employees and managers. A client cant access /manager or /admin etc. But the issue is do i need to use NextAuth in this use case or I can do this without. If i need to use NextAuth, or in general, do i need to check role in every page? like if a client try to access /admin to i need to check that on every page? how to to this?
be regular
plz make it using online postgresql instance and raw sql query without using prisma
Great work. I just subscribed GO FORWARD SIR..
Great content, what stacks are you using for this project? Intro looks great
Can you provide a lesson on how to create a complete online store?
Check this one ua-cam.com/video/PaBvl3bniOI/v-deo.html
good project. It is uncommon project. Can u add some extra features in this project?
Which features would you like to see?
@@demawocodes thanks to reply us. You can add print option for the present leave record page.also add the employee information with image when he has joined and when an employee leave the company.if possible when an employee enters the office .
Error in this code, can't run
Where exactly? Can you send the error you are facing ?
nice explanation
I just subscribed as your contents are great so please add more features like employee payroll system