Logo Final_dark-01.png
CravingCompass_LandingPage.jpg

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.

CravingCompass_ResultsPage.jpg

Search results are displayed on an interactive map.

rESULTS pAGE

CravingCompass_LandingPage_browseCuisine

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.

MoodBoard.png

An initial mood board established a fun, adventurous overall style befitting the exploration of international cuisines the app is meant to foster.

Mood Board

Web 1920  List Results result detail 2 –

Subsequent high-fidelity wireframes implemented brand colors, fonts, and

custom graphic elements.

High-Fidelity

Wireframes

Vietnamese_Pho.png
Meals.png
Italian_Pasta.png
USA_BBQ.png
Belgium_MoulesFrites.png

Custom icons represent different types of cuisines and meals for browsing.

Icons

Web 1920  List Results – Mouseover highl

Initial wireframes established the layouts of components and the user's flow through the application.

Low Fidelity Wireframes

Style_Tile_CravingCompass-01.png

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