Ui Overview
In this lesson, we'll explore the user interface of our restaurant review platform.
This walkthrough will show you how users will interact with the features we discussed in our project brief and domain overview.
Core Screens and Features
The application's interface centers around several key screens that work together to deliver the functionality.
The homepage features a navigation bar with a login button that integrates with Keycloak for authentication.
Below the navigation, restaurant cards display essential information including:
- An image of the restaurant
- The restaurant's name
- A 0-5 star rating
- The type of cuisine served
Restaurant Details Page
When users click a restaurant card, they're taken to a detailed view that includes:
- A prominent restaurant image
- An interactive map showing the restaurant's location
- The restaurant's average review rating
- A sortable list of customer reviews
- A "Write Review" button (requires authentication)
The review submission form allows users to:
- Select a star rating
- Write their review content
- Upload photos of their experience
- Submit their review
Search and Navigation
The platform includes several ways to find restaurants:
- A search bar for text-based queries
- Cuisine type filtering
- Star rating filters
- Pagination controls for browsing results
Restaurant owners can add new establishments through a dedicated form accessed via the top navigation menu, which includes fields for:
- Restaurant details
- Operating hours
- Location information
Summary
- Homepage displays restaurant cards with images, ratings, and cuisine types
- Restaurant details page shows location map, reviews, and submission form
- Search functionality supports search and filtering by rating
- Users can submit reviews with ratings, text, and photos
- Restaurant owners can add new establishments via a dedicated form
