Summarize your project's purpose, problem solved, key features, user benefits, development context, and main technologies used.
Example:
This client-side JavaScript web application provides real-time weather updates for cities worldwide. It simplifies accessing weather information through an intuitive mobile-first interface, allowing users to input a city name and receive data on temperature, humidity, and conditions.
Developed for the [Course Name] course, applying User-Centred Design practices, agile project management processes, integrating a weather API, and Firebase backend services.
Example:
- Real-time weather updates for any city.
- Responsive design for desktop and mobile.
- Displays temperature, humidity, and weather conditions.
- Frontend: HTML, CSS, JavaScript
- Build Tool: Vite
- Backend: Firebase for hosting
- Database: Firestore
To run the application locally:
- Clone the repository.
- Install dependencies by running
npm installin the project root directory. - Start the development server by running the command:
npm run dev. - Open your browser and visit the local address shown in your terminal (usually
http://localhost:5173or similar).
Once the application is running:
- 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.
What this gives you:
- A single source of truth for the navbar and footer
- Same markup reused across all pages with
<site-navbar>and<site-footer> - Easy customization by editing a single JavaScript file per component
How to use it on any HTML page (e.g., index.html, skeleton.html):
-
Import the components (in
<head>):<script type="module" src="/src/components/site-navbar.js"></script> <script type="module" src="/src/components/site-footer.js"></script>
Also load global scripts:
<script type="module" src="/src/app.js"></script>
Notes:
- Bootstrap CSS and JS are imported in
src/app.jsvia ES modules, so you don’t need extra<link>or<script>tags in HTML. - Vite handles module loading during development with
npm run dev.
- Bootstrap CSS and JS are imported in
-
Drop the custom elements where you want them to render:
<!-- our own navbar goes here --> <site-navbar></site-navbar> <!-- Main content goes here --> <!-- our own footer goes here --> <site-footer></site-footer>
-
Customize the shared markup once:
- Edit
src/components/site-navbar.jsto change the navbar (brand, links, etc.) - Edit
src/components/site-footer.jsto change the footer
Every page using
<site-navbar>and<site-footer>will automatically reflect your changes. - Edit
Example:
my-project/
├─ public/
│ └─ images/
├─ src/
│ ├─ components/
│ │ ├─ site-footer.js ← shared footer Web Component
│ │ └─ site-navbar.js ← shared navbar Web Component
│ ├─ styles/
│ │ └─ style.css
│ ├─ app.js ← imports Bootstrap + global styles
│ ├─ authentication.js
│ ├─ firebaseConfig.js
│ └─ loginSignup.js ← login/signup UI logic
├─ login.html
├─ index.html
└─ skeleton.html
- Your Name - BCIT CST Student with a passion for creating 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.
Example:
- Weather data sourced from OpenWeatherMap.
- Code snippets for ___ algoirthm were adapted from resources such as Stack Overflow and MDN Web Docs.
- Icons sourced from FontAwesome and images from Unsplash.
Example:
- Currently, the app only supports city-based weather searches.
- Limited to basic weather parameters like temperature, humidity, and conditions.
- The user interface can be further enhanced for accessibility.
Example:
- Add support for location-based weather detection using GPS.
- Implement additional weather parameters like wind speed and UV index.
- Create a dark mode for better usability in low-light conditions.
- Integrate user accounts for saving favorite locations.