Animal Spotting Web Application is a comprehensive project comprising both frontend and backend components that work together to provide a seamless user experience for managing and tracking animal sightings and trails. This project allows users to interact with animal data, create sightings, and explore various trails. Below, you will find an overview of the project, its purpose, technologies used, and instructions on getting started.
The Animal Spotting Web Application is a full-stack web application developed to demonstrate the concepts and tools used to build frontends with React and backends with Node.js and Express.
Please be aware that this project is intended for educational purposes and will require additional enhancements to be in a production-ready state. It serves primarily as a reference for students looking to learn about fundamental web development techniques and technologies, including React, Node.js, Express, and API integration.
This project relies on various technologies and libraries used in both the frontend and backend components.
-
React: A JavaScript library for building component based user interfaces.
-
React Router DOM: A library for adding routing functionality to React applications.
-
DaisyUI: A UI component library for tailwindcss.
-
vite: A build tool that serves your code via native ES modules with dynamic imports.
-
tailwindcss: A utility-first CSS framework for rapidly building custom designs.
-
Express: A fast and minimalist web framework for Node.js, used for handling routing, middleware, and HTTP request/response management.
-
bcryptjs: A library for secure password hashing.
-
cors: Middleware for enabling cross-origin resource sharing.
-
express-fileupload: Middleware for handling file uploads.
-
mysql2: A Node.js-based MySQL client library.
-
uuid: A library for generating UUIDs.
-
xml2js: A library for parsing XML data.
To get started with the Animal Spotting Web Application, follow these steps:
-
Install dependencies:
npm install
-
Set up your database (sample DB in
mysql-dump/animal-spotting-sample-db.sql
) and configure the connection in thebackend/src/database.js
. -
Start the backend API server :
npm run backend
-
Start the frontend vite development server :
# In another terminal npm run frontend
Disclaimer: This source code is provided without any warranty, express or implied. Usage of the resources within this repository is at your own risk.