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.
- Overview
- Project Objectives
- Presentation
- Deployment
- Project Features
- Contributing
- Resources
- Accessibility Testing
- Licence
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.
Landmark Learning presentation slides can be accessed in this repo, as a PDF or MP4 Video file.
The Landmark Learning Dashboard Project is deployed at the following live URL:
The GitHub repository for this project can be found at:
In order to use this webapp, you will need to
- Create your own API key by visiting https://developers.google.com/maps/documentation/aerial-view/get-api-key
- Create a config.js file in the asset/js folder
- 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"
};
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).
- DAVE MCKAY (2022) How to Rename a Branch in Git
- W3Schools (n.d.) Git Tutorial > Git Branch Merge
- Zell Liew (2019) How I style my websites with my favorite CSS resets
- edx (2023) Full Stack Blog - server-side APIs
- Bird Call UX (2021) What is UX, UI and Usability?
- WikiMedia API Portal (n.d.) Getting Started with Wikimedia APIs
- Wikimedia (n.d.) API catalog > Browse all Wikimedia APIs.
- StackOverFlow (2017 updated 2023) Why is .gitignore not ignoring my files?
- Tim Wheeler (2018) Wikipedia API Tutorial Here's a crash course on APIs using the Wikipedia API. Get a grasp on how to use APIs for your application.
- Wikimedia API portal (2023, June 16th) Core REST API - Discover and interact with free knowledge from across Wikimedia projects.
- Google Maps Platform (2023) How does the Aerial View API work?
- Google Maps Platform (2020) Intro to Google Maps Platform
- Nicole Sauk (2021) How to Get a Google Maps API Key - Quick, Easy, and Free
- Google Maps Platform (2023) Announcing Photorealistic 3D Tiles and the Aerial View API to create immersive map experiences
- Google Maps Platform (2023) How to use data-driven, advanced styling capabilities to build immersive geospatial experiences
- Net Ninja (2021) Bootstrap 5 Crash Course Tutorial #16 - Modals
- Google Maps Platform (2023, 21 Sept) Documentation > Aerial View API overview
- Google Maps Platform (2023) Aerial View API > Lets you create and display aerial view videos rendered using Google's 3D geospatial imagery
- MDN Web Docs (n.d.) References > Web APIs > Fetch API > Using the Fetch API
- MDN Web Docs (n.d.) References > Web APIs > fetch() global function
- StackTuts (2023) How to use fetch within a for-loop, wait for results and then console.log it in Javascript
- Google Maps Platform (2023) Architecture Center > Visualize the Data > Engage Customers with Aerial View
- Material Design (n.d.) Choosing buttons
- Google Maps Platform (2023) Architecture Center > Enhance the accuracy of Address input for Aerial View
- Google Maps Platform (2023) Best Practices Using Aerial View API Web Services
- Google Maps Platform (2023) API Improvement Proposals > General AIPs > HTTP and gRPC Transcoding
- Matt Brightman (2023) The Aerial View API is now generally available. Google Maps Platform.
- Using the Fetch API with URLSearchParams in JavaScript
- Kris Koishigawa (2020) How to Use HTML to Open a Link in a New Tab
Coding and design completed by
Dairon Reijna 🎨💻 |
Kapil Rekhi 🎨💻 |
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.
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.
This project is licensed under a MIT License.
© 2023 - Kapil Rekhi, Dairon Reijna, Ishmam Wains.