Application developed for explore my dev skills and make a discovery in the twitter platform by creating a clone that goes beyond the interface
| Overview | Technologies | Project | Run | Author |
This project is a functional twitter clone Full Stack application with a rethink metalic design, implements the main features of Twitter with the best pratice of Clean Architeture and with a Modular system, has the complete testing pyramid, security layer and more. The entire system is built on Docker.
🔭 | API Repository: [twitter_clone-API]
📡 | Hosted on Vercel: https://twitter-clone-gules-seven.vercel.app/
- NextJS 14
- TailwindCSS
- Typescript
- Jest
- Cypress
- Docker
- Inversify
- MongoDB
- NextAuth
- Zod
- Validations
- Zustand
- React-Hook-Forms
- File Upload & File Handle
- SWR
- React-Query - [ @tanstack ]
- Cryptography
- Argon2
- Bcrypt
- Crypto - [ NodeJS ]
- Axios
- Socket.IO
- Websockets
- eslint
- Prettier
- husky
- lint-staged
- Events & Async
- Event-Emitter 2
- Caching
- Storybook - [ DOCS ]
- Analytics - [ Vercel ]
- Design Patterns
- Perfomance
- Clean Architeture
- Clean Code / SOLID
- Scalability
- Real Time
Among Others...
Go to the video demo by clicking on any image
This is the front-end of the application, it was built with NextJS 14, TailwindCSS and Typescript, as the basis of the software. Here you can create and browse posts (Tweets) and interact with them, you can follow and unfollow users and be notified of relevant events such as a new post from someone you follow
📑 | More details about: LinkedIn Posts with #samuclone_twitter
On home page you find the newest posts, you can interact with them and click on a post to see more details and the comments. if you are the author, you can delete post.
You can create a post on "What are you thinking?" box, images are optional and all images are optimized to better performance. This section have data validations to prevent erros.
On right side have a list of users that you may like to meet.
✅ | This site is completly responsive, you can use it on any device and screen size :D
This application uses an efficient caching system, the entire page structure is cached on demand, avoiding unnecessary page requests, the same happens with the data that is cached and hydrated, avoiding unnecessary reloads, but without losing the reactivity of the software
Which means this application tends to be faster the more you are using it, the more you use this application the faster it will be because it will be optimized in real time.
This application uses a cryptography system for various functions, such as password hashing with Argon2 or Bcrypt, it is a hybrid system. In addition to hashing, it uses salts and other strategies to update password security and avoid rainbow tables.
It implements an end-to-end encryption system, using symmetric keys and other strategies to encrypt and decrypt all communication between this application and the server, even if the connection is insecure, your data is safe.
Here you can have a better experience by seeing the post and its comments, you can interact with the comments and create your own comment about it.
The content is responsive, you can better view images, for example, and comments are ordered by date.
Here you can see users profile, latest tweets and data like followers and following, name, bio and much more.
Here you can get to know users better and decide whether to follow or unfollow them.
On your profile, you can edit to make this space yours and update your data such as name, avatar or background.
Here you can see all notifications relevant to you due to our reactive notifications system.
Our notification system works in real time, identifies when an event occurs and notifies anyone who is interested.
The bell icon reacts based on notifications. You can view notifications by clicking on them and if possible you will be redirected to the notification context, you can delete it, and when all notifications are viewed the bell icon will be updated automatically
If you follow someone, you can be notified when they post a new tweet.
The login flow is divided on front & back end, the backend handle the search and authentication of a user applying the domain logics, the frontend handle the session with nextauth
This app uses react hooks form to build amazing forms with very good usability and maintainability. All this with Zod to handle data validation and transformation and maintain data security.
🔭 | API Repository: [twitter_clone-API]
📡 | Hosted on Vercel: https://twitter-clone-gules-seven.vercel.app/
$ git clone "git@github.com:Samuel-Ricardo/twitter_clone.git"
$ git pull "git@github.com:Samuel-Ricardo/twitter_clone.git"
This application use Docker so you dont need to install and cofigurate anything other than docker on your machine.
Navigate to project folder $ cd ./twitter_clone/ and run it using docker-compose
# After setup docker environment just run this commmand on root project folder:
$ docker-compose up --build # For First Time run this command
$ docker-compose up # to run project
#Apps Running on:
$ APP: http://localhost:3000
$ API: http://localhost:3004
$ STORYBOOK: http://localhost:6006/ | [DOCUMENTATION] | [DEV]
$ MONGO: http://localhost:27017 | [DATABASE]
$ [DEV] = only on development environment
See more: ./twitter_clone/docker-compose.yaml
| Author:
- Samuel Ricardo
