Taskify: A JavaScript repository from AgosVenezia

Estado del deploy:

Desarrollado con el software y las herramientas detalladas a continuación:

📖 Tabla de Contenidos

📖 Tabla de Contenidos
📍 Descripción
⚙️ Características
🗿 Integrantes
📑 Documentación
📁 Estructura del proyecto
🚀 Primeros pasos
🤝 Contribuir

📍 Descripción

Taskify es una herramienta creada en React JS que permite gestionar cualquier tipo de tareas, personalizarlas según la importancia y necesidades del usuario. Las tablas contienen las tareas manteniendo un orden lo que permite tener un fácil acceso y optimizar tiempo además de tener un diseño sencillo lo que simplifica la vista. Se destaca que cualquier persona puede utilizar el servicio con solo registrarse como usuario.

⚙️ Características

Esta aplicación fue desarrollada utilizando el stack MERN, que consiste en MongoDB, Express.js, React.js y Node.js. Proporciona funcionalidades completas de registro de usuarios, autenticación utilizando jsonwebtoken y almacenamiento seguro de contraseñas mediante el uso de técnicas de hasheo.

Funciones principales

Registro y Autenticación de Usuarios
Edición y eliminación de Perfil
Board de Tareas
Categorización de Tareas
Tema Personalizado

Por el lado del frontend, se utilizó ReactJS y TailwindCSS.

Librerías adicionales:
- react-icons: Bundle de librerías de íconos (fontawesome, materialdesign, heroicons)
- react-router-dom: Enrutador de react
- react-toastify: Componentes de notificaciones
- flowbite: Componentes interactivos para tailwind
- flowbite-react: Componentes hechos para flowbite y tailwind

En el backend, implementa un entorno Express serverless utilizando netlify functions para facilitar el deploy en dicha plataforma.

Librerías adicionales:
- mongodb: Driver oficial de MongoDB para Node.js
- mongoose: Mapeo relacional de objetos para MongoDB
- express-async-handler: Middleware de manipulación de excepciones
- express-fileupload: Middleware para carga de archivos
- axios: Cliente HTTP
- bcryptjs: Hasheo y verificación de contraseñas
- jsonwebtoken: Generador de tokens JSON
- cookie-parser: Parser de cookies

🗿 Integrantes

Nombre	Github
Germán Troncoso	https://github.com/nnamregg/
Agostina Celina Venezia Napolillo	https://github.com/AgosVenezia/
Verónica Pallas	https://github.com/VeronicaPallas/
Victor Lisandro Formica	https://github.com/Lisandrofor

📑 Documentación

Documentación del proyecto

📁 Estructura del proyecto

repo
├── netlify
│   ├── edge-functions-import-map.json
│   └── functions
│       ├── api.js
│       ├── config
│       │   └── db.js
│       ├── controllers
│       │   ├── taskController.js
│       │   ├── tasklistController.js
│       │   └── userController.js
│       ├── middleware
│       │   ├── authMiddleware.js
│       │   └── errorMiddleware.js
│       ├── models
│       │   ├── tasklistModel.js
│       │   ├── taskModel.js
│       │   └── userModel.js
│       ├── routes
│       │   ├── tasklistRoutes.js
│       │   ├── taskRoutes.js
│       │   └── userRoutes.js
│       └── utils
│           ├── generateToken.js
│           └── uploadAvatar.js
├── netlify.toml
├── package.json
├── package-lock.json
├── public
│   ├── favicon
│   │   ├── android-chrome-192x192.png
│   │   ├── android-chrome-512x512.png
│   │   ├── apple-touch-icon.png
│   │   ├── favicon-16x16.png
│   │   ├── favicon-32x32.png
│   │   ├── favicon.ico
│   │   └── site.webmanifest
│   ├── img
│   │   ├── background.jpg
│   │   ├── logocircular.png
│   │   └── logorectangular.png
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.js
│   ├── App.test.js
│   ├── components
│   │   ├── AuthModal.js
│   │   ├── CustomLightbox.js
│   │   ├── Header.js
│   │   ├── ProfileCard.js
│   │   ├── ProfileForm.js
│   │   ├── TaskForm.js
│   │   ├── Task.js
│   │   ├── TasklistForm.js
│   │   └── Tasklist.js
│   ├── context
│   │   ├── boardContext.js
│   │   └── userContext.js
│   ├── index.css
│   ├── index.js
│   ├── reportWebVitals.js
│   ├── screens
│   │   ├── Board.js
│   │   ├── Home.js
│   │   └── Profile.js
│   ├── setupTests.js
│   └── utils
│       └── PrivateRoutes.js
└── tailwind.config.js

17 directorios, 55 archivos

🚀 Primeros pasos

✔️ Requerimientos

Antes de comenzar, asegúrese de tener instalados los siguientes requisitos previos:

node

https://nodejs.org/en/download

netlify-cli

https://docs.netlify.com/cli/get-started/#installation

🔮 Instalación

Clonar el repositorio:

git clone https://github.com/nnamregg/react-trello-clon

Navegar al directorio del proyecto:

cd react-trello-clon

Instalar las dependencias:

npm install

Configurar el entorno de desarrollo de netlify functions:

# Configuración por archivo ./netlify.toml
# https://docs.netlify.com/configure-builds/file-based-configuration/
[functions]
  external_node_modules = ["express"]
  node_bundler = "esbuild"
[[redirects]]
  force = true
  from = "/api/*"
  status = 200
  to = "/.netlify/functions/api/:splat"

🎮 Correr el servidor de desarrollo

netlify dev

🤝 Contribuir

¡Las contribuciones son siempre bienvenidas! Siga estos pasos:

Bifurcar el repositorio del proyecto. Esto crea una copia del proyecto en su cuenta que puede modificar sin afectar el proyecto original.
Clone el repositorio bifurcado en su máquina local usando un cliente de Git como Git o GitHub Desktop.
Cree una nueva rama con un nombre descriptivo (por ejemplo, new-feature-branch or bugfix-issue-123).

git checkout -b new-feature-branch

Realice cambios en el código base del proyecto.
Confirme sus cambios en su rama local con un mensaje de confirmación claro que explique los cambios que ha realizado.

git commit -m 'Implementado nuevo feature.'

Envíe sus cambios a su repositorio bifurcado en GitHub usando el siguiente comando

git push origin new-feature-branch

Cree una nueva solicitud de extracción en el repositorio del proyecto original. En la solicitud de extracción, describa los cambios que ha realizado y por qué son necesarios. Los mantenedores del proyecto revisarán sus cambios y proporcionarán comentarios o los fusionarán en la rama principal.

AgosVenezia/Taskify