Introduction
Author: Nguyen Duc Trung
The OpenEU Frontend is built using Next.js v15 and deployed on Netlify, leveraging a modern React architecture with strict linting, CI hooks, and an ecosystem of powerful libraries for mapping, visualization, UI, and developer experience.
🛠 Frameworks & Libraries
- Next.js 15 – React framework with built-in SSR, routing, and API routes.
- NextUI v2 – Lightweight, accessible component library for consistent UI.
- Tailwind CSS – Utility-first CSS framework for fast and flexible styling.
- Tailwind Variants – Adds dynamic variant control for Tailwind.
- TypeScript – Static typing for better DX and maintainability.
- Framer Motion – Declarative animation library for React.
- next-themes – Light/dark theme toggling with persistence.
📍 Mapping & Geospatial
- Leaflet – Lightweight interactive map engine.
- react-leaflet – React bindings for Leaflet.
- @turf/turf – Advanced geospatial analysis.
📊 Visualization
- Highcharts – Rich charting library for interactive data.
- highcharts-react – React wrapper for Highcharts.
📦 State & Data Management
- TanStack Query (React Query) – Server-state synchronization and caching.
- zod – Schema validation and parsing (used for forms and API inputs).
- react-hook-form – Declarative form handling.
- cookies-next – Simplified cookie management for SSR/CSR.
🧩 Utilities & Developer Experience
- clsx & class-variance-authority – Conditional class merging.
- uuid – Generate unique identifiers.
- date-fns – Modern date manipulation library.
- jspdf & autotable – PDF generation utilities.
🧪 Linting & Code Quality
- TypeScript
- ESLint – With Airbnb & Next.js configs.
- Prettier – For consistent formatting.
- Husky – Git hooks to enforce standards.
- Lint-staged – Run linters on staged files before commit.
- Commitlint – Ensure conventional commit messages.
🌐 APIs & Types
- Supabase – Auth, database, and storage.
- openapi-typescript – Generate typed SDK from backend OpenAPI spec.