Hiking Routes & Events Application

🌿 About the Project

This Hiking Routes & Events Application is a platform designed for hiking enthusiasts in Catalonia, providing tools to:

• Discover hiking routes: View routes with detailed information, including starting and ending points, elevation gain, distance, and difficulty.
• Plan events: Add events to a calendar, specifying the route, date, and starting time.
• Visualize routes: Display routes on an interactive map powered by Mapbox.
• Manage routes: Add, edit, and delete routes effortlessly.

The project integrates a user-friendly interface, an interactive calendar, and a map to enhance the experience for hiking lovers.

---

Hiking_Paths_Demo.mp4

🛠️ Features

1. Routes Management

• Add new routes with key details: name, description, origin, destination, distance, elevation gain, and difficulty (low, medium, high).
• View all routes in a grid format, including their origin and destination.
• Edit or delete existing routes directly from the interface.

2. Interactive Map

• Display all routes on an interactive Mapbox map.
• View starting points as colored markers based on difficulty:
  • Green: Easy routes
  • Orange: Medium difficulty
  • Red: Challenging routes
• Click on markers to view additional route details in a popup.

3. Event Calendar

• View and manage events using a full calendar interface.
• Create events by selecting a date, specifying the starting time, and choosing a route.
• Edit or delete events directly from the calendar.

---

🔧 Technologies Used

Frontend

• React: Component-based library for building the user interface.
• React Router: Manage navigation between pages.
• React Calendar: Interactive calendar component.
• FullCalendar: Calendar with event management capabilities.
• Mapbox: Interactive maps for visualizing routes.
• Tailwind CSS: Styling the application with utility-first CSS.

Backend

• Node.js: Server-side JavaScript runtime.
• Express: Framework for building the REST API.
• MySQL: Relational database for storing routes and events.

Others

• Axios: Simplified HTTP requests.
• Chart.js: Visualize data with line and pie charts.

---

🔧 Installation and Setup

Follow these steps to clone and run the application:

1. Clone the Front-End and the Back-End Repository

git clone <https://github.com/JordiLara/ITACADEMY-8.0-React-Maps-Graphs-MySQL-Calendar-API.git>
git clone <https://github.com/JordiLara/ITACADEMY-8.1-Backend-React-Maps-Graphs-MySQL-Calendar-API.git>

2. Install Dependencies

# Install server (back-end) dependencies
npm install

# Install client (front-end) dependencies
npm install

3. Configure Environment Variables

Create .env files for both the client and server with the required API keys (e.g., Mapbox token) and database credentials.

4. Run the Application

# Start the server
npm run start

# Start the client
npm run dev

5. Access the Application

Open the link given when you run the client. (your local host, usually)

---

🔍 Roadmap

Future enhancements might include:

• User authentication to save personal preferences and events.
• Better design to better user experience.
• Add images.
• Export calendar events to external tools like Google Calendar.
• Add route ratings and reviews.
• Multi-language support.

---

📚 License

This project is open-source and available under the MIT License.

---

🔗 Repository Links

• Frontend: https://github.com/JordiLara/ITACADEMY-8.0-React-Maps-Graphs-MySQL-Calendar-API.git
• Backend: https://github.com/JordiLara/ITACADEMY-8.1-Backend-React-Maps-Graphs-MySQL-Calendar-API.git

---

Enjoy your hikes and make the most of this application!