How To Build A Twitter Clone - React Next JS - Appwrite Crash Course
HTML-код
- Опубликовано: 12 июл 2024
- We will Clone Twitter from Scratch in this Appwrite Crash Course, where you will learn how to use NextJS, React JS, HTML, CSS and a few exciting modules to recreate the site!
00:00 - Introduction
00:48 - What is Appwrite
01:39 - Setup and Installation
02:11 - Docker installation
04:45 - Appwrite Backend
06:15 - NextJS Frontend
07:42 - Appwrite database setup
09:49 - Frontend API Connection
11:30 - Account and User API
12:58 - Create Email Session
15:39 - Other Login Methods
16:23 - Get Current User Session Info
16:58 - User Session Logout
20:39 - Database - Tweet Collection
24:30 - Storage and Functions
25:17 - Refactoring Codebase
27:47 - Tailwindcss and Classname setup
29:05 - Frontend UI Refactoring
30:08 - Database Updates and Teams
31:54 - Functions in Appwrite
37:50 - Final Changes and Project Overview
40:09 - Conclusion
Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application.
Learn more about Appwrite. They were kind enough to also sponsor this video making it and others like it happen on this channel!
appwrite.io/
⚪ GitHub Repo for the Project:
github.com/mollerjorge/twitte...
Installation Documentation for App write:
appwrite.io/docs/installation
Figma Slides and Installation Details:
www.figma.com/file/ybpZTOv1Qk...
Learn Design for Developers!
A book I've created to help you improve the look of your apps and websites.
📘 Enhance UI: www.enhanceui.com/
Feel free to follow me on:
🐦 Twitter: intent/follow?scr...
💬 Discord: / discord
💸 Patreon: / adriantwarog
Software & Discounts:
🚾 Webflow: webflow.grsm.io/adrian
🌿 Envato: 1.envato.market/yRZjz2
🌿 Envato Elements: 1.envato.market/LP0OJZ
🔴 Elementor: elementor.com/adrian/?ref=23140
✖ Editor X: www.editorx.com/adrian-twarog
Computer Gear:
⬛ Monitor: amzn.to/3f9DOQI
⌨ Keyboard: amzn.to/3eA5UFD
🐁 Mouse: amzn.to/3xVJO8l
🎤 Mic: amzn.to/3hgCfms
📱 Tablet: amzn.to/3ewt7sa
💡 Lighting: amzn.to/3vOZeZY
💡 Key Lighting: amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: amzn.to/3uCv4J9
📸 Primary Lens: amzn.to/3vT6wMm
📸 Secondary Lens: amzn.to/3tyqWIX
🎥 Secondary Camera: amzn.to/3o2zCGi
🎙 Camera Mic: amzn.to/33tCz9l
🎞 USB to HDMI: amzn.to/33yW9RE 
Наука
This is fantastic. Everything in this video, as well as throughout your multiple RUclips channels, is structured and explained clearly with reasoning. Very much appreciated, thank you for all of this.
I'm happy you see the goal, to provide a looooot of value!
@@AdrianTwarog The value offered in your videos and corresponding resources is immense. Can't tell you how much you and your work is appreciated.
I dont understand everything you say but your explanation is amazing! I love to see every step very clearly! Hope one day more technical part will make sense to me!
Honestly, missing aspects in the video
This is awesome. Thanks so much for the video Adrian.
Thanks Adrian. This makes it easier for front-end devs to easily create full-stack apps
hanks Adrian. This makes it easier for back-end devs to easily create full-stack apps😋
exactly what i wanna watch if i wanna start learning appwrite! like your showcase of usage!
You rock brother!!
This was a fantastic tutorial Adrian! I was just a bit disappointed to see that you haven't use the new `app` directory of Next 13.
Indeed
Thank you for sharing my friend ❤
I will definitely follow this video step by step and I will give a detailed review after I verify everything. But firstly, thank you for making a video thats not even an hour long. I am pretty sure I can watch this till the end.
We are waiting lol
@@henoksamuel1106 lol I apologize. I encountered a dumb bug halfway through the video and could not debug it. I got so frustrated that I quit...My bad 😞
@@dabiuzumaki3262 all good. Keep it going tho!
Fantastic Adrian.
wow amazing , I have goind to learnig
nice thank you so much 🙌🙌👌👌👍👍😍😍👌👌
You made it very simple to understand! I am facing issue while creating next.js project, I am not getting the pages folder and index file, can you help me with that, should I install any other package?
Adrian is the best!
I wish you also showed how to create the UI. Can you do a UI/UX Frontend Crash Course?
If you good in appwrite, let’s swap knowledge I am good in UI UX with Tailwindcss… it’s sweet and easy, teach me n I teach you
Just a couple of things.
Could have given a basic outline on how to setup an SMTP server.
Could have explained quickly how to setup email password recover as well as the logging in and out functions to point us in the right direction.
It would have also been nice to tell the type of files that these features go in as well as where to put them ❤
This is great work bro, but I have only one request please make an web browser with nextjs tailwind please
Hi Adrian, amazing video. I have worked with supabase only before a little bit. Does AppWrite have Unlimited API requests for the free plan aswell as supabase have? :)
Can you explain what is the difference between setting up docker like this
(as recommended on the apprite website)
docker run -it --rm \
--volume /var/run/docker.sock:/var/run/docker.sock \
--volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
--entrypoint="install" \
appwrite/appwrite:1.3.7
and what you did in this tutorial
Thanks for this awesome tutorial. Pls code repository
Would have been nice to link something to guide us 0n how to setup an SMTP server and also give us a heads up that you have to pay for a domain name. Or a service.
You could have suggested a couple of service providers.
At around 14:01, I am getting an error that user already exists in my project. But in actual, the user does not exist in the database. What should I do?
I couldn't find the github repo for this project. Can you share it?
in the description
@@BooleanDev yes .. when he first published the video, it wasn't in the description so asked!
@@slimpotatoboy yeah i figured
Plz make a one video, how to install code server in windows
It's like a competition for Firebase
Pretty much, but its already made for you!
I was impressed with Clerk Auth and its easy usage.
They have directives to encapsulate the entire app.
Which will protect in few lines of code.
Is Appwrite auth also has such directives ?
How many percentage you will give for Appwrite auth comparing Clerk auth ?
Man appwrite cloud is available now and it’s so much easier.
Ill need to cover this!
how do you manage about DevOps workflow
I'm not a tech guy and not sure I'm up to the task of learning all of this on your level, however, I do know what I want and am curious to know if this video is the bridge between what's in my head and a finished product.
Here's what I've wanted for years!
I've been wearing Garmin watches for decades. The newest Garmin smartwatches have what they call "widgets" which are nothing more than 3rd party apps that can be downloaded to the watch. Most of simple things like watch faces, weather apps, etc. And there are some fitness apps but they're pretty cheesy. I want someone to create an app that technical should be possible within Garmin but it's not. I want to create multi-activity workouts that utilize several of the Garmin activities as a continuous workout where I tap the "lap" button to move to the next workout station.
Believe it or not Garmin doesn't have this feature in the way most would use it. They have a multi-sport feature but it is limited.
Can the information in the video help me learn how to build a Garmin app?
no please refer to Garmin documentation
yaml: control characters are not allowed
I'm getting this error while running docker compose up -d --remove-orphans at 4:30 timestamp.
Can anyone help with this....tried with chatgpt but aint working
in frontend API connection, why didnt you use appwrite node sdk? strange!
🎉🎉🎉
❤❤❤ form Bangladesh
Elon musk released twitter's open source? can you show us how to fork and deploy that code? it's written in scala though
Hey yo
Hi adrian, where is your link code component in tutorial?
Should be in the description with the github link!
@@AdrianTwarog can you share a link? i couldn't find where is link code github
@@AdrianTwarog, I follow step by step the tutorial, but stuck in the middle videos because I didn't have components like in the video
why "npm run dev" doesn't work?
can someone help me?
@@-nnn950yes maybe I see what's wrong
Make sure you are in the right case in your project to run this command.
Your discord link expired.
Not very impressed with the source code it's in Js when your code is in ts and most everything is different. It doesn't even look like you own the repo pretty sly
Other than that I do really love your content
This was nothing but frustrating. What you showed on the screen isn't where it is on the sites and you went way too fast without showing where things actually are. This didn't help at all.
Honestly you'll get lost along the especially if you're using the updated versions of both the Next.js 14 and appwrite
Your discord link expired
why you expose the API key? isnt this a sensitive data? This is very dangerous according to appwrite team!
He obviously deletes the project lol
Source code?
This is more like we're watching you write an Appwrite code for review rather than "a tutorial". We can barely see the screen - too small, and you breeze through the explanation making it seem like you're walking through a code review at a job interview.
Yeah I noticed that too, don’t worry I’ve worked to improve that for future videos! I’m slowing it down a bit more and covering things a bit better :) thanks for the feedback!