A full-stack web application designed to help users track their recurring subscriptions and receive timely email reminders before payments are due. Never miss a renewal date again!
This project is built with a modern tech stack, featuring a React (Vite) frontend and a Node.js (Express) backend, connected to a MongoDB database. It is deployed with the frontend on Vercel and the backend on Render.
- Frontend (Vercel):
sub-tracker-frontend-sandy.vercel.app - Backend API (Render):
subscription-tracker-api-shas.onrender.com
- User Authentication: Secure user registration and login system using JWT stored in secure, HTTP-only cookies.
- Subscription Management: A full suite of CRUD (Create, Read, Update, Delete) operations for managing subscriptions.
- Dashboard Overview: An intuitive dashboard that displays all upcoming subscription renewals within the next 7 or 30 days.
- Automated Email Reminders: Powered by a durable Upstash QStash workflow, the system automatically sends a confirmation email on creation, plus reminder emails 7, 5, 3, and 1 day before a subscription renews.
- Interactive UI: Users can view all their subscriptions, see their status (active, inactive, cancelled, expired), edit details in a pop-up modal, and toggle their active status.
- Security: Protected routes, secure cookie handling, and rate limiting/bot protection with Arcjet.
This project is separated into two main repositories: a frontend client and a backend server.
- Framework: Node.js, Express.js
- Database: MongoDB with Mongoose ODM
- Authentication: JWT (JSON Web Tokens) & bcrypt for password hashing
- Scheduled Jobs: Upstash QStash for durable, serverless task scheduling
- Email Service: Nodemailer
- Security: Arcjet for rate limiting and bot protection
- Environment:
dotenvfor environment variable management
- Framework: React 19 with Vite
- Routing: React Router
- Styling: SCSS with CSS Modules
- HTTP Client: Native Fetch API
- State Management: React Context API
- Icons: Lucide React
- Backend: Deployed as a Web Service on Render.
- Frontend: Deployed on Vercel.
To get a local copy up and running, follow these simple steps.
- Node.js (v18 or later)
- pnpm (or npm/yarn)
- Git
First, clone both the frontend and backend repositories to your local machine.
# Clone the backend repository
git clone https://github.com/dhruv-deb/subscription-tracker-API.git
# Clone the frontend repository
git clone https://github.com/dhruv-deb/SubTracker-Frontend.gitRepository: (https://github.com/dhruv-deb/subscription-tracker-API.git)
Navigate to the backend directory and install dependencies:
cd <backend-folder-name>
pnpm install
```</comment-tag> <suggestion>**Navigate to the backend directory and install dependencies:**Create an environment file: Create a new file named .env.development.local in the root of the backend folder and add the following variables. You must fill these in with your own keys and credentials.
# Server Port
PORT=5500
SERVER_URL="http://localhost:5500"
# MongoDB Connection String
DB_URI="your_mongodb_atlas_connection_string"
# JWT Secrets
JWT_SECRET="your_jwt_secret_key"
JWT_EXPIRES_IN="7d"
# Arcjet Security Key (Optional)
ARCJET_KEY="your_arcjet_key"
# Upstash QStash Credentials (for email scheduling)
QSTASH_URL="https://qstash.upstash.io"</comment-tag> <suggestion>QSTASH_URL=https://qstash.upstash.io</suggestion> This is an important correction. Environment (`.env`) files should contain plain key-value pairs. Including quotes can sometimes cause parsing issues with certain libraries.
QSTASH_TOKEN="your_upstash_token"
QSTASH_CURRENT_SIGNING_KEY="your_upstash_signing_key"
QSTASH_NEXT_SIGNING_KEY="your_upstash_next_signing_key"
# Nodemailer (using Gmail)
EMAIL_PASSWORD="your_gmail_app_password"Start the server:
pnpm run devThe backend API will now be running at http://localhost:5500.
Navigate to the frontend directory and install dependencies:
cd <frontend-folder-name>
pnpm installStart the development server:
pnpm run devThe React application will now be running at http://localhost:5173. The frontend is already configured in src/context/AuthContext.jsx to connect to the local backend for development.