Skip to content

wilbernp/todo-app

Repository files navigation

Frontend Mentor - Todo app solution

Esta es una solución al desafío de la Todo App en Frontend Mentor.

Tabla de contenidos

Screenshot


Tamaño Escritorio



Tamaño Movil

Funcionalidades

  • Ver el diseño óptimo para la aplicación según el tamaño de pantalla del dispositivo
  • Agregar un nuevo Todo a la lista


  • Marcar un Todo como completo


  • Marcar todos los Todos como completos


  • Eliminar un Todo de la lista


  • Eliminar los Todos completos


  • Filtrar por: todos, activos y completos


  • Alternar modo claro y oscuro

  • Arrastrar y soltar elementos de la lista para reorganizarlos
  • Mantener datos al recargar la pagina

Links

Herramientas y Tecnologias usadas

  • HTML5: Estructura de la Applicacion
  • CSS3: EStilos de la Applicacion
  • Javascript: Agregar funcionalidades
  • React: Libreria de Javascript
  • Vitejs: Generador de plantillas de React
  • Redux Toolkit: Manejador del estado de la Aplicacion
  • SortableJS: Funcionalidad de arrastrar y soltar
  • Local Storage: Mantener datos al recargar la pagina
  • Flujo de trabajo: Mobile-first

Correr el proyecto en local

Requerimientos

Instrucciones

  1. Abrir una terminal en su sistema
  2. Ejecutar el siguiente comando para clonar este repositorio:
git clone https://github.com/wilbernp/todo-app.git
  1. Moverse a la raiz del proyecto
cd todo-app
  1. Instalar las dependencias del proyecto
npm install
  1. Iniciar el servidor del proyecto
npm run dev
  1. Presionar CTRL + click en enlace http://localhost:5173/ o similar que aparecera en la consola y con eso se abrira una pestaña en el navegador