Skip to main content

Introduction

Author: Haidong Xu

The frontend of this project is built using Next.js v14, a powerful React framework for server-side rendering and static site generation. It is hosted on Netlify, providing continuous deployment and a global CDN for fast and reliable performance. Below are the frameworks and dependencies that we used in this project to deliver a powerful website.

  • Next.js 14 : A React framework for building server-side rendered and static web applications. It provides features like server-side rendering, static site generation, and API routes, making it a powerful tool for building modern web applications.
  • NextUI v2 : A collection of UI components for React. It offers a set of customizable and accessible components that help in building beautiful and responsive user interfaces quickly.
  • Tailwind CSS : A utility-first CSS framework for rapid UI development. It provides low-level utility classes that can be composed to build any design directly in your markup.
  • Tailwind Variants : A library that extends Tailwind CSS with additional variants, allowing for more complex and dynamic styling options.
  • TypeScript : A strongly typed programming language that builds on JavaScript. It adds static types to JavaScript, enabling developers to catch errors early and improve code quality and maintainability.
  • Framer Motion : A library for creating animations in React. It provides a simple and declarative API for animating components, making it easy to create complex animations and interactions.
  • next-themes : A library for managing themes in Next.js applications. It provides a simple API for toggling between light and dark themes and persisting the user's theme preference.
  • leaflet : An open-source JavaScript library for interactive maps. It is lightweight, easy to use, and supports a wide range of map features and plugins.
  • react-leaflet : A React wrapper for Leaflet. It allows you to use Leaflet's mapping features in React applications, providing a set of React components for creating interactive maps.
  • Highcharts : A JavaScript charting library for creating interactive charts. It supports a wide range of chart types and is highly customizable, making it a popular choice for data visualization.
  • highcharts-react : A React wrapper for Highcharts. It allows you to use Highcharts in React applications, providing a set of React components for creating interactive charts.
  • Tanstack Query : A powerful data-fetching library for React. It provides tools for fetching, caching, and synchronizing server data in your React applications, making it easier to manage server state.
  • Prettier : A code formatter to ensure consistent code style. It automatically formats your code according to a set of rules, making it easier to read and maintain.
  • ESLint : A tool for identifying and fixing problems in JavaScript code. It helps you enforce coding standards and catch errors early, improving code quality and maintainability.
  • Husky : A tool that helps you manage Git hooks easily. It allows you to run scripts before committing or pushing code, ensuring code quality and enforcing standards.
  • PostCSS : A tool for transforming CSS with JavaScript plugins. It allows you to use future CSS features, lint your CSS, and more, by processing your stylesheets with various plugins.
  • url-loader : A webpack loader for importing files as data URLs. It allows you to inline files as base64-encoded URLs, reducing the number of HTTP requests for small files.
  • uuid : A library for generating unique identifiers (UUIDs). It provides simple and efficient methods for creating UUIDs, which are useful for identifying objects uniquely.
  • sharp : A high-performance image processing library. It allows you to resize, crop, and manipulate images quickly and efficiently, supporting a wide range of image formats.
  • react-highlight-words : A React component for highlighting words within text. It allows you to easily highlight search terms or other keywords in your text content.
  • react-markdown : A React component for rendering Markdown. It allows you to convert Markdown content into React components, making it easy to display formatted text in your application.
  • react-pdf : A React library for rendering PDF documents. It allows you to display PDF files in your React applications, providing components for viewing and interacting with PDF content.
  • rehype-sanitize : A plugin for sanitizing HTML. It helps you clean up and secure HTML content by removing potentially dangerous elements and attributes.
  • remark-gfm : A plugin for adding GitHub Flavored Markdown (GFM) support to Remark. It allows you to use GFM features like tables, strikethrough, and task lists in your Markdown content.