Chitchat is a free social media platform for users to interact with one another through either single or group chats. Send & receive messages in real time through the means of web sockets and see timestamps of when those messages were sent! Click here to sign up now and start networking with other developers!
Technologies & Tools Utilized: React, Node, MongoDB, Express, Mongoose, Socket.io, React Query, HTML & CSS. This project was inspired directly from popular platforms such as Facebook and iMessage, I decided to construct my own version of the software that everday people use to connect with others around the world daily.
Backend:
- To begin, I initially structured my application using the MVC software architectural pattern, also known as Model-View-Controller. Doing this will allow better modularity across the source code, an easier time with debugging, and a lot of other benefits of keeping the project organized as things scale in the future.
- For my choice of a backend language I went with Node because of its V8 engine that interprets code, its event driven architecture along with my familiarity with already using JavaScript in the front end.
- I went with using MongoDB because NoSQL is extremely useful for unstructured or very large data objects such as chat log data, video, or images and is even used by big companies such as Facebook.
- I leveraged mongoose to help aid in my development with using MongoDB because it's ability to provide schema validations.
Frontend:
- I needed a framework that would give me the ability to create fast user interfaces with complex designs and modularity across my front, and for that React was a no-brainer!
- One of the main tools I used on the front end was React Query for state management. The reason I went with React Query over a tool like Redux was that ReactQuery gives a better developer experience for handling API requests from the server side & caching while also not having so much boilerplate code.
- Through the means of leveraging powerful technologies such as web sockets provided by socket.io, I was able to create two-way connections between the client and the server which opens up the ability for users to have real-time messaging sent and received with very low latency.
- Mobile & Desktop Friendly, Message Timestamps, User online/offline status, & User typing animation upon web socket connection.
- User profiles, Group Chat Creation, Updating Name, Adding & Removing Users Note: Only group creator can remove users)
This was my first big full stack project so the learning curve for putting things together was steep. For starters, I built two to three smaller React projects before this just so I can get the hang of writing code in React. I've spent a lot of time planning, researching, reading on the best way to structure such a project. I've learned and implemented the MVC (model-view-controller) archeticture structure and from doing so I grasp a greater understanding for why this software archetictual pattern is so popular. I enjoyed the process of making this and learned a ton over the course of building this project. I now understand the hype over typescript because I was so fustrated when I tried running my code in production and I was getting so many error codes that wasn't showing up during development. I dived head in first in this project knowing only HMTL, CSS, JavaScript and a bit of React and came out being able to confidently use react and the tools in its eco system to produce fast and complex user interfaces. On the backend I had a tougher time in the beginning because I was so used to visually seeing the results of the things I coded. After reading a lot of documentation and a few youtube videos I was able to grasp a better understanding of how the server talks to the API and fetch data from the database and sends it to the front end. This was one of the funnest projects I've built thus far and it gave me the confidence to build anything!
- Clone repository
npm install- Create
.envfile and replaceMONGO_URIwith yur own Mongo Database offered through Mongo Atlas. JWT_SECRETreplace with your Json Webtoken and changePORTvariable to5000- run
node server.js cd \frontend\and runnpm startand react will open up a new tab on port3000- In the frontend
signuppage you can change the cloudinary API to your own (optional), or keep the default user picture when registering users.
- Email validation to reduce spam and fake users.
- Notifications for finding unread messages.
- Light mode for users who prefer it over dark.
- Emojis and photo attachments.
- Refactor code in Typescript.
- Tailwind (maybe..)
|
iMovie Reviews
|
T&K Nigerian Restaurant
|
Automated SMS Quotes
|