threads-clone

This project is created for practice purposes.

Live link

View Demo

Screenshots

Profile Page

Search Page

Built with

• HTML
• CSS
• React, React Router
• zustand
• Chakra UI, Chakra UI Icons
• Firebase
• React Firebase Hooks
• Swiper.js

File structure

Click to open

├── node_modules
├── public
│     └── favicon.ico
├── src
│   ├── assets
│   │     ├── logo.bg.png
│   │     └── logos.jsx
│   ├── components
│   │     ├── Activity
│   │     │    └──...jsx
│   │     ├── AuthForm
│   │     │    └──...jsx
│   │     ├── FeedPosts
│   │     │    └──...jsx
│   │     ├── Footer
│   │     │    └──...jsx
│   │     ├── Header
│   │     │    └──...jsx
│   │     ├── Navigation
│   │     │    └──...jsx
│   │     ├── Profile
│   │     │    └──...jsx
│   │     └── SearchForm
│   │          └──...jsx
│   ├── contexts
│   │     └── contentContext.jsx
│   ├── firebase
│   │     └── firebase.js
│   ├── hooks
│   │     ├── useColors.jsx
│   │     ├── ...
│   │     └── useSignupWithEmailAndPassword.jsx
│   ├── layouts
│   │     └── GeneralLayout.jsx
│   ├── pages
│   │     ├── ActivityPage
│   │     │    └──ActivityPage.jsx
│   │     ├── AuthPage
│   │     │    └──AuthPage.jsx
│   │     ├── HomePage
│   │     │    └──HomePage.jsx
│   │     ├── NotFoundPage
│   │     │    └──NotFoundPage.jsx
│   │     ├── PostPage
│   │     │    └──PostPage.jsx
│   │     ├── ProfilePage
│   │     │    └──ProfilePage.jsx
│   │     └── SearchPage
│   │          └──SearchPage.jsx
│   ├── routes
│   │     ├── PrivateRoutes.jsx
│   │     └── PublicRoutes.jsx
│   ├── store
│   │     ├── authStore.js
│   │     ├── threadStore.jsx
│   │     └── userProfileStore.jsx
│   ├── themes
│   │     ├── _alert.jsx
│   │     ├── ...
│   │     └── theme.jsx
│   ├── utils
│   │     └── ...js
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── index.html
├── vercel.json
...
└── README.md

Function descriptions & progress

LOGIN / SIGNUP PAGE

• user can login with email and password
• user can login with email and password

HOME PAGE

• user can logout
• user can view his own and his followings' threads.
• user can like visible threads.
• user can reply visible threads.
• user can repost visible threads posted by others.
• user can quote visible threads posted by others.
• user can follow other users.
• user can edit her/his threads/replies.
• user can mute her/his followings.
• user can hide viewable threads.

SEARCH PAGE

• user can search for other users.

CREATE PAGE (no route)

• user can create new threads.

ACTIVITY PAGE

• user can view notifications
  • all: who followed you, whom you just followed, who like your post/comment, who post his/her first thread
  • requests: follow requests
  • replies: replies to users’ threads
  • mentions: threads or comments, mentioning user’s name
  • quotes: threads that quote user’s threads
  • verified: verified users that user follows.

PROFILE PAGE

• user can view his own profile page
  • view display name, username, profile picture, bio description
  • edit profile
    • user can edit her/his own profile.
  • view user’s own threads (including quotes)
  • view user’s replies to other threads/comments
  • view user’s reposts of other users’ threads
• user can view other’s profile page
  • view display name, username, profile picture, bio description
  • follow profile user (button)
  • mention profile user (button)
    • user can mention other users.
  • view profile user’s threads (including quotes)
  • view profile user’s replies to other threads/comments
  • view profile user’s reposts of other users’ threads