Xquisite

WebApp displaying Top 10 restaurants based on user preference and location

Conceive a web app that allows users to discover different activities in multiple locations. Starting from a point where a user has either searched for, or navigated to Rochester as a location, or was looking for one of the chosen activity. Using HTML, CSS, and JavaScript implement features learned in the course such as responsive images, local storage, JSON data, etc.

The Problem

My first step was to sketch and then design the web layout of the application. Once the look was somewhat determined, I used VSCode to fulfill the requirements using JavaScript and JSON files.

The Solution

My Role

Web Developer & Designer

Software Used

  • VSCode (Develop)

  • Figma (Design)

Wireframes / Figma Prototype

The design of my web app prioritizes a clean and simple aesthetic. The attached Figma frames and sketches reflect the early stages of selecting a color scheme and organizing the layout. While some navigation features are not yet implemented, they are intended to streamline the user experience by helping them easily refine their search. For example, the dessert icon in the top-left allows users to filter by food category.

The images provided focus on the home page for both mobile and web views, which share a similar layout with the favorites page. Since the screens are designed to be resizable, I opted for responsive cards with background images to ensure consistency in appearance, even when the view changes. This approach avoids the potential disruptions caused by separating text and images in the card.

Developing

Since the web app is centered around the "Top Ten Dessert Places in Rochester," users are welcomed with 10 tasty dessert options. Each responsive card can be clicked to reveal more details and offers the ability to favorite or bookmark the location, which then adds it to the user's favorites page.

The navigation bar, though not fully functional, includes icons such as the previously touched on dessert category filter and a location icon for updating the search area.

Visit the website for a better view at: Xquisite