This is a project for a breaking training locations registration application, where users can register and view training locations on a map. The application uses hCaptcha to prevent spam and implements a search for municipalities and registered locations via the Nominatim API.
- Training Locations Registration: Allows users to register a training location by filling in information like name, address, city, state, and phone.
- Location Mapping: Users can click on the map to set latitude and longitude coordinates. The address is reverse-geocoded to display the corresponding address.
- Bot Protection: hCaptcha implementation to verify user authenticity during registration.
- Map Display and Navigation: View registered locations on an interactive map.
The main technologies and libraries used in this project are:
- React + TypeScript for building the interface
- React-Leaflet for map display and interactions
- hCaptcha for bot protection
- Axios for API communication
- Tailwind CSS for styling
-
Clone the repository:
git clone https://github.com/aericki/breakinglocations-frontend.git cd breakinglocations-frontend -
Install dependencies:
npm install
or
yarn add && yarn -
Start the frontend in the folder:
npm run dev
-
Access the application at
http://localhost:5173.
Home Page.
- Open the registration form.
- Click on the map to set the exact location, which will automatically fill in the address.
- Fill in the location details, if the address or city does not appear, enter it manually (name, address, city and phone).
- Complete the hCaptcha and click "Register."
- POST /api/register: Registers a new training location.
- GET /api/locations: Returns all registered locations.
- Fork the project.
- Create a branch for your feature (
git checkout -b feature/new-feature). - Commit your changes (
git commit -m 'Add new feature'). - Push to the branch (
git push origin feature/new-feature). - Open a Pull Request.
Created by Aéricki Ferreira with 💙
Instagram: @aery_abc