An open API service indexing awesome lists of open source software.

https://github.com/samuel-ricardo/twitter_clone-api

A NodeJS APi that serves the site clone
https://github.com/samuel-ricardo/twitter_clone-api

Last synced: about 2 months ago
JSON representation

A NodeJS APi that serves the site clone

Awesome Lists containing this project

README

        

# Twitter - X [API]



🚀 🟦 Twitter - X 🟦 🚀


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   |   

#











| :artificial_satellite: About:


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.


🔭 | Site Repository: [[twitter_clone](https://github.com/Samuel-Ricardo/twitter_clone/tree/main)]

📡 | Hosted on Render: https://twitter-clone-api-94zi.onrender.com


#



:building_construction: | Technologies and Concepts Studied:

>

- NodeJS
- Typescript
- Express
- Prisma
- MongoDB
- Docker
- SWC
- Jest
- Supertest
- Inversify
- Cors
- JWT
- Zod
- Validations
- File Upload & File Handle
- Cryptography
- Argon2
- Bcrypt
- Crypto - [ NodeJS ]
- Socket.IO
- Websockets
- eslint
- Prettier
- husky
- lint-staged
- Events & Async
- Event-Emitter 2
- Swagger - [ DOCS ]
- Design Patterns
- Perfomance
- Clean Architeture
- Clean Code / SOLID
- Scalability
- Real Time

> Among Others...

#



💻 | Application:

> 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](https://www.linkedin.com/in/samuel-ricardo/recent-activity/all/) with [#samuclone_twitter](https://www.linkedin.com/search/results/content/?keywords=%23samuclone_twitter&origin=FACETED_SEARCH&sid=VXl&sortBy=%22date_posted%22)




### 🏡 | Home

>



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


### 💾 | Caching



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.


### 🔏 | Cryptography



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.


### 🕊️ | Detailed Post

>



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.


### ☕ | Profile

>



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.


### 📬 | Notifications

>



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.


### 🛂 | Authentication

>



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


🔭 | Site Repository: [[twitter_clone](https://github.com/Samuel-Ricardo/twitter_clone/tree/main)]

📡 | Hosted on Render: https://twitter-clone-api-94zi.onrender.com





👨‍💻 | How to use


### Open your Git Terminal and clone this repository

```git
$ git clone "[email protected]:Samuel-Ricardo/twitter_clone-api.git"
```

### Make Pull

```git
$ git pull "[email protected]:Samuel-Ricardo/twitter_clone-api.git"
```


This application use `Docker` so you dont need to install and cofigurate anything other than docker on your machine.

>


Navigate to project folder and run it using `docker-compose`

```bash

# 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

```

```bash

#Apps Running on:

$ API: http://localhost:3004
$ SITE: http://localhost:3000

$ SWAGGER: http://localhost:3004/docs | [DOCUMENTATION]
$ SWAGGER_SCHEMA: http://localhost:3004/docs-json | [DOCUMENTATION]

$ MONGO: http://localhost:3004:27017 | [DATABASE]
$ MONGO_EXPRESS: http://localhost:3004:8081 | [DATABASE] | [VIEW]

See more: ./docker-compose.yaml

```


#



:octocat: | Author:

>

- Samuel Ricardo