{"id":23655790,"url":"https://github.com/JordiLara/HikingPaths-React-Maps-Graphs-MySQL-Calendar-API","last_synced_at":"2025-11-23T02:30:17.453Z","repository":{"id":264904448,"uuid":"894481004","full_name":"JordiLara/ITACADEMY-8.0-React-Maps-Graphs-MySQL-Calendar-API","owner":"JordiLara","description":"Hiking routes website developed has a part of ITACADEMY bootcamp to overview backend concepts and work with maps, graphics and calendar events.","archived":false,"fork":false,"pushed_at":"2024-12-22T00:49:07.000Z","size":1453,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-19T09:14:47.279Z","etag":null,"topics":["calendar-component","context-api","maps-api","react","tailwindcss","typescript","vitejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JordiLara.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-26T12:36:09.000Z","updated_at":"2024-12-22T00:49:10.000Z","dependencies_parsed_at":"2024-12-22T01:24:01.789Z","dependency_job_id":"c2478b6d-0dbe-4c23-a48b-b2fbde523976","html_url":"https://github.com/JordiLara/ITACADEMY-8.0-React-Maps-Graphs-MySQL-Calendar-API","commit_stats":null,"previous_names":["jordilara/itacademy-8.0-react-maps-graphs-mysql-calendar-api"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JordiLara%2FITACADEMY-8.0-React-Maps-Graphs-MySQL-Calendar-API","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JordiLara%2FITACADEMY-8.0-React-Maps-Graphs-MySQL-Calendar-API/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JordiLara%2FITACADEMY-8.0-React-Maps-Graphs-MySQL-Calendar-API/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JordiLara%2FITACADEMY-8.0-React-Maps-Graphs-MySQL-Calendar-API/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JordiLara","download_url":"https://codeload.github.com/JordiLara/ITACADEMY-8.0-React-Maps-Graphs-MySQL-Calendar-API/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239627244,"owners_count":19670844,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calendar-component","context-api","maps-api","react","tailwindcss","typescript","vitejs"],"created_at":"2024-12-28T20:15:48.881Z","updated_at":"2025-11-23T02:30:17.405Z","avatar_url":"https://github.com/JordiLara.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hiking Routes \u0026 Events Application\n\n## 🌿 About the Project\nThis **Hiking Routes \u0026 Events Application** is a platform designed for hiking enthusiasts in **Catalonia**, providing tools to:\n\n- **Discover hiking routes**: View routes with detailed information, including starting and ending points, elevation gain, distance, and difficulty.\n- **Plan events**: Add events to a calendar, specifying the route, date, and starting time.\n- **Visualize routes**: Display routes on an interactive map powered by Mapbox.\n- **Manage routes**: Add, edit, and delete routes effortlessly.\n\nThe project integrates a user-friendly interface, an interactive calendar, and a map to enhance the experience for hiking lovers.\n\n---\n\n\nhttps://github.com/user-attachments/assets/b10e3951-5f05-470b-9f1d-e3a7aadf5e9f\n\n\n![Screenshoot-1](/public/HikingPaths_home.png)\n![Screenshoot-2](/public/HikingPaths_rutas.png)\n![Screenshoot-3](/public/HikingPaths_mapa.png)\n![Screenshoot-4](/public/HikingPaths_calendario.png)\n![Screenshoot-5](/public//HikingPaths_graficos.png)\n---\n\n## 🛠️ Features\n\n### **1. Routes Management**\n- Add new routes with key details: name, description, origin, destination, distance, elevation gain, and difficulty (low, medium, high).\n- View all routes in a grid format, including their origin and destination.\n- Edit or delete existing routes directly from the interface.\n\n### **2. Interactive Map**\n- Display all routes on an interactive **Mapbox map**.\n- View starting points as colored markers based on difficulty:\n  - **Green**: Easy routes\n  - **Orange**: Medium difficulty\n  - **Red**: Challenging routes\n- Click on markers to view additional route details in a popup.\n\n### **3. Event Calendar**\n- View and manage events using a **full calendar interface**.\n- Create events by selecting a date, specifying the starting time, and choosing a route.\n- Edit or delete events directly from the calendar.\n\n---\n\n## 🔧 Technologies Used\n\n### **Frontend**\n- [React](https://reactjs.org/): Component-based library for building the user interface.\n- [React Router](https://reactrouter.com/): Manage navigation between pages.\n- [React Calendar](https://github.com/wojtekmaj/react-calendar): Interactive calendar component.\n- [FullCalendar](https://fullcalendar.io/): Calendar with event management capabilities.\n- [Mapbox](https://www.mapbox.com/): Interactive maps for visualizing routes.\n- [Tailwind CSS](https://tailwindcss.com/): Styling the application with utility-first CSS.\n\n### **Backend**\n- [Node.js](https://nodejs.org/): Server-side JavaScript runtime.\n- [Express](https://expressjs.com/): Framework for building the REST API.\n- [MySQL](https://www.mysql.com/): Relational database for storing routes and events.\n\n### **Others**\n- [Axios](https://axios-http.com/): Simplified HTTP requests.\n- [Chart.js](https://www.chartjs.org/): Visualize data with line and pie charts.\n\n---\n\n## 🔧 Installation and Setup\nFollow these steps to clone and run the application:\n\n### **1. Clone the Front-End and the Back-End Repository**\n```bash\ngit clone \u003chttps://github.com/JordiLara/ITACADEMY-8.0-React-Maps-Graphs-MySQL-Calendar-API.git\u003e\ngit clone \u003chttps://github.com/JordiLara/ITACADEMY-8.1-Backend-React-Maps-Graphs-MySQL-Calendar-API.git\u003e\n```\n\n### **2. Install Dependencies**\n```bash\n# Install server (back-end) dependencies\nnpm install\n\n# Install client (front-end) dependencies\nnpm install\n```\n\n### **3. Configure Environment Variables**\nCreate `.env` files for both the client and server with the required API keys (e.g., Mapbox token) and database credentials.\n\n### **4. Run the Application**\n```bash\n# Start the server\nnpm run start\n\n# Start the client\nnpm run dev\n```\n\n### **5. Access the Application**\n\n```\nOpen the link given when you run the client. (your local host, usually)\n```\n---\n\n## 🔍 Roadmap\n\nFuture enhancements might include:\n- User authentication to save personal preferences and events.\n- Better design to better user experience.\n- Add images.\n- Export calendar events to external tools like Google Calendar.\n- Add route ratings and reviews.\n- Multi-language support.\n\n---\n\n## 📚 License\nThis project is open-source and available under the [MIT License](https://opensource.org/licenses/MIT).\n\n---\n\n## 🔗 Repository Links\n- **Frontend**: [https://github.com/JordiLara/ITACADEMY-8.0-React-Maps-Graphs-MySQL-Calendar-API.git](#)\n- **Backend**: [https://github.com/JordiLara/ITACADEMY-8.1-Backend-React-Maps-Graphs-MySQL-Calendar-API.git](#)\n\n---\n\nEnjoy your hikes and make the most of this application!\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJordiLara%2FHikingPaths-React-Maps-Graphs-MySQL-Calendar-API","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJordiLara%2FHikingPaths-React-Maps-Graphs-MySQL-Calendar-API","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJordiLara%2FHikingPaths-React-Maps-Graphs-MySQL-Calendar-API/lists"}