This repository is for group 7's Project1 - Interactive Web Application: I'm Feeling. The main purpose of this project to build web application from scratch as a group. This app will execute a design that solves a real-world problem by integrating data received from multiple server-side API requests.
| Qabas Al Ani | Taoufik Ammi | Hannah Brown | Dionne Noella Barretto |
|---|---|---|---|
 |
 |
 |
 |
👉Watch - Project App Demo
👉Project Live URL
👉Project Plan/Proposal
👉Project Wire frame/Mockup
👉Project Presentation Deck
AS humans (for example: someone new to a city) we often
WANT to socialize and easily find places depending on our mood
SO as to be able to action and channel those feelings and satisfy our needs and desires by visiting corresponding nearby places and feel like they belong.
The following "I'm Feeling" App allows users to search for places relevant to their mood/feeling.
⏭️More feelings
⏭️Concatenate feeling results using Places API types property (like for travel - include bus, airways, trains etc to yield a compounded result)
⏭️Alternative search methods(zip-code, city name, text-based search)
⏭️Locally store - recently clicked on Cards (Places) and/or searched feelings
⏭️Dynamic ability for user to increase radius of search, if results are not great
⏭️Filter results (open now, distance, rating)
⏭️Responsiveness of the UI (especially on the smallest screens )
⏭️Contributor page (Email project team feedback)
⏭️Add additional contact methods for each contributor
⏭️Allow users to see directions / distance to the place card they select
⏭️When location is blocked at a modal for error alert
⏭️Present a spinning /loading page indicator whilst the page takes a couple of minutes to render users lat long ( especially when using laptop browsers indoors)
⏭️Fix the card image z index to be above all revealed cards if hovered upon
⏭️Revamp the site to be more modern day looking
First Screen when web app loads: 
If the User Blocks the location in the browser: 
When location of browser is allowed: 
Local Browser stores the Browser Location fetched: 
Clicking on a Feeling renders nearby Places in card form: 
Hovering over the card zooms in on the card,clicking a place unveils the rating & address of the place: 
All hoverable clickable elements turn blue (as opposed to white-text):
Motivate Me renders a modal with a quote by an author and the last day the quote was modified (notice the blurred out background): 
Mobile/Tablet View changes the number of card columns:
Footer gradient with marquee: 
Contributors Page:
As a group we were required to use everything we’ve learnt over the past six units to create a real-world front-end application that we’ll be able to showcase to potential employers. The project must fulfil the following requirements:
✔️ Use a CSS framework other than Bootstrap
👉 Materialize + CSS
✔️ Be deployed to GitHub Pages
👉See Project Resources section up top
✔️ Be interactive (i.e., accept and respond to user input)
👉User can click feeling buttons
✔️ Use at least two [server-side APIs](https://coding-boot-camp.github.io/full-stack/apis/api-resources)
👉We've used Maps - Places + GeoLocation and Motivation API's
✔️ Does not use alerts, confirms, or prompts (use modals)
👉Used Modals
✔️ Use client-side storage to store persistent data
👉Used to store browser lat and long
✔️ Be responsive
👉Used Materialize for responsiveness on small, medium, large screens
✔️ Have a polished UI
👉Done
✔️ Have a clean repository that meets quality coding standards (file structure, naming conventions, follows best practices for class/id naming conventions, indentation, quality comments, etc.)
👉 Done
✔️ Have a quality README (with unique name, description, technologies used, screenshot, and link to deployed application)
👉Done
Elevator pitch 🎤: a one minute description of your application
Concept 📖: What is your user story? What was your motivation for development?
Process ♻️: What were the technologies used? How were tasks and roles broken down and assigned? What challenges did you encounter? What were your successes?
Demo 💻: Show your stuff!
Directions for Future ⏭️ Development
Links 🔗: to the deployed application and the GitHub repository
This project is graded based on the following criteria:
🏁 Satisfies the following code requirements:
✔️ Application uses at least two [server-side APIs](https://coding-boot-camp.github.io/full-stack/apis/api-resources)
👉We've used Maps - Places + GeoLocation and Motivation API's
✔️ Application uses client-side storage to store persistent data.
👉Used to store browser lat and long and access it subsequently in the code
✔️ Application doesn't use JS alerts, prompts, or confirms (uses modals instead)
👉Used Modals
✔️ Application uses a CSS framework other than Bootstrap 👉Used Materialize
✔️ Application is interactive (accepts and responds to user input)
👉User can click feeling buttons
✔️ Application should be a unique and novel idea
👉Inspiration from "I'm Feeling" button on Google Search Engine
✔️ Group should clearly and concisely articulate your project idea
👉Check
✔️ Application deployed at live URL and loads with no errors
👉Check
✔️ Application GitHub URL submitted
👉Check
✔️ Repository has a unique name
👉Done
✔️ Repository follows best practices for file structure and naming conventions
👉Done
✔️ Repository follows best practices for class/id naming conventions, indentation, quality comments, etc
👉Done
✔️ Repository contains multiple descriptive commit messages
👉Done
✔️ Repository contains a quality README file with description, screenshot, and link to deployed application
👉Done
✔️ Application user experience is intuitive and easy to navigate
👉Check
✔️ Application user interface style is clean and polished
👉Check
✔️ Application is responsive
👉Check
✔️ Your group should present using Powerpoint or a similar presentation software
👉Check
✔️ Every group member should speak during the presentation
👉Check
✔️ Your presentation should follow the [Project Presentation Template](https://docs.google.com/presentation/d/10QaO9KH8HtUXj__81ve0SZcpO5DbMbqqQr4iPpbwKks/edit?usp=sharing)
👉Check
✔️ There are no major disparities in the number of GitHub contributions between group members
👉Check