https://github.com/agusscript/tradehelm-challenge

Front End challenge with React and TypeScript, SuperMarket list with localStorage
https://github.com/agusscript/tradehelm-challenge

frontend javascript react typescript

Last synced: 6 months ago
JSON representation

Front End challenge with React and TypeScript, SuperMarket list with localStorage

• Host: GitHub
• URL: https://github.com/agusscript/tradehelm-challenge
• Owner: agusscript
• Created: 2023-07-10T23:41:53.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-08-02T13:22:31.000Z (over 2 years ago)
• Last Synced: 2025-07-17T05:40:12.232Z (10 months ago)
• Topics: frontend, javascript, react, typescript
• Language: TypeScript
• Homepage: https://tradehelm-challenge-two.vercel.app
• Size: 869 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
![Tradehelm](./assets/tradehelm-logo.svg "TradeHelm")

En el camino desde mi casa al supermercado, mi cerebro pierde la capacidad de retener información, por ende necesito hacer una aplicación que se encargue de esa difícil tarea. No, no puedo usar Google Keep, Evernote, nada, soy dev, la tengo que hacer, además esto es un challenge así que agarrá la pala.

### La aplicación debe:

- Mostrar un formulario para agregar elementos a la lista.

- Poder borrar cada elemento de la lista independientemente.

- Mantener los elementos de la lista cuando vuelvo a la aplicación después de cerrarla.

> En caso de guardar los datos solo en `localStorage`, se debe simular un delay al cargar, guardar y borrar los elementos, como si interactuaramos con un servicio externo.

### Es necesario:

- Cumplir con las reglas de linting del .eslintrc

- Tipar el item de lista de supermercado.

- Cumplir con las especificaciones visuales.

### Es muy importante:

- Pensar en la experiencia de usuario, minimizar la cantidad de interacciónes necesarias para usar la aplicación.

- Ser ordenada/o a la hora de codear y estructurar archivos. Keep it simple.

### No es necesario, pero suma:

- Tipar todos los elementos que usa la aplicación.

- Agregar tests unitarios, con jest para funciones, con react-testing-library para componentes.

- Agregar tests de integración, con Cypress o afínes.

Cualquier adicional que contribuya a la aplicación sin complicarla, suma, dark mode por ejemplo.

### Se puede usar:

- Cualquier solución de estilos (CSS Modules, CSS Plano, SASS).

### Modalidad de entrega:

- Repositorio público subido a GitHub, Gitlab, Bitbucket.

- Link a la aplicación funcionando.

### Ejemplos:

> ![Vacío](./assets/screenshots/vacio.png "Vacío") > ![Formulario](./assets/screenshots/formulario.png "Formulario") > ![Lleno](./assets/screenshots/lleno.png "Lleno")

# Solution

![](assets/screenshots/desktop-view.png)

![](assets/screenshots/form-active.png)

![](assets/screenshots/form-items.png)

![](assets/screenshots/mobile-view.png)

### Link

- [Live site](https://tradehelm-challenge-two.vercel.app/)

### Built with



 

  

 

  

  

 

  

  

 

  

  

 



## Run the project locally

1. Clone this repository

2. Install dependencies

  ```sh

   npm install

   ```

3. Start the local server

  ```sh

   npm run dev

   ```

4. Open http://localhost:5173/ in your browser