How To Build A Twitter Clone - React Next JS - Appwrite Crash Course

How To Build A Twitter Clone - React Next JS - Appwrite Crash Course

Adrian Twarog

54 года назад

43,637 Просмотров

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!
https://appwrite.io/

⚪ GitHub Repo for the Project:
https://github.com/mollerjorge/twitter-clone/tree/master

Installation Documentation for App write:
https://appwrite.io/docs/installation

Figma Slides and Installation Details:
https://www.figma.com/file/ybpZTOv1QkTckpFK6qEbuB/Appwrite-crash-course?node-id=0%3A1&t=Pknky58EQh60xRxh-1

Learn Design for Developers!
A book I've created to help you improve the look of your apps and websites.
📘 Enhance UI: https://www.enhanceui.com/

Feel free to follow me on:
🐦 Twitter: https://twitter.com/intent/follow?screen_name=adrian_twarog
💬 Discord: https://discord.gg/6gmmFvxkD7
💸 Patreon: https://www.patreon.com/adriantwarog

Software & Discounts:
🚾 Webflow: https://webflow.grsm.io/adrian
🌿 Envato: https://1.envato.market/yRZjz2
🌿 Envato Elements: https://1.envato.market/LP0OJZ
🔴 Elementor: https://elementor.com/adrian/?ref=23140
✖ Editor X: https://www.editorx.com/adrian-twarog

Computer Gear:
⬛ Monitor: https://amzn.to/3f9DOQI
⌨ Keyboard: https://amzn.to/3eA5UFD
🐁 Mouse: https://amzn.to/3xVJO8l
🎤 Mic: https://amzn.to/3hgCfms
📱 Tablet: https://amzn.to/3ewt7sa
💡 Lighting: https://amzn.to/3vOZeZY
💡 Key Lighting: https://amzn.to/3f6qP2f

Camera Equipment:
📷 Camera: https://amzn.to/3uCv4J9
📸 Primary Lens: https://amzn.to/3vT6wMm
📸 Secondary Lens: https://amzn.to/3tyqWIX
🎥 Secondary Camera: https://amzn.to/3o2zCGi
🎙 Camera Mic: https://amzn.to/33tCz9l
🎞 USB to HDMI: https://amzn.to/33yW9RE

Тэги:

#clone_twitter #website #coding #html #css #js #programming #appwrite #build_and_deploy_twitter #javascript #tutorials #node #mongodb #fullstack #frontend #backend #typescript #express.js #node.js #REST #API #RESTFUL #tutorial #how_to_build #full_guide_to_building #webdev #full_stack #tailwindcss #appwrite_course #appwrite_crash_course #appwrite_tutorial #appwrite_guide #twitter_clone #twitter_code #twitter_crash_course #twitter_tutorial #ui #ux #website_course #app_write #webapp
Ссылки и html тэги не поддерживаются


Комментарии: