30 Days of MERN

"From learning React hooks to broadcasting real-time messages — a journey through the Chatty Application development."

June 23 — July 22 MERN Stack + Socket.io

"Chatty" App

Real-Time Messaging Platform

About the Project

The Chatty Real-Time Application is a robust messaging platform designed to facilitate seamless communication. Built on the MERN Stack, it leverages Socket.io for instantaneous bidirectional data flow.

  • Real-Time: Messages delivered in < 1s latency.
  • Secure: Bcrypt hashing and JWT authentication.
  • Interactive: Online status tracking & typing indicators.

The 30-Day Developer Diary

Week 1: Foundations

JUNE 23 - JUNE 25

React Renaissance

Revisiting React basics. Mastering hooks (useState, useEffect) and setting up the Vite environment.

JUNE 26 - JUNE 29

UI/UX Styling

Integrating Tailwind CSS and DaisyUI. Converting Figma designs into responsive landing pages.

Week 2: Backend & DB

JUNE 30 - JULY 04

Express & Node.js

Building our first RESTful APIs. Understanding the request-response cycle and Postman testing.

JULY 05 - JULY 08

MongoDB Schemas

Designing User and Message schemas with Mongoose. Setting up the MongoDB Atlas cloud cluster.

Week 3: Real-Time Magic

JULY 09 - JULY 12

Socket.io Integration

The core challenge! Implementing WebSockets for instant message broadcasting and event handling.

JULY 13 - JULY 16

Auth & Security

Securing routes with JWT. Implementing password hashing using Bcrypt.js for data safety.

Week 4: Polishing (JULY 17 - JULY 22)

Debugging socket disconnections, handling concurrent user loads, and optimizing React re-renders. Final testing of the Lost and Found system and the Chat platform. Successfully reached MVP (Minimum Viable Product).

100%

Code Complete

0

Critical Bugs

Impact & Key Learnings

Impact of the Project

By centralizing communication, this app serves as a real-time bridge for users. It demonstrates how modern web architecture can handle thousands of simultaneous events without lag. In a college environment like GNDEC, such a system could streamline student-faculty coordination effectively.

Key Learnings

  • MERN Synergy: Understood how JSON flows from DB to API to UI.
  • Async mastery: Handling asynchronous Node.js operations and React states.
  • Real-time logic: Managing rooms and broadcasting specifically via Socket.io.