NextJS & Project Structure

This section contains some relevant general information for our NextJS project, including the projects this codebase builds upon and how this repository is structured.

First, this is a NextJS project, which itself is a React framework. NextJS has a well structured and comprehensive Documentation. React uses components, which are elements reusable throughout the application. This application uses components from shadcn/ui (https://ui.shadcn.com/docs/components). Typescript is used to have static typing and type annotations, which leads to cleaner and more robust code code. Tailwind CSS is used for simple and consistent styling via setting the classNameattribute of the HTML elements. For a consistent and visually pleasing experience, we use icons from Lucide (https://lucide.dev/icons/).

The app directory contains multiple subdirectories corresponding to the structure of the URL. The page.tsx file of the corresponding directory is rendered when requested by the client (e.g., login/page.tsx for /login). layout.tsx is applied to every page and includes features like authentication and showing or hiding the navigation bar. globals.css defines custom CSS classes to be used throughout the app, especially the tooltips to display further information when hovering over a chart or text. types.ts defines the types used throughout the app, which is currently only the Trashbin type. All API responses from the backend containing trashbin data will be mapped to this type, facilitating a standardized handling throughout the app. New types, e.g., for the trashbin project data could be added here.

The components directory contains components created by our team - like Map, LineChart, NoiseChart, and LoadingComponent and two subdirectories. The Heatmap directory contains all files needed for the Heatmap, which is displayed on the Overview page of the trashbin projects, and was adapted from https://www.react-graph-gallery.com/heatmap. In the ui directory, all components installed from shadcn/ui are placed.

The public directory contains static images of the website, e.g., the ones used as markers shown on the map.

The .env file located in the root directory of the code contains the environment variables. All variables which should be accessible on the client side need to be prefixed by NEXT_PUBLIC (see here). The variable NEXT_PUBLIC_BACKEND_URL must be set to the URL for accessing the backend, e.g. http://localhost:5001 when running the backend locally.