← Back to Projects

Project: matiasdni/fullstack-messenger

Fullstack Messenger

Web Development Project

Description

This is a fullstack messenger web application developed using React and Node. The application allows users to send messages to other users, add and remove friends, create groups and send group messages.

The application is deployed on Render and can be accessed here.

Features

  • User authentication
  • User authorization
  • Create groups
  • Group/user profile page
  • Send messages to users
  • Send messages to groups
  • Edit group profile if user is admin
  • Add friends
  • Remove friends

Technologies

Installation

  1. Install NodeJS
  2. Clone the repository
  3. Run npm install in the client directory
  4. Run npm install in the server directory
  5. Create a .env file in the server directory and add the following variables
    • PORT
    • DB_USER
    • DB_PASSWORD
    • DB_NAME
    • DB_HOST
    • DB_DIALECT
    • DB_PORT
    • JWT_SECRET
  6. Run npm run dev in the server directory and npm start in the client directory

Screenshots

Login

Register

Home

Profile

Group

Group Profile

Add Friend

Add Group

Edit Group

Delete Friend

Delete Friend

Send Message

Notifications

Hour keeping

DateHoursDescription
April 1, 20233.5Set up the project
April 2, 20237initial structure for real-time chat and implemented initial socket.io functionality. Reorganized the project structure
April 3, 20232Added initial backend code for setting up the Socket.IO server
April 12, 20233initial commit for the backend and changes to tailwind configuration
April 13, 202312Implemented login, routing, and user state management. Updated server to work with current frontend implementation. implemented Redux for managing authentication state.
April 15, 202310Improved Sequelize and client implementation. Implemented chat functionality with socket.io.
April 16, 20237refactoring controllers, fixing types, updating scripts and setups, implemented authentication middleware for api requests. fixed db models.
April 17, 20239.5implemented Socket.io code and chat features. removed unnecessary components
April 18, 20235created scopes for querying db. deleted redundant route and placed inside a route. updated dependencies and chat card now displays latest message.
April 19, 20238Implemented useState to store active chat messages and adjusted the Socket.IO event to match the backend. New messages are added to the database. fixed dark mode and refactored socket code. Added authentication middleware.
April 20, 20238Enforced strict typing across the project and refactored state management.
April 21, 20236improved type safety. bug fixes
May 16-17, 20237optimize the codebase. Added search user functionality to the server. Added modal to layout.
May 17, 202310made modal component more generic and added animations. added chat type to chat model. removed unnecessary code and scopes. styling +fixing a problem with messages overflowing their containers.
May 18, 20238configure backend to use the local database in development mode. check if database exists on start.
May 19, 202311refactoring, and the method names were made more descriptive. Added new form component for group chat creation. add more sample data and move getChats method to userService.
May 20, 202312batch add users on setup, use API requests instead of socket events on crud operations.
May 21, 20238removed some unused constants and added more sample data to the project. Refactor + cleanup
May 22, 20232fixes to the project.
May 23, 20239typing, fixing existing functionalities, implement features: chat invitations and group chat creation. Reimplemented user search using react-select
May 24, 20238models and error handling.
May 25, 20238fixed issues related to chat types and associations, removed unnecessary imports, implemented chat invites, and renamed files for better organization.
May 26, 202310add SidebarTab component, extracted child components to improve code organization. Extracted router code from the chat controller. Change require statements to imports.
May 27, 202311extracted components from sidebar, implemented lazy loading and fetching of friends and invites,
May 28, 20239implement shared types. implement the friend list in a similar way as the invite list. added todos. various refactorings, updating property names, adding routes for retrieving invites/requests, refactoring database initialization code, and refactoring invite model initialization. refactored the useChats and useActiveChat hooks. optimized imports, added custom hooks for auth and chat state + styling
May 29, 202313multiple commits
June 1, 20232Refactored and reorganized code structure.
June 2, 20238Refactor and reorganize code base, extracted utility functions to own dir, added fields to user model, implemented getting and sending of chat invites and friend requests, implemented friendService, experiment with associations
June 3, 20236add type to invite, implement removing friends, fix bugs, update redux state on request status change, implement sending friend requests
June 4, 20236cleaning up code, adding typings, notify users on friend requests with socket
June 5, 20238migrate to vite, styling, async errors and custom error class, implement error handling middleware
June 7, 20234fix remove friend, return/emit changes in user, remove console logs
June 9, 20236implement delta updates, add chat info component
June 10, 202310user now joins chat rooms correctly after accepting invite, refactoring ui to smaller components, implement kicking users from chats, implement updating chat name and bio
June 11, 20232refactor
June 12, 20233implement image uploading, chat profile images, notifications
June 13, 20232refactor to use DaisyUI, update dependencies and remove unused code
June 14, 20233update layout
June 15, 20234styling
June 16, 202310add drawer, drawer context,
June 17, 20231refactoring components
June 18, 202313refactor axios code to use single axios instance and implement interceptors to avoid the need to pass token to every api call. Refactoring Socket.io code
June 19, 20237writing tests, refactoring etc
June 20, 20232deploying app
June 26, 20231deploying app
June 27, 20237fixing issues that arise when deploying. Building and deploying. Writing README.
total312