Skip to content

aericki/breakinglocations-frontend

Repository files navigation

🏋️ Training Locations Registration Application

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.

📋 Features

  • 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.

🚀 Technologies

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

🔧 Installation

  1. Clone the repository:

    git clone https://github.com/aericki/breakinglocations-frontend.git
    cd breakinglocations-frontend
  2. Install dependencies:

    npm install

    or

    yarn add && yarn
  3. Start the frontend in the folder:

    npm run dev
  4. Access the application at http://localhost:5173.

📌 Usage

Location Registration

Home Page.

  1. Open the registration form.
  2. Click on the map to set the exact location, which will automatically fill in the address.
  3. Fill in the location details, if the address or city does not appear, enter it manually (name, address, city and phone).
  4. Complete the hCaptcha and click "Register."

⚙️ API Endpoints

  • POST /api/register: Registers a new training location.
  • GET /api/locations: Returns all registered locations.

🤝 Contributing

  1. Fork the project.
  2. Create a branch for your feature (git checkout -b feature/new-feature).
  3. Commit your changes (git commit -m 'Add new feature').
  4. Push to the branch (git push origin feature/new-feature).
  5. Open a Pull Request.

Created by Aéricki Ferreira with 💙
Instagram: @aery_abc