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.
|
|
|
|
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