Build and Deploy a Full Stack Social Media App | React JS, Appwrite, Tailwind CSS, React Query
Skills:
React90%
Build a modern social app with a stunning UI with a native mobile feel, a special tech stack, an infinite scroll feature, and amazing performance using React JS, Appwrite, TypeScript, and more.
⚠ There is an editing error in the YouTube video at 3:13:28. I discuss the useCreate mutation hook before it's made at 3:19:28. Just follow along and implement the hook at 3:19:28; it'll work fine.
Appwrite: https://apwr.dev/JSMastery
⭐ Join JS Mastery Pro: https://jsmastery.com
💎 Ultimate Next.js Course: https://jsmastery.com/course/the-ultimate-next-js-15-course
🧪 Ultimate Testing Course: https://jsmastery.com/course/the-complete-next-js-testing-course
📗 GSAP Course: https://jsmastery.com/course/gsap-animations-course
📕 Three.js 3D Course: https://jsmastery.com/course/vanilla-three-js-course
📙 JavaScript Course: https://jsmastery.com/course/complete-path-to-javascript-mastery
🚀 Launch Your SaaS Course: https://jsmastery.com/course/build-launch-your-saas-in-under-7-days
📚 Materials/References:
GitHub Code (give it a star ⭐): https://github.com/adrianhajdin/social_media_app
GitHub Gist (Assets + code): https://gist.github.com/adrianhajdin/4d2500bf5af601bbd9f4f596298d33ac
Active Lessons: https://www.jsmastery.pro/blog
💻 Join our Discord Community - https://discord.gg/n6EdbFJ
🐦 Follow us on Twitter: https://twitter.com/jsmasterypro
🖼️ Follow us on Instagram: https://instagram.com/javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
Time Stamps:
00:00:00 - Intro
00:05:56 - Setup
00:15:50 - Routing
00:18:51 - File & Folder Structure
00:23:49 - Auth Pages
00:51:16 - Auth Functionality - Appwrite
01:02:39 - Storage & Database Design
01:31:21 - TanStack Query
02:15:48 - HomePage
02:48:27 - Create Post
03:39:48 - Post Card
04:32:53 - Post CRUD
04:49:44 - Post Details
05:02:03 - Explore Page
05:29:03 - Search Results
05:39:22 - Active Lesson
05:45:58 - Deployment
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from JavaScript Mastery · JavaScript Mastery · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
![Web Development Roadmap 2020 [Learning Path] - Start Coding at Home!](https://i.ytimg.com/vi/qNgRs9W49PQ/mqdefault.jpg)
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
![Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 1/2]](https://i.ytimg.com/vi/ngc9gnGgUdA/mqdefault.jpg)
37
![Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 2/2]](https://i.ytimg.com/vi/aibtHnbeuio/mqdefault.jpg)
38
39
40
41
42
43
![Learn Material UI in One Hour - React Material UI Project Tutorial [2022]](https://i.ytimg.com/vi/Xoz31I1FuiY/mqdefault.jpg)
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Learn Async/Await in This Real World Project
JavaScript Mastery
JavaScript Exercise | Learn JavaScript with Exercism | #0 Setup
JavaScript Mastery
JavaScript ES6 for Beginners
JavaScript Mastery
ES7 and ES8 New Features
JavaScript Mastery
Learn JSON in a Real World React App
JavaScript Mastery
How to Create PDFs With Node JS and React
JavaScript Mastery
Must Have Visual Studio Code Extensions
JavaScript Mastery
Top 10 JavaScript Array Methods
JavaScript Mastery
JavaScript Map and Set Explained
JavaScript Mastery
Git Commands Tutorial for Beginners
JavaScript Mastery
Build and Deploy a YouTube Clone Application Using React
JavaScript Mastery
React Hooks - Most Used Features
JavaScript Mastery
JavaScript Best Practices and Coding Conventions - Write Clean Code
JavaScript Mastery
Build and Deploy a Realtime Chat Application - Socket.io, Node.js, and React.js
JavaScript Mastery
How to Create and Deploy a Portfolio Site in less than 30 Minutes
JavaScript Mastery
SEO for Developers | 2020 SEO Tutorial
JavaScript Mastery
Web Development Roadmap 2020 [Learning Path] - Start Coding at Home!
JavaScript Mastery
Random Quote Generator - React Fetch API Data | Build and Deploy a Real Advice App Project
JavaScript Mastery
Build a COVID-19 Tracker Application - React JS Project (Hooks, Material UI, Charts js)
JavaScript Mastery
JavaScript ES2020 - The Most Requested Feature Explained in 10 Minutes
JavaScript Mastery
Modern React Event Handling Using Hooks
JavaScript Mastery
Deno JS - Intro + Real Life Example
JavaScript Mastery
Build and Deploy a React PWA - Why Progressive Web Apps are the Future of the Web
JavaScript Mastery
Build a REST API with Node JS and Express | CRUD API Tutorial
JavaScript Mastery
Build and Deploy an ARTIFICIAL INTELLIGENCE React App | Alan AI, JavaScript
JavaScript Mastery
Master Async JavaScript using Async/Await | Quokka JS
JavaScript Mastery
Spaced Repetition in Programming | mem.dev
JavaScript Mastery
Stop Copy & Pasting Code | mem.dev
JavaScript Mastery
GitHub Profile README | Create an Amazing Profile Readme | Setup + Templates
JavaScript Mastery
NEW GitHub CLI 1.0 is here! | GitHub CLI Tutorial - Demo & Commands
JavaScript Mastery
React Custom Hooks | Learn Custom Hooks & Build a Project
JavaScript Mastery
Learn how to deploy an NPM Package
JavaScript Mastery
JavaScript Algorithms for Beginners
JavaScript Mastery
Level UP your GitHub Game - Get Hired Quickly
JavaScript Mastery
The Best Way to Host & Deploy a React Application
JavaScript Mastery
Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 1/2]
JavaScript Mastery
Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 2/2]
JavaScript Mastery
ECommerce Web Shop - Build & Deploy an Amazing App | React.js, Commerce.js, Stripe
JavaScript Mastery
JavaScript Crash Course 2021 - Master JavaScript in One Video!
JavaScript Mastery
MERN Auth - Login with Email (JWT) + Google OAuth Authentication | React, Node, Express, MongoDB
JavaScript Mastery
Chat Application using React JS - Build and Deploy a Chat App in 1 Hour (Microsoft Teams)
JavaScript Mastery
MUST USE Websites & Tools for Web Developers
JavaScript Mastery
Learn Material UI in One Hour - React Material UI Project Tutorial [2022]
JavaScript Mastery
Shopify ECommerce Store with React & Next JS | BuilderIO
JavaScript Mastery
React Video Chat App | WebRTC Video Chat Zoom Clone | Tabnine
JavaScript Mastery
TypeScript Crash Course 2021
JavaScript Mastery
Build and Deploy a Premium Next JS React Website | Landing Page, Business Website, Portfolio
JavaScript Mastery
Full Stack MERN Project - Pagination & Search | React + Redux, Node, Express, MongoDB
JavaScript Mastery
Build a BETTER Facebook Messenger Chat Application | React JS, Firebase, Chat Engine
JavaScript Mastery
Build and Deploy THE PERFECT Portfolio Website | Create a Portfolio from Scratch
JavaScript Mastery
Full Stack MERN Project - Implement MERN Comments | React + Redux, Node, Express, MongoDB
JavaScript Mastery
Turn an API into a Startup?! Build & Sell an API with JavaScript
JavaScript Mastery
Exclusive First Look at GitHub Copilot - All you need to know
JavaScript Mastery
Build and Deploy a Google Maps Travel Companion Application | React.js
JavaScript Mastery
Build and Deploy a Full Stack Realtime Chat Messaging App with Authentication & SMS Notifications
JavaScript Mastery
Build and Deploy a React Cryptocurrency App and Master Redux Toolkit in One Video
JavaScript Mastery
Build and Deploy a Group Video Chat Application with Messaging, Polls & More
JavaScript Mastery
Build and Deploy Google Search 2.0 with React & Tailwind CSS (simple!)
JavaScript Mastery
Top 10 Web Development Chrome Extensions You Simply Need to Try!
JavaScript Mastery
Build and Deploy THE BEST Modern Blog App with React | GraphQL, NextJS, Tailwind CSS
JavaScript Mastery
More on: React
View skill →
Related AI Lessons
⚡
⚡
⚡
⚡
The Smart Student’s Guide to RAG: From Giant Textbooks to Grounded Answers
Medium · RAG
How to Evaluate RAG Applications
Medium · LLM
RAG Chunking Is Not About Length — It Is About Preserving Meaning
Medium · AI
The Future of RAG: Dead, Evolving… or Becoming the Brain of AI?
Medium · Machine Learning
Chapters (17)
Intro
5:56
Setup
15:50
Routing
18:51
File & Folder Structure
23:49
Auth Pages
51:16
Auth Functionality - Appwrite
1:02:39
Storage & Database Design
1:31:21
TanStack Query
2:15:48
HomePage
2:48:27
Create Post
3:39:48
Post Card
4:32:53
Post CRUD
4:49:44
Post Details
5:02:03
Explore Page
5:29:03
Search Results
5:39:22
Active Lesson
5:45:58
Deployment
🎓
Tutor Explanation
DeepCamp AI