This project is a dashboard that combines MRR (Monthly Recurring Revenue) data from two Stripe accounts, providing a comprehensive view of your business's recurring revenue.
- Combines MRR data from two separate Stripe accounts
- Displays total MRR and volume for each account and combined
- Shows historical MRR and volume trends with interactive charts
- Responsive design for both desktop and mobile viewing
- Simple, clean UI with a navbar and footer
- Next.js
- TypeScript
- Tailwind CSS
- Recharts for data visualization
- Stripe API
- VO
- shadcn
- Node.js (v14 or later)
- npm or yarn
- Stripe account(s) with API access
-
Clone the repository:
git clone https://github.com/shnai0/stripe-mrr.git cd stripe-mrr-dashboard -
Install dependencies:
npm installor
yarn install -
Set up environment variables: Create a
.env.localfile in the root directory and add your Stripe API keys:STRIPE_SECRET_KEY_1=sk_test_... STRIPE_SECRET_KEY_2=sk_test_... -
Run the development server:
npm run devor
yarn dev -
Open http://localhost:3000 in your browser to see the dashboard.
You can customize the dashboard by modifying the following files:
lib/stripe.ts: Adjust Stripe API calls and data processingpages/index.tsx: Modify the main dashboard layout and componentscomponents/ui/charts.tsx: Customize chart appearance and behavior
This project can be easily deployed to Vercel or any other Next.js-compatible hosting platform. Make sure to set up your environment variables in your hosting provider's settings.
Contributions are welcome! Please feel free to submit a Pull Request. I would love to improve Gross volume and exact number of MRR currently they not correlate on 100 %
- Stripe for their excellent API and documentation
- Next.js for the React framework
- Tailwind CSS for the utility-first CSS framework
- Recharts for the charting library
- Recharts for the charting library
If you have any questions or need help with setup, please open an issue in this repository.