React Social Media App Design with Tailwind.css

preview_player
Показать описание
In this tutorial we are going to design a social media website using React, Tailwind, Next, HTML, and CSS.
In a separate video / next part we are going to connect it with a database and API endpoints.

Timestamps
00:00:00 - intro
00:01:32 - setup next, tailwind
00:03:20 - layout structure
00:13:26 - sidebar navigation
00:18:37 - post form
00:30:11 - single post
01:01:49 - animation on sidebar and dropdown
01:12:25 - profile page
01:49:00 - profile about / friends / photos
02:12:47 - saved posts page
02:15:55 - notifications
02:23:19 - login page
02:37:13 - styling for mobiles
  1. Coding With Dawid
  2. react
  3. react.js
  4. react app
  5. react design
  6. react website
Рекомендации по теме
React Social Media 2:18:34

React Social Media App Design Tutorial | React.js UI Course Full

React Social Media 2:16:59

React Social Media App Design | Dark/Light Mode & Responsive & HTML CSS

React Social Media 3:07:43

React Social Media App Design with Tailwind.css

Build Full Stack 1:04:05

Build Full Stack Social Media App in React Native #1 - Login & SignUp UI

Build and Deploy 5:50:47

Build and Deploy a Full Stack Social Media App | React JS, Appwrite, Tailwind CSS, React Query

React Node.js MySQL 2:38:45

React Node.js MySQL Social Media App Tutorial | Full Stack Social Network App

Full-Stack Social Media 5:54:41

Full-Stack Social Media App Tutorial with React 19 & Next.js 15 & MySql | React Next.js Full...

I built a 0:08:53

I built a chat app in 7 minutes with React & Firebase

HSN | What 1:00:00

HSN | What A Girl Wants with Sarah Birthday Celebration 07.23.2024 - 08 PM

Build A Responsive 1:27:53

Build A Responsive Social Media Website Like Facebook/Instagram/Twitter using React JS Website

Build a COMPLETE 5:28:21

Build a COMPLETE Fullstack Responsive MERN App with Auth, Likes, Dark Mode | React, MongoDB, MUI

Build and Deploy 8:21:37

Build and Deploy an Instagram Clone with React and Firebase – Tutorial

Responsive Social Media 2:37:57

Responsive Social Media Website With Theme Customization Using HTML CSS & JavaScript

Build and Deploy 4:43:39

Build and Deploy a Modern Full Stack Social Media App | FULL COURSE

Build A Full-Stack 7:37:11

Build A Full-Stack Social Media App With Next.js 15 (React Query, Lucia Auth, TypeScript, Tailwind)

Build a Full 2:34:07

Build a Full Stack Social Media App | React, Firebase, Uploadcare, Tailwind CSS & Shadcn/UI | Ep...

Full-Stack/MERN Social Media 3:28:03

Full-Stack/MERN Social Media App | React, Tailwind CSS

HOW TO CREATE 0:07:42

HOW TO CREATE A SOCIAL MEDIA APP - STEP BY STEP

React Native in 0:02:17

React Native in 100 Seconds

Social Media App 4:16:07

Social Media App Tutorial (React.js, Supabase, Tailwind, Next.js)

Full Stack React 12:05:31

Full Stack React & Firebase Tutorial - Build a social media app

MERN Stack Social 2:23:16

MERN Stack Social Media App Tutorial | React Node.js full Course for Beginners

React Full-Stack Social 2:45:58

React Full-Stack Social media App Tutorial -- React JS Node JS MongoDB Redux and More.

Build a Canva 0:06:29

Build a Canva Clone With Nextjs, React, Honojs, Next Auth v5 (Premium Course)

Комментарии
Автор

Loved it ❣️🔥
Waiting for the next part

mahadevdhoble
Автор

Loved it ❣🔥
✌✌✌✌Waiting for the next part

Vezir_Fx
Автор

01:00:28 If you place the button inside the element ClickOutHandler with a simple ```<ClickOutHandler onClickOut={() => setPostMenu(false)}>``` it will work just fine. Regards. Thanks for thew tutorial

aureliomartin
Автор

Could you please use supabase as your backend/database?. Seems to be buzzing at the moment. Thank you!!!!

wplearnonline
Автор

Nice work bro, can you add shore or marketplace

ogarjosephodama
Автор

Might be a naive question, but why not put the Button inside of the ClickOutHandler along with the dropdown menu component at 1:01:34?

youtu.be/VXaYr6bI1pE?t=3694?

samuelyoon
Автор

Any idea why the tree dots icon (on the PostCard component) shows on top of the mobile navbar? It's something to do with "relative", but I can't change it because the dropdown menu wont work as intended anymore.

anycolouryoulike
Автор

can they upload video too? or only text and photo?

mirjalol
Автор

hi thankyou for this series can we get this part1 code from git ? i want to follow along part 2 but on github both code combined can u kindly provide code to specific part

faisaltariq-unso
Автор

How did you manage to install react-clickout-handler it says it's not compatible with react 18 but only 15 or 16?

Xtapodi
Автор

I think 3/12 is the same 1/3 also 9/12 and 3/4

mcibfvw
Автор

React 18 no longer support ClickOutHandler what is your fix to this for react 18?

Magues
Автор

Btw, your discord link isn't working

timeforrice
Автор

Could not find a declaration file for module 'react-clickout-handler'.
Getting this error also unable to install the module help please.

developerhun
Автор

Itd giving error please resolve

Server Error

Error: NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY env variables are required!

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages\_app.js (12:69) @ eval

10 |
11 | function MyApp({ Component, pageProps }) {
> 12 | const [supabaseClient] = useState(() =>
| ^
13 | return (
14 | <SessionContextProvider
15 |
Call Stack
MyApp
pages\_app.js (12:36)
Show collapsed frames

beingcheercool
Автор

Aaahhh come ooon mate! Why no typescript?!? Its 2023!!! Nobody starts a project without typescript anymore! Your tutorial is definitely not for beginners, so thumbs down for not using TS! 😢

zlatkoiliev