Fullstack Drag & Drop Notes App with React
Vložit
- čas přidán 11. 09. 2024
- Learn how to create a sticky notes app using JavaScript and Appwrite. Appwrite is an open-source, self-hosted Backend as a Service (BaaS) platform that makes building backends quick and easy. Appwrite provided a grant to make this course possible.
✏️ Course developed by Dennis Ivy. Dennis on Twitter: / dennisivy11
🔗 Written tutorial guide: apwr.dev/guide
🔗 Create an account with Appwrite: apwr.dev/FreeC...
🏗️ Appwrite provided a grant to make this course possible.
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: www.freecodeca...
Read hundreds of articles on programming: freecodecamp.o...
Thanks for having me on the channel team, it's an honor ☺
great tutorial, even cooler project.
Hi Dennis, nice vid, nice to see you here
@@greenthumb7405 🙏
@@knowledgedose1956 😊
That arrow pointer movement looks so smooth. How do you do that?
25:37 Draggable Cards
41:46 Setting up the Backend
50:31 Making Requests
1:00:10 Making Updates
1:11:40 Delete Button
1:18:26 Context API
1:26:42 Adding Notes
1:37:46 Changing Colors
Dennis Ivy's apps are always recognizable by their design.
I hope thats a good thing 😳
@@DennisIvy yes it is
@@koladechris ☺
Wow, I'm gonna level it up by adding on-boarding, auth and context api. Fun week
My first django teacher ❤🎉
😁
Nice one Dennis! Waiting for the next one 🔥
Dennis is a GOAT 🐐….RESPECT
😄
🚀 A Full-Stack project with Appwrite and React in just 2 hours? This is 🔥 Hilarious! 😂👏 Love U ❤
💪
Great to learn from Django king Dennis
Introduction and Overview - 00:00:00
Demo of Final Product - 00:00:30
Getting Started and Resources - 00:01:27
Setting Up the Project and Basic Configuration - 00:04:13
Creating the Notes Page and Initial Components - 00:06:08
Styling the Application and Adding Basic Functionality - 00:08:11
Handling Data and Setting Up Fake Data - 00:09:06
Creating Note Components and Rendering Notes - 00:10:31
Adding Interactivity and Dynamic Note Features - 00:13:05
Implementing Note Auto-Grow and Drag Functionality - 00:16:41
Setting Up a Backend with Appwrite - 00:18:43
Connecting to Appwrite and Managing Data - 00:47:20
Implementing Data Updates and Auto-Save Features - 01:00:05
Handling Note Deletion and State Management - 01:16:17
Using Context API for State Management - 01:18:34
Adding New Notes and Managing Note Creation - 01:27:03
Implementing Note Color Change Feature - 01:35:51
Conclusion and Final Thoughts - 01:49:05
nice work Dennis and FCC!
😁
all hail king Dennis 👑👑
😉
Thanks a lot for this 🎉🎉
Master King Dennis my Favourite !!!
😉
If possible -
I'm interested to see one video on AI/ML roadmap for beginners.
For very beginners,
How to start over AI, what are the job opportunities and how to crack interviews.
Thank you. God bless❤
AI/ML roadmap is huge. It takes 2 years at bes t
@@nocopyrightgameplaystockvi231 Hi, thank you.
I'm struggling to learn coding. As a beginner, unable to understand coding (Java). It would be appreciated if I get any help/suggestions from anyone.💐
@@SrInd-jy9ev who starts beginner with Java 🌚🌚🌚🌚🌚 a simpler language is C#.
I started with ASM and C (I am not joking). It wasn't easy 😅 @@nocopyrightgameplaystockvi231
At 33:30 min, you wanted to add some boundary, cuz if the card exceeded the left or top of window width, there was no way to bring it back without refreshing. Just a quick question, how about we put the ref={cardRef} at the starting div, such that I can drag and drop the card, by selecting it anywhere on the card, instead of just the header part of the card. Although the boundaries are necessary, but just a thought.
thank you sir! i have learned lots from this
A M A Z I N G
Great tutorial! Which VSCode color theme are you using?
How can I change the cursor size? It's really distracting. ;p
this looks interesting 🔥🔥🔥🔥🔥🔥
Why does the title say Javascript instead of react?
Good jobs
Please could you sort your videos list so I know from where to start. There are many videos. It is confusing.
Interesting and thanks
great work. thanks
Have a small doubt, someone please clear it if I am wrong, when he is deleting or updating the data, he is basically manipulating the Notes state, but what if we just call the init function to fetch data once after a deletion or a creation of a note by passing it in the contextAPI. It will automatically pop up on the UI. Is my approach wrong?
Finally a tutorial where accent isn't fkd.
I don`t undestend. mobile touch don`t work. why don`t use library with drag/drop ?
Basic Setup : 0:00 to 25:38
Drag and Drop : 25:38 to 41:51
What is roadmap to be a Devops from System Administrator profile
Plz upload the block chain course from code eater websites 🙏
Great thanks
Nice!
CAN SOMEONE TELL ME IT IS BEGINNER FRIENDLY TUTORIAL??
Is everything here is free or not ?
9th video, asking for some projects using IDX
github ??
1st comment
The zooming and following, in my opinion, is so annoying
Nice 🤍
👍👍👏💐