A full-stack messenger application designed to provide seamless messaging communication.

This was one of the first FullStack projects I created, it's purpose was to tie everything I learned from The Odin Project's course together in a relatively complex project. A messaging app is a common application on the web.

• Authentication with refresh/access cookie based jwt tokens.
• Real time messaging.
• Image sharing capability.
• Group creation and management.
• User connection and interaction.

• Javascript
• React
• Vite
• Vercel
• Socket.IO

• Express
• Nodejs
• PostgreSQL
• Prisma ORM
• Socket.IO
• Cloudinary
• Koyeb
• Aiven

• Node.js
• npm
• PostgreSQL (ensure your database is running)
• Basic knowledge of using a terminal (steps are beginner-friendly)

git clone https://github.com/3antozz/Messaging-app
cd Messaging-app

cd api
npm install

1- Create a .env file in the api/ directory (based on .env.example) and fill in the required environment variables such as:

• Database connection URL
• JWT secrets
• Cloudinary credentials

2- Start the backend server:

npm start

1- Open a new terminal window or tab:

cd client
npm install
npm run dev

2- Rename the .env.example file to .env in the client/ directory

1- Once both servers are running:

2- Visit http://localhost:5173 in your browser

• Lucide React – Import Icons.
• react-intersection-observer – React implementation of the Intersection Observer API to render messages when visible on scroll.
• Socket.IO – Low-latency, bidirectional and event-based communication between a client and a server for real time updates.
• date-fns – Used for manipulating JavaScript dates.

• bcryptjs – For securing passwords by hashing and salting.
• prisma/client – ORM - Auto-generated and type-safe query builder for Node.js.
• jsonwebtoken – Implementation of JSON Web Token for signing tokens and authenticating users.
• express-validator – User input validation middleware.
• cloudinary – Image storage service integration.
• multer – Node.js middleware for handling multipart/form-data, used for uploading files.
• express-async-handler – Asynchronous exception-handling middleware.
• Socket.IO – Low-latency, bidirectional and event-based communication between a client and a server for real time updates.
• date-fns – Used for manipulating JavaScript dates.
• cors – Package for providing a Connect/Express middleware that can be used to enable CORS.
• cookie-parser – Used to parse Cookies.