Next.js & Supabase App Rebuild
Budget: $250 – $750 USD
I’m migrating an existing Django SaaS into a modern stack built with Next.js (latest stable) and Supabase. Every existing feature must be carried over while adding several improvements:
• Realtime dashboard
The current analytics page should refresh automatically through Supabase’s live queries so users see new data the instant it arrives—no manual refreshes.
• In-app notifications
When key events occur (e.g., status changes, payment confirmations, new user activity) I want unobtrusive toast-style alerts inside the interface, stored and marked as read/unread for each user session.
• MercadoPago payments
Replace Stripe in the old codebase with MercadoPago. The flow needs secure card capture, webhooks for subscription lifecycle, and graceful handling of failed payments.
• Data dashboard redesign
Replicate existing charts and tables using React + D3 or Recharts, but leverage Supabase functions to keep server-side logic minimal. Dark-mode ready.
Acceptance criteria
1. Next.js project builds cleanly with TypeScript, ESLint, and Vercel config.
2. Supabase database schema and edge functions are version-controlled via migrations.
3. Realtime updates tested with multiple browser sessions showing identical, immediate state.
4. Notifications persist across reloads and clear correctly.
5. MercadoPago sandbox and production credentials both pass end-to-end purchase and refund tests.
6. Clear README with setup, env variables, and deployment steps.
You will have read-only access to the current Django repo plus a Postman collection for existing API endpoints. Keep the UI closely aligned to what we have now—TailwindCSS is fine, but I’m open to Chakra or ShadCN if it speeds delivery.
• Realtime dashboard
The current analytics page should refresh automatically through Supabase’s live queries so users see new data the instant it arrives—no manual refreshes.
• In-app notifications
When key events occur (e.g., status changes, payment confirmations, new user activity) I want unobtrusive toast-style alerts inside the interface, stored and marked as read/unread for each user session.
• MercadoPago payments
Replace Stripe in the old codebase with MercadoPago. The flow needs secure card capture, webhooks for subscription lifecycle, and graceful handling of failed payments.
• Data dashboard redesign
Replicate existing charts and tables using React + D3 or Recharts, but leverage Supabase functions to keep server-side logic minimal. Dark-mode ready.
Acceptance criteria
1. Next.js project builds cleanly with TypeScript, ESLint, and Vercel config.
2. Supabase database schema and edge functions are version-controlled via migrations.
3. Realtime updates tested with multiple browser sessions showing identical, immediate state.
4. Notifications persist across reloads and clear correctly.
5. MercadoPago sandbox and production credentials both pass end-to-end purchase and refund tests.
6. Clear README with setup, env variables, and deployment steps.
You will have read-only access to the current Django repo plus a Postman collection for existing API endpoints. Keep the UI closely aligned to what we have now—TailwindCSS is fine, but I’m open to Chakra or ShadCN if it speeds delivery.