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
-
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.
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).
This conceptual test has been developed using the following technologies:
- Front-end
The project requires:
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
Click on the following link GitHub page project.
- Geolocation permission
- Restaurants section
- Catalog section
- Search products section
- Checkout page
- Polish up interactions, UX, and responsiveness.
- Add unit tests, also e2e ones.
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
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
toplugin:@typescript-eslint/recommended-type-checked
orplugin:@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 theextends
list