Elmo Hikes is a client-side JavaScript web application that helps users discover and explore hiking trails. The app displays a curated list of hike trails, each with details such as name, location, difficulty, and an image. Users can browse the list and mark their favorite trails for easy access later.
Developed for the COMP 1800 course, this project applies User-Centred Design practices and agile project management, and demonstrates integration with Firebase backend services for storing user favorites.
- Browse a list of curated hiking trails with images and details
- Mark and unmark trails as favorites
- View a personalized list of favorite hikes
- Responsive design for desktop and mobile
Example:
- Frontend: HTML, CSS, JavaScript
- Build Tool: Vite
- Backend: Firebase for hosting
- Database: Firestore
- Open your browser and visit
http://localhost:3000. - Browse the list of hiking trails displayed on the main page.
- Click the heart icon (or similar) to mark a trail as a favorite.
- View your favorite hikes in the favorites section.
elmo-hikes/
├── src/
│ ├── main.js
├── styles/
│ └── style.css
├── public/
├── images/
├── index.html
├── package.json
├── README.md
- Your Name - BCIT CST Student with a passion for outdoor adventures and user-friendly applications. Fun fact: Loves solving Rubik's Cubes in under a minute.
- Teammate Name - BCIT CST Student, Frontend enthusiast with a knack for creative design. Fun fact: Has a collection of over 50 houseplants.
- Trail data and images are for demonstration purposes only.
- Code snippets were adapted from resources such as Stack Overflow and MDN Web Docs.
- Icons sourced from FontAwesome and images from Unsplash.
- Limited trail details (e.g., no live trail conditions).
- Accessibility features can be further improved.
- Implement map view and trailhead directions.
- Add filtering and sorting options (e.g., by difficulty, distance).
- Create a dark mode for better usability in low-light conditions.
This project is licensed under the MIT License. See the LICENSE file for details.