A very minimalistic Twitter clone app
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
This is a very minimalistic Twitter clone app that implements some basic functionalities of Twitter and it user interface.
-
User registration and authentication
- Credential login with email and password
Registration is done with the use of credentials. There is no third party authentication. Name, email and password are used for credential registration while just email and password are used for credential login.
There is no special categories of logged in user or special admin role. There is no email verification during credential login and there is forget password option. Special user or admin role might be added in future for example I might add special admin role for users that will have a special tag on their profile image. I might add third party authentication option in the future. I might also add forget password and email verification for credential login - Pages and routes protection The packages I used for user authencation and routes protection are:
- Basic actions that users can perform include
-- Posting tweets
-- Follow and unfollow another user
-- Edit your profile image, corver image and bio
-- reply to any tweet
-- like and unlike tweet - Notification system
You get notified when activities that involve your account happens. Activities like when someone follows you, another user likes your post...
- Image Upload using Base64 strings
Users can upload a profile and cover image. This image most be of moderate size and are conveted into a Base64 string before storage.
- Responsive user interface
The user interface is made responsive with the use of tailwind css. I used tailwind css for this project because it is one of the best and most popular mobile first css library. 99.99% of the entire css was written exclusively with tail wind css.
- Global state management
I use zustand for global state magement. I used zustand for this project because zustand is light weight, compact, fast, scalable and does everything I need it to do in this project. Also zustand requires less code to use than redux and doesn't rely on a provider
- Database abstration tool
I used prisma for database abstration. I choose prisma because it is compatible with multiple database and it generate data types corresponding to my database schemas.
- Promised-based HTTP Client
I used axios for making http requests to my server. I choose axios because it is simple and easy to use, it is promised based and I can easily handle the errors. axios also has built in XSRF protection, download progress...
This is the list of some of the plugins and frameworks I used, check the package.json for a complete list.
|-- components # Reusable UI components
|-- hooks # Custom React hooks
|-- lib # Prisma and server-side utilities
|-- pages # Next.js pages, including API routes
| |-- api # API routes for server-side functionalities
| |-- auth # API routes for server-side authentication
| |-- posts # API routes for posts page
| |-- users # API routes for users page
| |-- index.tsx # Main page (Billboard)
|-- prisma # Prisma schema for database models
|-- public # Public assets like images and favicon
|-- styles # Global CSS stylesTo get a local copy up and running follow these steps.
- npm
npm install npm@latest -g
- Clone the repo:
git clone https://github.com/p-hronesis/twitter.git
- Install NPM packages:
npm install
- Set up the environment variables:
DATABASE_URL="<your_mongodb_database_url>" NEXTAUTH_JWT_SECRET="<your_next_auth_jwt_secret>" NEXTAUTH_SECRET="<your_next_auth_secret>"
- Change git remote url to avoid accidental pushes to base project
git remote set-url origin github_username/repo_name git remote -v # confirm the changes - Push the prisma schema to your database server
npx prisma db push
This project allows users to post tweets, like and unlike any tweet, comments on tweets, follow or unfollow another and manage their profile. It also allows user to register with their email and password
- Add user search functionality
- Improve user feed recommendation algorithm
- Integrate payment gateway for subscribers account
- Add special user role for subscribed users
- Multi-language Support
- Mandarin
- Spanish
See the open issues for a full list of proposed features and known issues.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt for more information.
- Name: Dipe Kehinde
- Linkedin: (https://www.linkedin.com/in/dipekehinde)
- Email: dipekehinde@gmail.com
Project Link: https://github.com/p-hronesis/twitter
Big thank you to Code with Anthonio