Pingify

A real-time chat application built with React, TypeScript, Firebase Authentication, Express, Prisma, and Socket.io. The app supports both Google sign-in and email/password authentication, real-time messaging, and a clean messaging dashboard UI.

Features

• Real-time messaging with Socket.io
• Firebase Authentication support
• Google sign-in and custom email/password auth
• PostgreSQL database via Prisma ORM
• User search and conversation list
• Protected routes and auth-aware frontend flow
• Responsive messaging UI for desktop and mobile
• Serverless-friendly backend startup behavior for deployments like Render

Tech Stack

Frontend

• React + TypeScript
• Vite
• Tailwind CSS
• Firebase SDK
• React Router
• Socket.io Client
• Lucide icons and UI utilities

Backend

• Node.js + Express
• TypeScript
• Prisma ORM
• PostgreSQL
• Socket.io
• JWT-based auth middleware
• Firebase Admin SDK

Authentication

• Firebase Authentication for Google and email/password flows
• Firebase Admin for server-side verification
• Custom backend endpoints for user sync and profile creation

Database

• PostgreSQL
• Prisma schema with users and messages

Project Structure

ChatApp/
├── backend/
│   ├── prisma/
│   ├── src/
│   ├── .env.example
│   ├── package.json
│   └── tsconfig.json
├── frontend/
│   ├── src/
│   ├── public/
│   ├── package.json
│   ├── vite.config.ts
│   └── tailwind.config.js
├── README.md
└── .gitignore

Prerequisites

Before running the app locally, make sure you have:

• Node.js 18+
• npm or pnpm
• PostgreSQL database
• Firebase project configured

Environment Setup

1. Backend environment

Create a .env file in backend/ based on the example:

cp backend/.env.example backend/.env

Then update backend/.env:

DATABASE_URL="postgresql://username:password@localhost:5432/chatapp"
JWT_SECRET="your-secret-key"
PORT=3000

Notes:

• DATABASE_URL must point to your PostgreSQL database.
• JWT_SECRET should be a strong random string.
• For Render/serverless deployment, the app may take a few seconds to wake up on the first request.

2. Frontend environment

Create a .env file in frontend/ if needed for your local setup:

VITE_API_URL=http://localhost:3000
VITE_REACT_APP_BACKEND_URL=http://localhost:3000

If your Firebase config differs from the project defaults, update the config in:

frontend/src/context/firebase.ts

Install Dependencies

Backend

cd backend
npm install

Frontend

cd frontend
npm install

Database Setup

Generate Prisma client and run migrations:

cd backend
npx prisma generate
npx prisma migrate dev

If you want to reset the database during development:

npx prisma migrate reset

Run the App

Start backend

cd backend
npm run dev

Start frontend

cd frontend
npm run dev

Then open the frontend URL shown by Vite, usually:

http://localhost:5173

Production Build

Frontend build

cd frontend
npm run build

Backend build

cd backend
npm run build

Deployment Notes

This app is designed to work with backend deployments on serverless platforms such as Render. Because serverless backends can cold start, the first request may take longer than usual. The loader UI includes a small note to let users know this is expected behavior.

Common Issues

• If Prisma client errors appear, run npx prisma generate again.
• If auth fails, confirm Firebase config and backend environment values are correct.
• If the frontend cannot reach the backend, check that VITE_API_URL and VITE_REACT_APP_BACKEND_URL are pointing to the correct local or deployed backend URL.
• If Socket.io does not connect, confirm the backend is running and CORS settings match the frontend origin.

License

This project is for personal or internal use unless otherwise specified.