- React
- Next.js
- Typescript
- TailwindCSS
- React query
- Postgres
- Docker
- Clonar el repositorio
- Instalar las dependencias con
npm install
- Correr el docker de postgres con
docker-compose up -d
- Correr el script de setup de la base de datos
- Correr el programa con
npm run dev
Script para crear la base de datos y la tabla de tareas
CREATE TABLE tasks (
id SERIAL PRIMARY KEY,
title VARCHAR(255) NOT NULL
);
INSERT INTO tasks (title) VALUES ('Tarea 1');
INSERT INTO tasks (title) VALUES ('Tarea 2');
INSERT INTO tasks (title) VALUES ('Tarea 3');
- Documentacion de React Query
- Documentacion de TailwindCSS
- Documentacion de Next.js
- Documentacion de pg (libreria para consultas al postgres)
Hacer los componentes y el layout basico de la aplicacion leyendo las tareas de la base de datos
Necesario:
- Editar la base de datos para almacenar el estado y fecha de las tareas
- Crear el endpoint para obtener las tareas
- Crear el componente de tareas
- Crear el componente de tareas individuales
- Crear el componente de layout
Poder editar y crear tareas nuevas en la aplicacion
Necesario:
- Crear un endpoint para agregar tareas
- Crear un endpoint para editar tareas
- Crear un endpoint para borrar tareas
- Crear el componente de formulario
- Modificar el componente de tareas para poder editarlas/borrarlas
- Actualizar las tareas luego de ser agregadas/editadas
Hasta ahora las tareas eran "globales" y cualquiera veia todas las tareas, para el siguiente paso vamos a hacer que las tareas sean por usuario.
El usuario crea poniendo el username y aprentando "Login", no es necesaria una contraseña, ni registro previo, ni queda guardada la sesion en cookies (solo un useState de la app).
Mientras el usuario no esta registrado, no ve ninguna tarea ni puede crearlas
Necesario:
- Crear el componente donde se especifica el username y almacenar el valor de login
- Actualizar la tabla de tareas para que tenga un campo de usuario
- Actualizar los endpoints para que las tareas sean por usuario
- Hacer que no se pueda crear tareas si no estas logeado
Agregar la posibilidad de ordenar las tareas por fecha y por estado
Necesario:
- Agregar un campo de fecha a las tareas
- Agregar un select para ordenar las tareas
Vamos a fingir delay en los endpoints para mas realismo, pero para mantener la aplicacion rapida vamos a usar optimistic updates con react query
Necesario:
- Agregar un input donde se pueda poner el delay
- Que los endpoints reciban este delay como parametro y lo fingan con un sleep
- Agregar optimistic updates a la lista de tareas para mantener la responsiness