Skip to main content
Version: 1.3

Frontend Tech Stack

In order to accomplish one of our goals which is making 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 ✅GitHubPurpose in ProjectLicenseCommunityCreatedLast CommitCompany / Usage
React ✅GitHubCore UI LibraryMIT218k ⭐ / 21.7M weekly installs2013March 2025Meta (Facebook)
Vite ✅GitHubFrontend build toolMIT62.6k ⭐ / 9.4M installs2019March 2025Backed by Astro, StackBlitz
TailwindCSS ✅GitHubUtility-first CSS frameworkMIT75.5k ⭐ / 7.9M installs2017April 2025Tailwind Labs
MUI ✅GitHubComponent library (Material Design)MIT90.3k ⭐ / 2.4M installs2014March 2025MUI Inc.
React Router DOM ✅GitHubRoutingMIT51.7k ⭐ / 10.1M installs2014March 2025Remix
Axios ✅GitHubHTTP requestsMIT103k ⭐ / 47.3M installs2014March 2025Sponsored by Proxidize, Lowdify
Lucide React ✅GitHubIcon libraryISC4.7k ⭐ / 600k+ installs2022March 2025Open source
Framer Motion ✅GitHubAnimationsMIT21.1k ⭐ / 2M installs2019March 2025Framer
Leaflet + React Leaflet ✅Leaflet / ReactInteractive MapsBSD / MIT38.5k ⭐ (Leaflet) / 5.9k ⭐ (React)2010 / 2016March 2025Mapbox, OpenStreetMap
Recharts ✅GitHubChartingMIT21.6k ⭐ / 1.1M installs2016March 2025ByteDance
Chart.js + react-chartjs-2 ✅Chart.js / React wrapperChartingMIT63.9k ⭐ / 3.5M installs2013March 2025NASA, Netflix
@react-pdf/renderer ✅GitHubPDF generationMIT12.4k ⭐ / 500k installs2017March 2025Used in dashboards, reports
React Icons ✅GitHubIcon wrapperMIT10.8k ⭐ / 4.8M installs2016March 2025Open Source
Heroicons ✅GitHubSVG iconsMIT18.6k ⭐ / 2.2M installs2020Jan 2024Tailwind Labs
Tippy.js + @tippyjs/react ✅GitHubTooltipsMIT11.4k ⭐2017March 2025Open Source
XLSX ✅GitHubExcel file parsingApache 2.034.2k ⭐ / 1.2M installs2012March 2025Used by Airtable, Tableau
ExcelJS ✅GitHubExcel generationMIT12.4k ⭐ / 1.1M installs2016March 2025Open Source
Date-fns ✅GitHubDate utilitiesMIT32.5k ⭐ / 13.1M installs2014March 2025Shopify, GitHub
React Datepicker ✅GitHubDate selectionMIT6.5k ⭐ / 1.3M installs2014March 2025Open Source
QRCode ✅GitHubQR Code generationMIT6.6k ⭐ / 2M installs2011March 2025Open Source
React Time Picker ✅GitHubTime selectionMIT1.2k ⭐ / 300k installs2018March 2025Open Source
@emotion/react + styled ✅GitHubStyling support for MUIMIT12.7k ⭐ / 3.5M installs2017March 2025Used internally by MUI
@mui/x-date-pickers ✅GitHubDate pickers (advanced MUI)MIT3.4k ⭐ / 1M installs2021March 2025MUI Inc.
Dayjs ✅GitHubLightweight date manipulationMIT44.5k ⭐ / 9M installs2018March 2025Open Source
Firebase ✅GitHubRealtime DB, auth, hostingApache 2.04.4k ⭐ / 5M installs2014March 2025Google
idb ✅GitHubIndexedDB wrapperApache 2.05.3k ⭐ / 1.3M installs2016March 2025Google
i18next + React-i18next ✅GitHub / ReactInternationalizationMIT7.7k ⭐ / 2.5M installs2011March 2025Widely used across industries
react-day-picker ✅GitHubCalendar UIMIT5.9k ⭐ / 800k installs2015March 2025Open Source
@hello-pangea/dnd ✅GitHubDrag and dropMIT1.3k ⭐ / 500k installs2022March 2025Community-maintained fork
pdf-lib ✅GitHubPDF editing and mergingMIT14.1k ⭐ / 1.3M installs2018March 2025Open Source
pdfjs-dist ✅GitHubPDF renderingApache 2.043.7k ⭐ / 4M installs2011March 2025Mozilla
React Speech Recognition ✅GitHubVoice input and controlMIT1.7k ⭐ / 100k installs2020March 2025Open 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 .xlsx format, 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.

Multi-Language Support​

To support multi-language capabilities, we use i18next with react-i18next, along with the browser language detector. This stack enables dynamic translation loading and supports locale-based fallbacks, providing a scalable and flexible solution for internationalizing the app.

Persistent Storage​

For offline access or persistent local data, we rely on IndexedDB via the idb library. This allows us to store user data, settings, and cached content efficiently, ensuring a smooth experience even when offline.

Notifications​

We use Firebase for real-time notifications, leveraging its robust infrastructure for push notifications and real-time data synchronization. This allows us to keep users informed about important updates and events even without the app being open.

Drag-and-Drop​

The app supports intuitive reordering and drag-and-drop interfaces using @hello-pangea/dnd — a robust, actively maintained fork of react-beautiful-dnd designed for React 18+ environments. It’s used in UIs like sortable lists and interactive content editors.

PDF Utilities​

Beyond generating PDFs with @react-pdf/renderer, we use:

  • pdf-lib to merge, edit, or programmatically generate complex PDFs (e.g., with custom layouts or embedded data).
  • pdfjs-dist to render PDF files directly in the browser, enabling previewing of user-uploaded files or dynamic reports.