PingBack is a decoupled Single-Page Application (SPA) that serves as the presentation layer for a server-side email tracking service. It manages the client-side authentication lifecycle by orchestrating the Google OAuth 2.0 authorization code flow, securely persisting JSON Web Tokens (JWTs) in client storage to authorize subsequent API requests. The application implements a declarative route protection strategy using React Router, ensuring that state-dependent dashboard views are accessible only to authenticated principals. Its primary interface facilitates the composition and dispatch of emails via authenticated requests to the backend API, which is responsible for injecting the 1x1 tracking pixel. The dashboard then provides a dynamic view of analytics by asynchronously fetching and rendering email open-count data. Built with React and TypeScript, the application is architected as a modular, component-based system that leverages custom hooks for state management and side-effect isolation.

Codebase

GitHub repositories:

• Frontend: https://github.com/uttam-on-git/pingback-frontend
• Backend: https://github.com/uttam-on-git/pingback-backend

Architecture

PingBack Workflow

1. Authentication: The sender logs into the React frontend using their Google account via OAuth 2.0.
2. Composition & AI Suggestion: The sender writes the body of their email and recipient email address. Backend communicates with an AI service, sending it the email body to generate relevant and effective subject line suggestions.
3. Sending: The sender chooses a subject line and clicks "Send." The frontend sends the complete email data to backend API.
4. Injection: The backend server constructs the final email. Crucially, it injects a tiny, invisible <img> tag into the email's HTML. The src of this image points to a unique endpoint on the server (e.g., https://api.pingback.com/track/email123).
5. Delivery: The backend uses Nodemailer to send the email to the recipient.
6. Open Event: The recipient opens the email. Their email client (Gmail, Outlook, etc.) automatically tries to load the images, which sends a GET request to the tracking URL.
7. Tracking & Logging: Backend server receives this GET request. It logs the event, including the timestamp and the specific email ID, and updates the corresponding record in PostgreSQL database.
8. Analytics: When the sender views their dashboard, the frontend fetches the latest data from the database, showing how many times the email has been opened and when.

UI Showcase