Rock Sample Database

Forward

This project started after wanting to learn how to use maps in React, and my father's database needing a much needed front end update. I have reused his database without any additional changes and rebuilt a frontend that utilizes full CRUD operations, whereas he used to manually add images to directories and write SQL operations by hand.

Technologies Used

-React/TS with various packages
-Vite
-Nodejs + NPM
-Mantine Component Library
-OpenStreetMap + API
-MariaDB server
-pm2
-VSCode
-NGINX
-Git/Gitea

Features

Map

OpenStreeMaps provides the map data, leaflet.js is the underlying package for drawing.

The search is unified across major database fields to provide a comprehensive map search

Filters can be applied to narrow results as well

Catalog Management

All items in the database are managed from a table built using TanStack Table and Query

Images can be uploaded and renamed for search later

Technical

The page is being served through an NGINX reverse proxy, and the backend API server has been separated into it's own package so that it can be located on a different server if necessary. Relevant connection details are in .env files for the user to configure.

The user has the option to change the base url of the server so that they may choose to either serve it at the root of the domain, a subdomain, or a URI slug.

The page does not handle authentication directly, and relies on NGINX to handle an auth-request to allow a user to reach the page. If they do not have authorization, they are redirected to a 404.

The backend Node.js server and frontend Vite project have both been setup to run using pm2 as services.