https://github.com/JordiLara/HikingPaths-React-Maps-Graphs-MySQL-Calendar-API
Hiking routes website developed has a part of ITACADEMY bootcamp to overview backend concepts and work with maps, graphics and calendar events.
https://github.com/JordiLara/HikingPaths-React-Maps-Graphs-MySQL-Calendar-API
calendar-component context-api maps-api react tailwindcss typescript vitejs
Last synced: 4 months ago
JSON representation
Hiking routes website developed has a part of ITACADEMY bootcamp to overview backend concepts and work with maps, graphics and calendar events.
- Host: GitHub
- URL: https://github.com/JordiLara/HikingPaths-React-Maps-Graphs-MySQL-Calendar-API
- Owner: JordiLara
- Created: 2024-11-26T12:36:09.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-12-22T00:49:07.000Z (over 1 year ago)
- Last Synced: 2025-02-19T09:14:47.279Z (about 1 year ago)
- Topics: calendar-component, context-api, maps-api, react, tailwindcss, typescript, vitejs
- Language: TypeScript
- Homepage:
- Size: 1.39 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
---
https://github.com/user-attachments/assets/b10e3951-5f05-470b-9f1d-e3a7aadf5e9f
---
## 🛠️ 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](https://reactjs.org/): Component-based library for building the user interface.
- [React Router](https://reactrouter.com/): Manage navigation between pages.
- [React Calendar](https://github.com/wojtekmaj/react-calendar): Interactive calendar component.
- [FullCalendar](https://fullcalendar.io/): Calendar with event management capabilities.
- [Mapbox](https://www.mapbox.com/): Interactive maps for visualizing routes.
- [Tailwind CSS](https://tailwindcss.com/): Styling the application with utility-first CSS.
### **Backend**
- [Node.js](https://nodejs.org/): Server-side JavaScript runtime.
- [Express](https://expressjs.com/): Framework for building the REST API.
- [MySQL](https://www.mysql.com/): Relational database for storing routes and events.
### **Others**
- [Axios](https://axios-http.com/): Simplified HTTP requests.
- [Chart.js](https://www.chartjs.org/): 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**
```bash
git clone
git clone
```
### **2. Install Dependencies**
```bash
# 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**
```bash
# 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](https://opensource.org/licenses/MIT).
---
## 🔗 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!