You will get a React or Next.js dashboard with charts and real-time data


Project details
I specialize in building data-heavy dashboards that are fast, accessible, and maintainable.
My recent work includes a full SaaS expense tracker with a multi-chart dashboard (bar, donut, and bar charts), real-time server state via TanStack Query, and full WCAG 2.1 accessibility compliance. I also built a real-time notification dashboard for an ERP platform used across multiple business modules.
Every dashboard I ship includes clean component architecture, typed data flow with TypeScript, and code you can maintain after I'm done.
Starter tier delivers a responsive UI shell with mock data, perfect if your backend isn't ready yet. Standard tier connects to your real data with up to 3 metric cards and 1 chart. Advanced tier is the full package: 3 chart types, data tables, filtering, and TanStack Query for server state management.
My recent work includes a full SaaS expense tracker with a multi-chart dashboard (bar, donut, and bar charts), real-time server state via TanStack Query, and full WCAG 2.1 accessibility compliance. I also built a real-time notification dashboard for an ERP platform used across multiple business modules.
Every dashboard I ship includes clean component architecture, typed data flow with TypeScript, and code you can maintain after I'm done.
Starter tier delivers a responsive UI shell with mock data, perfect if your backend isn't ready yet. Standard tier connects to your real data with up to 3 metric cards and 1 chart. Advanced tier is the full package: 3 chart types, data tables, filtering, and TanStack Query for server state management.
Programming Languages
JavaScript, TypeScriptCoding Expertise
Cross Browser & Device Compatibility, Performance OptimizationWhat's included
| Service Tiers |
Starter
$150
|
Standard
$400
|
Advanced
$800
|
|---|---|---|---|
| Delivery Time | 5 days | 7 days | 12 days |
Number of Revisions | 1 | 1 | 2 |
Number of Pages | 0 | 1 | 1 |
Design Customization | - | - | - |
Content Upload | - | - | - |
Responsive Design | |||
Source Code |
Optional add-ons
You can add these on the next page.
Fast Delivery
+$50
Additional Revision
+$50
Unit tests (Jest + RTL)
(+ 3 Days)
+$150Frequently asked questions
About Gerson
Senior Frontend Developer | Next.js | TypeScript | React
Puebla, Mexico - 1:48 am local time
9 years of frontend experience. My recent work includes:
→ Migrating a full e-commerce platform to Next.js from scratch and building a 15+ component library with Material UI that cut development time by 40%
→ Building a real-time notification system with Context API and WebSockets used across multiple ERP modules
→ Optimizing a data-heavy dashboard from 4.2s to 2.1s load time using code splitting, lazy loading, and concurrent API requests
→ Mentoring 5 developers through structured code reviews, reducing QA bugs by 30%
I also built and ship my own SaaS product: a personal finance tracker built on Next.js 14, TypeScript, MongoDB, TanStack Query, and React Hook Form. It has 84 automated tests across 17 suites, full WCAG 2.1 accessibility compliance, Google OAuth, and a CI/CD pipeline. I use it daily. You can see it live. Link below.
My approach: I define edge cases before touching code, write tests before implementing new logic, and use AI tools (Claude, GitHub Copilot) to move faster without sacrificing judgment. Every architecture decision I make has a reason I can explain.
What I'm best at:
· Next.js 14 / React / TypeScript
· TanStack Query, React Hook Form, Redux
· Tailwind CSS, Material UI
· MongoDB, Node.js, REST APIs
· Jest + React Testing Library (84 tests shipped)
· WCAG 2.1 accessibility
· Performance optimization (Lighthouse, Core Web Vitals)
I work well with founders, product teams, and agencies. If you need someone who can own a feature end-to-end: from architecture decision to tested, accessible, production-ready code. Let's talk.
Steps for completing your project
After purchasing the project, send requirements so Gerson can start the project.
Delivery time starts when Gerson receives requirements from you.
Gerson works on your project following the steps below.
Revisions may occur after the delivery date.
Review your requirements and confirm data structure and design references
Propose component architecture and chart types for your approval

