This platform was created for food lovers. UFood allows users to explore restaurants, rate places they have visited, follow other users, and discover new culinary spots.
Make sure the following are installed on your machine:
- Git
- Node.js
- npm
node -v
npm -vInstall the project dependencies:
npm installStart the development server:
npm run devOpen the application in your browser:
http://localhost:5173/
Run the unit tests with:
npm run test- The application is responsive and supports different screen sizes.
- Deliverable 3 integrates authentication and protected features.
- Forms are validated in JavaScript before being submitted.
- Unit tests were implemented with Vitest.
- The application supports user token expiration and handles expired sessions by requiring the user to log in again when necessary.
The top navigation bar supports both logged-out and logged-in states.
- Access the home page
- Search restaurants
- Access the authentication page
- Access the home page
- Search restaurants
- Search users from the top navigation bar
- Access the user profile page
- Log out
The application includes an authentication page where a user can either log in or create an account.
- Log in with email and password
- Register with:
- name
- password
- Displays a clear error message when the email/password combination is invalid
- Validates form input on the client side before submission
- Supports token expiration handling
- By clicking the login/authentication option in the navigation bar
- By attempting a protected action while not logged in
The home page allows the user to browse restaurants using either a list view or a map view.
- Search restaurants by name or genre
- Filter restaurants by price range
- Browse restaurants in list mode
- Access a restaurant page by clicking a restaurant card
- Switch between:
- List view
- Map view
- Displays restaurants on an interactive map
- Allows the user to zoom in and out
- Allows the user to move around the map
- Supports restaurant search and filtering in map mode
- Supports search based on the user's current location
Some actions are only available when the user is logged in:
- Add a review for a visited restaurant
- Add a restaurant to a favorite list
If the user is not logged in, these actions are blocked and the interface invites the user to log in.
http://localhost:5173/- By clicking the UFood logo in the top left corner
- By returning from certain navigation flows to the home page
The restaurant page displays detailed information about a selected restaurant.
- Displays restaurant information such as:
- address
- opening hours
- ratings
- price range
- genres
- Displays restaurant photos
- Displays an interactive map showing the restaurant location
- Lets logged-in users add a review for a restaurant they have visited
- Lets logged-in users add a restaurant to one of their favorite lists
http://localhost:5173/restaurant/{restaurantId}- By clicking a restaurant card on the home page
- By clicking a restaurant from the profile page or favorite lists
The user profile page is available to logged-in users.
- Displays user statistics
- Displays the recently visited restaurants
- Displays favorite restaurant lists
- Displays the list of followers
- Displays the list of followed users (following)
http://localhost:5173/user- By clicking the profile image/button in the navigation bar after logging in
When logged in, the user can search for other users and visit their profile pages.
- View another user's profile
- Follow that user
- Unfollow that user
http://localhost:5173/user/{userId}- Type a user name in the top navigation bar search
- Click one of the suggested results or enter the full username and press enter
- Open the selected user's profile page
The top navigation bar supports autocomplete for user search while the user is typing.
- As the logged-in user types in the top search bar, matching user results are displayed automatically
- The user can click a suggested result to access that user's profile
- Log in
- Use the search bar in the top navigation bar
- Start typing the name of a user
- Suggestions that contains the characters in the search bar will appear under the search bar
- The suggestion list is scrollable
The restaurant page displays recommendations for similar restaurants near the bottom of the page.
- Recommendations are generated using the current restaurant's first genre
- The application requests restaurants from the API with the same genre tag as the main genre tag of the current restaurant
- The current restaurant is removed from the results
- The remaining restaurants are shuffled before being displayed
- Open any restaurant page
- Scroll to the bottom of the page
- The Recommendations section will display 3 suggested restaurants at random
- Click one of the suggested restaurant cards to navigate to its page
URL: http://localhost:5173/
Access: direct URL, UFood logo, logout redirection
Access: click the authentication/login option in the navigation bar
URL: http://localhost:5173/restaurant/{restaurantId}
Access: click any restaurant card from the home page
URL: http://localhost:5173/user
Access: log in, then click the profile image/button in the navigation bar
URL: http://localhost:5173/user/{userId}
Access: log in, type in the top navigation bar search, then select a user from the autocomplete results
- Protected actions are unavailable when the user is not logged in.
- The interface prompts the user to authenticate before performing restricted actions.
- API errors may redirect the user to an error page with information about the issue.
- Some features depend on the data currently returned by the API.
- Recommendation quality depends only on the first genre tag associated with the current restaurant.