Demo . Youtube Playlist

Project is created with:

• Next.js v13.0.6 , Typescript , Tailwind CSS and SASS
• Firebase , Cloud Storage and Cloud Firestore
• Firebase-Admin-SDK and Nookies
• use-gesture and react-spring
• Font-Awesome and nprogress

☑️ Easily navigate between tabs by dragging
☑️ Sign up with Email & Password
☑️ Sort the posts by their creation time (createdAt)
☑️ Dyanmic Routes for Author Profile and Post
☑️ Fetch All posts using server-side rendering (SSR), excluding posts that are marked as "Only Me"
☑️ Get more (posts , comments and liked users) with Infinite scrolling
☑️ Fetch Posts with author details , like count , comments and shared post
☑️ Allow users to view comments and liked users
☑️ Allow users to update their profile by modifying their userName, bio, and profile pictures
☑️ Creating new posts and Updating with customizable privacy
☑️ Liking/commenting on existing posts,comments and sharing posts with others
☑️ Select and Delete Multiple Posts
☑️ Users have the ability to save their favorite posts
☑️ Implement media (photos and videos) upload functionality by leveraging the power of Firebase Cloud Storage
☑️ Enable image preview layout and zoom capability for a better user experience
☑️ Store the id_token in cookies with nookies to fetch SSR data with the stored uid
☑️ Friends Request , acceptable and blockable
☑️ Friends Request Sound play in App Mode (Add to HomeScreen due to Browser Autoplay ploicy)
☑️ Users will receive notifications when their posts and comments are liked,commented and shared by other users
☑️ Crop the profile picture to 256x256 pixels to ensure it displays with the correct aspect ratio in the notification icon
☑️ Notification actions are also enabled to enhance the user experience without the need to open a web page.
Available actions are "accept-FriendRequest" , "like-comment" , "reply-comment"
☑️ Push notificatons to multiple devices with Firebase Cloud messaging for foreground and background notificatons.

Facebook-ui-zee

To run this project, install it locally using npm:

git clone https://github.com/thanhtutzaw/facebook-ui.git
cd facebook-ui
cp .env.local.example .env.local
npm install
npm run dev