| Technology Used | Resource URL |
|---|---|
| HTML | https://developer.mozilla.org/en-US/docs/Web/HTML |
| CSS | https://developer.mozilla.org/en-US/docs/Web/CSS |
| JavaScript | https://developer.mozilla.org/en-US/docs/Web/JavaScript |
| Bulma CSS Framework | https://bulma.io/documentation/ |
| jQuery | https://api.jquery.com/ |
| Yelp API | https://docs.developer.yelp.com/ |
| Mapquest API | https://developer.mapquest.com/documentation |
| Mapquest.js SDK | https://developer.mapquest.com/documentation/mapquest-js/v1.3/ |
| Git | https://git-scm.com/ |
Introducing our restaurant discovery app Pick4Me! This your one-stop solution for finding the perfect dining experience. With this app, you can input an address, set the desired radius, and specify the type of cuisine you're craving. The app then performs a real-time search, curating a list of four restaurants that match your criteria. Each result provides key information at a glance, but the magic happens when you click on the "Learn More" button. This gives you access to in-depth details about the restaurant, including recent ratings, address, and price. And if you've found the place you want to try, simply hit the "Pick Me!" button, and you will be directed to the direction page where you enter your starting address. This will provide you a route from your current location or any address you choose. Enjoy the convenience of finding your new favorite dining spot and getting there hassle-free with our restaurant discovery app!
Home Page Input: When the app initially loads you will be met with our input form (image 1a.) where you will enter the requested information (address, max radius, and food catagory). Once the information is filled out simply click on "Show me the Results" and you will be directed to the next page with the results.
Result Cards: Once you've been directed from the home page, you will see a series of result cards (image 1b.) with the top being the 1st pick. On the result card you will see the number pick and the name of the restaurant. On the bottom right, you will also see two buttons "Learn More" and "Pick Me". Click on "Learn More" to be directed to the Learn more page where you will see more details about the restaurant. If you wish to go directly to the directions page to get a route from your a location of your choice, you may click on "Pick Me" where you can get a route to the restaurant. More information on learn more and directions page in 'Highlighted Features'
Restaurant Review Search
This application utilizes the Yelp API to get the best local content and user reviews. The Yelp API allowed us to filter the searches and retrieve the business name, address, price, star rating, and the most recent star ratings.
Interactive Map:
This application utilizes MapQuest API and intergrates with Leaflet.js.
MapQuest.js allows for interative maps, geocoding, directions and traffic. This allowed us to create a custom Route Page which displays to the user, a general route to take.
1st Pick History:
This application utilizes the users local Storage to save the 1st pick shown for each search initiated. It also does not duplicate a 1st pick result. This allows the user to quickly select a previous search that was more fitting.
We used JavaScript to pull the information from local storage and create the History display.
Throughout our journey in web development, our group gained a wealth of knowledge and skills across various technologies. We honed our abilities in HTML, mastering the fundamental structure of web pages, and CSS for creating visually appealing designs. We also used JavaScript, enabling us to create interactive and dynamic web applications.
Bulma CSS framework became an essential tool in our toolkit, empowering us to streamline the design process by providing a responsive, mobile-first approach to building websites. This framework made it easier for us to create consistent and aesthetically pleasing layouts.
Our exploration extended to server-side APIs, allowing us to understand the server-client communication process and implement data retrieval and manipulation on the server. This knowledge proved invaluable in creating more robust and data-driven applications.
Incorporating third-party APIs opened up a world of possibilities. We discovered how to integrate external services seamlessly, enhancing our application with functionality.
Finally, we dived into Software Development Kits (SDKs), granting us access to advanced tools and libraries to streamline the development process. SDKs provided us with pre-built components and functions, reducing development time.
Collectively, our group's experiences with HTML, CSS, JavaScript, Bulma CSS Framework, server-side APIs, third-party APIs, and SDKs have enriched our understanding of web development, equipping us with refined skills to create innovative and powerful web applications.
Jorge Castro
Andy Zurek
Ezekiel Jamolin