Frontend Tech Stack
In order to accomplish one of our goals — make the platform easy to maintain and as durable as possible — we conducted extensive research to define our Frontend Tech Stack. Below is a detailed table summarizing the selected technologies, including their purpose, license, popularity, and maintenance status.
| Technology ✅ | GitHub | Purpose in Project | License | Community | Created | Last Commit | Company / Usage |
|---|---|---|---|---|---|---|---|
| React ✅ | GitHub | Core UI Library | MIT | 218k ⭐ / 21.7M weekly installs | 2013 | March 2025 | Meta (Facebook) |
| Vite ✅ | GitHub | Frontend build tool | MIT | 62.6k ⭐ / 9.4M installs | 2019 | March 2025 | Backed by Astro, StackBlitz |
| TailwindCSS ✅ | GitHub | Utility-first CSS framework | MIT | 75.5k ⭐ / 7.9M installs | 2017 | April 2025 | Tailwind Labs |
| MUI ✅ | GitHub | Component library (Material Design) | MIT | 90.3k ⭐ / 2.4M installs | 2014 | March 2025 | MUI Inc. |
| React Router DOM ✅ | GitHub | Routing | MIT | 51.7k ⭐ / 10.1M installs | 2014 | March 2025 | Remix |
| Axios ✅ | GitHub | HTTP requests | MIT | 103k ⭐ / 47.3M installs | 2014 | March 2025 | Sponsored by Proxidize, Lowdify |
| Lucide React ✅ | GitHub | Icon library | ISC | 4.7k ⭐ / 600k+ installs | 2022 | March 2025 | Open source |
| Framer Motion ✅ | GitHub | Animations | MIT | 21.1k ⭐ / 2M installs | 2019 | March 2025 | Framer |
| Leaflet + React Leaflet ✅ | Leaflet / React | Interactive Maps | BSD / MIT | 38.5k ⭐ (Leaflet) / 5.9k ⭐ (React) | 2010 / 2016 | March 2025 | Mapbox, OpenStreetMap |
| Recharts ✅ | GitHub | Charting | MIT | 21.6k ⭐ / 1.1M installs | 2016 | March 2025 | ByteDance |
| Chart.js + react-chartjs-2 ✅ | Chart.js / React wrapper | Charting | MIT | 63.9k ⭐ / 3.5M installs | 2013 | March 2025 | NASA, Netflix |
| @react-pdf/renderer ✅ | GitHub | PDF generation | MIT | 12.4k ⭐ / 500k installs | 2017 | March 2025 | Used in dashboards, reports |
| React Icons ✅ | GitHub | Icon wrapper | MIT | 10.8k ⭐ / 4.8M installs | 2016 | March 2025 | Open Source |
| Heroicons ✅ | GitHub | SVG icons | MIT | 18.6k ⭐ / 2.2M installs | 2020 | Jan 2024 | Tailwind Labs |
| Tippy.js + @tippyjs/react ✅ | GitHub | Tooltips | MIT | 11.4k ⭐ | 2017 | March 2025 | Open Source |
| XLSX ✅ | GitHub | Excel file parsing | Apache 2.0 | 34.2k ⭐ / 1.2M installs | 2012 | March 2025 | Used by Airtable, Tableau |
| ExcelJS ✅ | GitHub | Excel generation | MIT | 12.4k ⭐ / 1.1M installs | 2016 | March 2025 | Open Source |
| Date-fns ✅ | GitHub | Date utilities | MIT | 32.5k ⭐ / 13.1M installs | 2014 | March 2025 | Shopify, GitHub |
| React Datepicker ✅ | GitHub | Date selection | MIT | 6.5k ⭐ / 1.3M installs | 2014 | March 2025 | Open Source |
| QRCode ✅ | GitHub | QR Code generation | MIT | 6.6k ⭐ / 2M installs | 2011 | March 2025 | Open Source |
| React Time Picker ✅ | GitHub | Time selection | MIT | 1.2k ⭐ / 300k installs | 2018 | March 2025 | Open Source |
Consulted in April 2025
✅ Observations on Choices
State Management
Given the modular nature and scale of this project, we opted for a simpler approach using React’s built-in state and Context API where needed. This reduces boilerplate and keeps performance and maintainability in check.
Form Handling
Since the project’s form requirements are relatively simple, we handle form state manually using React, and apply custom validation logic as needed — in some cases using utility libraries like yup or simply relying on native HTML5 validation.
UI Framework
We combined the flexibility of TailwindCSS with the robust component suite from MUI 6. This hybrid approach gives us the freedom to design custom UI where needed while leveraging ready-made, accessible components for complex elements (e.g., tables, dialogs, inputs).
Charting
Both Recharts and Chart.js (via react-chartjs-2) were included. Each serves a different visual and functional need:
- Recharts for lightweight, responsive data viz with declarative APIs.
- Chart.js for more complex charts and custom render logic when needed.
Mapping
We use Leaflet and React-Leaflet for interactive maps, due to their strong open-source support and ease of integration with GeoJSON, markers, and tile layers — no external paid APIs required.
PDF & Excel
To cover export needs:
- We use @react-pdf/renderer for PDF document generation directly in React.
- ExcelJS and XLSX (SheetJS) support exporting data tables to
.xlsxformat, covering both basic and advanced spreadsheet features.
Date & Time
Instead of a full calendar suite, we use:
- Date-fns for all date manipulations.
- React Datepicker and React Time Picker for intuitive, minimal date/time input UIs.
Icons
We integrate icons from:
- Lucide, for their clean and lightweight SVGs.
- Heroicons, for design consistency with Tailwind.
- FontAwesome and React Icons, for a wide variety of general-purpose symbols.