Giters

daironreijna / Landmark-Learning-API

This app is designed to allow users to see different landmarks within the USA. It shows a basic description and aerial view of the surrounding area as well as provides the user with an option to click “see more” to find out more information regarding the landmark.

Home Page:https://daironreijna.github.io/Landmark-Learning-API/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

bootstrap5google-maps-apigroup-projecthtml-css-javascriptweb-apiswikipedia-apicsshtmljavascript

Project: Landmark Learning Dashboard

Project Banner

Landmark-Learning-Dashboard License: MIT Landmark-Learning-Dashboard

Overview

Welcome to our group project! Landmark Learning is an Interactive Front-End Application, it's important for us as front-end web developers to be able to showcase our skills and knowledge.

The project team has used the skills and knowledge acquired during the bootcamp to build this web application from scratch. Our team has conceived and executed a design of a MVP of our project.

Landmark Learning solves a real-world problem by integrating data received from multiple server-side API requests.

In this project several technologies are used to bring a feature rich and exciting web project to life! As a project team we thought about what would be a interesting way to guide users into exploring the world a bit more. After a few PROJET IDEAS were brainstormed, we choose to implement two server side api's. Google's Aerial View API and Wikipedia's Wikimedia API to render a dynamic, responsive and interactive project.

USER STORY

As a user interested in exploring landmarks around the world, I want to use the Landmark Learning Dashboard to access information about various landmarks and view aerial videos of these landmarks. This will allow me to expand my knowledge about different places and have a visually engaging experience.

Table of Contents

Project Objectives

By the end of this project, we have been be able to:

  • Our ability to speak technically about the features that were implemented in our project.
  • Explain and execute git branching workflow in a collaborative project.
  • Resolve merge conflicts.
  • Explain agile software development.
  • Design, build, and deploy a client-side web application using GitHub Pages.
  • Prepare a professional presentation and repository README for our project.

Presentation

Landmark Learning presentation slides can be accessed in this repo, as a PDF or MP4 Video file.

Deployment

The Landmark Learning Dashboard Project is deployed at the following live URL:

Landmark Learning Dashboard

The GitHub repository for this project can be found at:

GitHub Repository


In order to use this webapp, you will need to
  1. Create your own API key by visiting https://developers.google.com/maps/documentation/aerial-view/get-api-key
  2. Create a config.js file in the asset/js folder
  3. Save the API key in the below format

Example:

var config = {
	googleAPIKEY: [YOUR_SECRET_API_KEY_GOES_HERE],
    wikipediaAPIKEY: [YOUR_SECRET_API_KEY_GOES_HERE]
};
// ===== after placing your API key ===========
var config = {
	googleAPIKEY: "14c5e5e260e3e3432d141deb7d150ec3",
    wikipediaAPIKEY: "eb7d150ec314c5e5e260e3e3432d141d"
};

Project Features

Our project has the following features:

  • Application uses at least two server-side APIs.
  • Application uses client-side storage to store persistent data.
  • Application doesn't use JS alerts, prompts, or confirms (uses modals instead).
  • Application uses Bootstrap.
  • Application is interactive (accepts and responds to user input).
  • Application user experience is intuitive and easy to navigate.
  • Application user interface style is clean and polished.
  • Application is responsive.
  • Uses Bootstrap.
  • Be deployed to GitHub Pages.
  • Be interactive (in other words, accept and respond to user input).
  • Use at least two server-side APIs.
  • Use client-side storage to store persistent data.
  • Be responsive.
  • Have a polished UI.
  • Have a clean repository that meets quality coding standards (file structure, naming conventions, best practices for class/id naming conventions, indentation, quality comments, and so on).
  • Have a quality README (including a unique name, description, technologies used, screenshot, and link to the deployed application).

Resources

Contributing

Coding and design completed by

headshot of Dairon Reijna
Dairon Reijna
🎨💻		 headshot of Kapil Rekhi
Kapil Rekhi
🎨💻		 headshot of Ishmam Wains
Ishmam Wains
🎨💻


We welcome contributions from the community to enhance this Portfolio Project. By participating in this project, you contribute to a vibrant and inclusive environment. To ensure a positive experience the code of conduct we will adhere to is based on The Contributor Covenant. Please review and follow these guidelines when contributing.

Accessibility Testing

As leaders in front-end web development we aim to develop websites that are built mobile first, with accessibility in prime focus. Should you have any feedback please let us know. It would also be helpful for users to test our project website for accessibility. For further details please visit this page: Accessibility Testing and Inclusive Design.

License

This project is licensed under a MIT License.

© 2023 - Kapil Rekhi, Dairon Reijna, Ishmam Wains.

About

This app is designed to allow users to see different landmarks within the USA. It shows a basic description and aerial view of the surrounding area as well as provides the user with an option to click “see more” to find out more information regarding the landmark.

https://daironreijna.github.io/Landmark-Learning-API/

bootstrap5google-maps-apigroup-projecthtml-css-javascriptweb-apiswikipedia-apicsshtmljavascript

License:MIT License

Languages

Language:HTML 82.0%Language:JavaScript 12.0%Language:CSS 6.0%