A Fullstack Twitter web app clone built with the MERN stack and Next js as the Fullstack framework.
Password for Twitter Blue: spaceX
I wanted to challenge myself and see how long it would take me to create and complete a full stack project. initially i wanted to use firebase as the backend but i felt that would have been a cheap and easy way out.
Why I did not use the App router ?
-
Most Next js codebases are still in the Page Router, so it pays to soildify your knowledge in the workings of the page router.
-
My laptop is too slow for the App router some how. if you really want this project to be in the App router here is a challenge for you rewrite the codebase.
- user authentication with google.
- user profile
- creation, ability to edit tweet visibility and deletion of tweets
- image upload functionality for tweets, profile image and banner.
- retweeting
- adding comments to tweets.
- replying commments to tweets.
- user's profile search
- bookmarking tweets
- liking tweets
- personalized tweet feed.
- follow user functionality
- user follow suggestions
- notifications
- custom api
- user verification (check readme for password)
- React (Ui Library)
- Shadcn Ui (Components Library)
- Tailwind Css (Css Framework)
- Framer Motion (Animation Library)
- Next js (Meta Framework)
- Redux (State Management)
- Redux Toolkit (So as not to suffer, like who writes plain redux these days?)
- Next Auth (Authentication Handler)
- Uploadthing (Media Uploader)
- Node js runtime
- Mongoose (Object Data Modeler)
- Next js (Full Stack Meta Framework)
- Zod (Schema Validator)
- Mongodb (NoSql Database)
Add the following environment variables unless the app will not work as intended.
MONGO_URL
GOOGLE_CLIENT_ID
GOOGLE_CLIENT_SECRET
JWT_SECRET
NEXTAUTH_URL
NEXTAUTH_SECRET
UPLOADTHING_SECRET
UPLOADTHING_APP_ID
SITE_URL
TWITTER_BLUE
- Clone the Repository
$ git clone https://github.com/nathan-somto/twitter-clone.git
- Enter into the directory
$ cd Twitter-Clone
- Create .env file at the root of project : Important Step Get all your credentials from google and uploadthing.
$ touch .env
- Install all dependencies
$ npm install
- Start the Development Server
$ npm run dev
-
Search First: Check if your issue already exists before creating a new one.
-
Clear Title: Use a concise title that describes the problem or request.
-
Details Matter: Provide clear details, steps to reproduce, and expected outcomes.
-
Be Respectful: Keep discussions polite and on-topic.
-
Stay Updated: Follow your issue for updates and respond promptly when needed.