Twitter Clone | Node, Express, MongoDB, pug, socket.io, Tailwind-css | Full-Stack

Pubblicato il: 25 dicembre 2023
sul canale di: Javascript For Everything

135

Twitter Clone | Node, Express, MongoDB, pug, socket.io, Tailwind-css | Full-Stack

Live Demo: https://twitter-clone-06nd.onrender.com/
Documentation: https://twitter-clone-06nd.onrender.c...
Project Sample: /public/project-design directory

Technology
Node, express
MongoDB (mongoose)
Pug (Templete Engine)
Tailwind-css ()
Socket.io (Messaging, notification)
Home Page Profile Page
Home Profile
key-features Key features: [ by users point of view ]
Social media app like twitter
Follow and unfollow other users
Create tweet, like/unlike tweet, and also retweet
Upload profile photo, Cover photo.
Real Time chatting: Group chat, private chat
To create Group chat search users by name and shows selected users list before create chat
in chat page will show all users on that chat room, in top with user avatar
Users will see typing indicator of other users while chating.
key-features Key features: [ by Developers point of view ]
Hydration Rendering : ServerSide rendering + ClientSide rendering

API features : pagination, sorting, filtering, searching

Image upload : crop image, image with private route

Error handling : Express Globar Error handler + ClientSide error handler

Real-Time chat, notification By socket.io private or custom room

Project Setup: Node-Express, MongoDB (mongoose), Pug-templete tailwind-css,

Browser refresh on file change, Session based authentication.
Handle some security machanism, like: Content Security Policy for XSS attack,

HTML parser
Animation/Transition: scrolling animation, dialog transition, ...etc

Searcing APIs when user stop typing

Tailwind-express with MVC architechture (Model, View, Controller)

Configure express-session

Creating Components similer as Material-UI by tailwind CSS

Upload image (avatar) the right way

Preview image
Crop image
Upload image
Update avatar image (No Duplication)
Chat Interface

Create chats by selecting user list one by one, and selected users will be shows on top
Shows chats or chat groups with user logos
Chat details page

In questa pagina del sito puoi guardare il video online Twitter Clone | Node, Express, MongoDB, pug, socket.io, Tailwind-css | Full-Stack della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Javascript For Everything 25 dicembre 2023, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 135 volte e gli è piaciuto 2 spettatori. Buona visione!