Test

Find nearest cities. technical-test.pdf

Demo

Description

Develop a ReactJS and TypeScript web application allowing users to find the three nearest cities based on a selected city.

🛠️ Stack

Click to see details

• Typescript - JavaScript with syntax for types.
• React - The library for web and native user interfaces.

🚀 Getting Started

Click to see details

1. Clone this repository.

git clone git@github.com:Luchooo/find-nearest.git

2. Install the dependencies:

npm install

3. Run the development server:

npm run dev

4. Run tests:

npm run test

4. Open http://localhost:5173 with your browser to see the result 🚀

🧞 Commands

Click to see details

	Command	Action
⚙️	dev	Starts local dev server at localhost:5173.
⚙️	test	Run unit and integration tests.
⚙️	build	Build your production site to ./dist/.

🧠 Technical test

1. Funcionalidades clave

   • Autocompletado de ciudades: Cuando el usuario escriba en el campo de búsqueda, se debe mostrar un autocompletado con los nombres de las ciudades más cercanas.

   • Búsqueda de ciudades cercanas: Al seleccionar una ciudad de la lista, la aplicación debe buscar automáticamente las ciudades más cercanas y mostrarlas al usuario.

   • Visualización de resultados: Mostrar las ciudades más cercanas al usuario, con detalles como el nombre.

2. Good practices

   ✅ Use of types. ✅ Function Naming. ✅ Conventional commits. ✅ Patterns (Custom Hooks, Container/Presentational).
3. Librerias

   • TailwindCSS: Rapidly build modern websites without ever leaving your HTML.

   • Axios: A simple HTTP client based on promises for both the browser and Node.js:

   • Geolib: Library to provide basic geospatial operations like distance calculation.

   • React Testing Library: Builds on top of DOM Testing Library by adding APIs for working with React components.