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.

1. Goals
2. Tech Stack
3. Installation and running the project
4. Samples
5. Next steps
6. 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

0. Geolocation permission

1. Restaurants section

2. Catalog section

3. Search products section

4. 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