Banner Background
Web App

ConnectMe

ConnectMe is a robust career-centric social network utilizing React, Vite, Express, and MongoDB. The application distinguishes between public SPA routing via React Router and secured backend requests via HTTP-only JWT cookies. It seamlessly blends tools like TanStack Query for caching mutations, Cloudinary for optimized image profile uploads, and Mailtrap for transactional email flows. Functionality is layered to manage intelligent connection requests, timeline feeds, structured profiles, and a robust notification center.

React JSTailwind CSSNode.jsNode JSExpress JSMongoDBReact QueryZodZodPostmanPostmanGitGithubVercelpnpm
ConnectMe Preview

Overview

Connect Me is a comprehensive strictly professional social networking platform (inspired heavily by LinkedIn). The application is engineered carefully using the MERN stack (MongoDB, Express, React, Node.js) and systematically split into two distinct independently deployable packages interacting through heavily secured cross-origin boundaries.

Platform capabilities span from comprehensive dynamic user profile building explicitly supporting Cloudinary media uploads, natively integrated post feeds, multi-stage connection requests, to automated transactional email workflows driven gracefully by Mailtrap.

Independent Workspaces

The system is built via two isolated architectures: a Vite-powered React Single Page Application (SPA) on the frontend and an Express REST API backend natively maintaining HTTP-only JWT secure cookies eliminating vast XSS risks proactively across endpoints.

Connect Me Professional Networking

Core Platform Features

Social Algorithms

  • Dynamic Global Feed — Scroll intelligently through text and image-based posts exclusively from your accepted professional connections.
  • Connection Lifecycle — Actively search, send, securely accept, or cleanly reject incoming connection requests modifying your networking tree simultaneously.
  • Suggested Contacts — Natively analyzes distinct metrics intelligently generating sidebar recommendations dynamically.

Professional Identity

  • Public Resumes — Fully distinct endpoints (/profile/:username) mapping heavily complex JSON arrays outlining user Skills, Experience pipelines, and Educational milestones perfectly.
  • Cloudinary Pipelines — Upload binary image data directly mapped logically toward secure high-bandwidth Cloudinary CDNs converting distinct base64 inputs cleanly across both Cover Photos and standard Avatars.

User Retainment

  • Optimistic Reactions — High-speed post likes executed leveraging TanStack Query predicting success visually mitigating UI lag thresholds gracefully.
  • In-App Notification Hub — Isolated monitoring dashboard logging distinct incoming interactions actively measuring unseen engagements seamlessly.
  • Transactional Emails — Welcome signups, comment notifications, and connection alerts are mapped perfectly via dedicated HTML templates processed externally utilizing Mailtrap algorithms avoiding server delay blockages.

Technology Stack

Frontend SPA

React 18 structured elegantly with Vite 6. Data mutated incredibly efficiently via TanStack Query v5. Styled cohesively using Tailwind CSS 3 and daisyUI primitives.

Backend REST API

Node.js + Express 4 processing encrypted JWT methodologies rigorously guarded by Zod validation schemas minimizing bad data natively.

Database Storage

MongoDB optimized structurally via Mongoose 8 natively tracking deeply grouped relational structures (Users -> Posts -> ConnectionRequests).

Cloud Logistics

Cloudinary executing robust image transformations actively alongside Mailtrap pushing distinct HTML layout notifications.

Application Architecture

Client operations strictly utilize HTTP clients configuring explicit withCredentials settings guaranteeing token validations securely traverse strict Cross-Origin boundaries smoothly.

Identity & Authentication

User payloads are securely collected dynamically checking unique MongoDB parameters actively routing bcrypt executions generating distinct JSON Web Tokens stored rigidly into secure httpOnly constraints safely hidden from local script accesses.

Session Hydration

Leveraging highly concurrent TanStack Query methodologies, the primary React component intelligently dispatches transparent background requests targeting the /users/user/auth-user endpoints instantly fetching verified cached identity logs natively bypassing lengthy splash screens.

Interactions & CDN Logic

When deploying a physical profile image update logically, the React array natively parses binaries efficiently compiling base64 payloads transmitting cleanly to the backend controller which offloads it dynamically to Cloudinary nodes before persisting mapping URLs directly.

External Mail Sync

Complex asynchronous operations (like accepting heavily desired network requests) actively write confirmation updates gracefully firing non-blocking internal handlers rendering isolated HTML email packages pushing smoothly against external Mailtrap relays effortlessly.

Project Ecosystem

vercel.json
server.js
vercel.json

Frequently Asked Questions


Grow Your Network

Ready to explore building professional networks globally? Experience the dynamic feeds and secure networking pipeline firsthand by visiting the Live Application today!