Restaurant browser application

This assessment aims to create a simple mini-app to check the restaurant's menus/products near the user (Endpoint services were already provided).

Note

❤️ Feel free to add any improvements or suggestions you consider.

Goals
Tech Stack
Installation and running the project
Samples
Next steps
React + Typescript + Vite specs

🎯 Goals

Display a list of restaurants. (Fetch those restaurants from an external service).
Each restaurant's detail section should list the meals/products offered.
Create a search section where users can filter out products offered by the restaurant.
Mocking an order by selecting items from the restaurant section.

Geolocation API:

To implement the solution, we are required to use the Geolocation API, and also inform the user which restaurant is closer to its current position (geolocalization).

Tech Stack

This conceptual test has been developed using the following technologies:

Front-end
- React
- TypeScript
- Vite
- Tailwind CSS
- DaisyUI

Installation and running the project

The project requires:

NodeJS

Clone the repository:

git clone https://github.com/christianjtr/restaurant-browser-app.git

Scripts:

Before executing these scripts, you must run npm install in the directory you just downloaded/cloned the codebase. Other scripts are in package.json file.

# Start the development environment
> npm run dev

# Build the project in development mode
> npm run build

# Build the project in production mode
> npm run build:prod

Samples

Live demo

Click on the following link GitHub page project.

Offline demo

Preview

Geolocation permission

Restaurants section

Catalog section

Search products section

Checkout page

Next steps

Polish up interactions, UX, and responsiveness.
Add unit tests, also e2e ones.

React + TypeScript + Vite

These specs were auto-generated by the framework.

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
};

Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
Optionally add plugin:@typescript-eslint/stylistic-type-checked
Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

christianjtr/restaurant-browser-app