Landing page
Custom graphic background. Logo, navigation bar, and search fields added via hand-coded HTML with custom Bootstrap 4 theming.
CravingCompass was created as a capstone project for the front-end web development track of LaunchCode's Coder Girl program.
For this project, I conceived, designed, and coded a single-page web application that allows users to search nearby restaurant menus for specific dishes.
Search results are displayed on an interactive map.
rESULTS pAGE
Users can also browse by cuisine or type of food using dynamically displayed categories and subcategories.
Browse
The project calls on two APIs--one to geocode the user's location and plot the locations of search results, and one to search menus for the requested dish.
An initial mood board established a fun, adventurous overall style befitting the exploration of international cuisines the app is meant to foster.
Mood Board
Subsequent high-fidelity wireframes implemented brand colors, fonts, and
custom graphic elements.
High-Fidelity
Wireframes
Custom icons represent different types of cuisines and meals for browsing.
Icons
Initial wireframes established the layouts of components and the user's flow through the application.
Low Fidelity Wireframes
A Style Tile consolidates the overall branding and establishes a vibrant, exploratory feel for the site.
Style Tile
To view my code and learn more about this project, visit its