💰💸💵 Planificador de gastos 💰💸💵

👇🏻 Ir al sitio web aquí 👇🏻

Planificador de gastos APP React/Vite

Es una aplicación para el control y seguimiento de gastos y presupuestos, está app le permitirá al usuario registrar un presupuesto diario, semanal o mensual.

Con dicho presupuesto se actualizará la gráfica del porcentaje gastado y podremos ver el presupuesto, la cantidad disponible y el dinero que hemos gastado.

Por otra parte podremos registrar gastos los cuales pueden llevar un nombre o descripción, una cantidad o el dinero que nos costo y una categoría

La aplicación nos permitirá ver la lista de gastos realizados y también nos permitirá filtrar gastos por categoría para poder visualizar los gastos de una manera már organizada

Para levantar el proyecto

1.- Debemos descargar o clonar el repositorio de Github

Para hacer esto podemos hacer dos cosas la primera es por terminal entrar a la ruta en la que queremos crear la carpeta y el repositorio, agregar el código git clone pegar el link que nos brinda github en el botón code del repositorio y un . esto para crear dentro de la carpeta los archivos y carpetas del repositorio, posteriormente lo debemos abrir en un editor de código

git clone https://github.com/PauliVr/planificador-gastos.git .

La segunda forma sería descargar el ZIP del proyecto, descomprimirlo y abrirlo con un editor de código

2.- Debemos instalar todas las dependencias del proyecto corriendo el comando npm install

3.- Debemos correr la aplicación de React con Vite

npm run dev

Lo que más me gusto del proyecto

👩🏻‍💻 Dar estilos de una forma más manual, asi como usar dependencias para crear interacciones como el deslizar.

👩🏻‍💻 Utilizar elementos gráficos que a los usuarios les permitieran ver de una forma más visual e interactiva el cambio del estado de la aplicación

👩🏻‍💻 Me gustó mucho reforzar mis conocimientos en React y utilizar funcionalidades como LocalStorage, ReactCirucularProgressBar y Swipeable List

Tecnologías

(Techs Skills)

👩🏻‍💻 React
👩🏻‍💻 HTML
👩🏻‍💻 CSS
👩🏻‍💻 JavaScript
👩🏻‍💻 JSX
👩🏻‍💻 LocalStorage
👩🏻‍💻 Circular Progress Bar
👩🏻‍💻 Swipeable List

Conocimientos reforzados

🖥 Manejo Hooks (useEffect/useState)
🖥 Manejo Props
🖥 Uso de Circular Progress Bar
🖥 Swipeable list
🖥 Manipulación dinámica del DOM
🖥 Condicionales (If y ternarios)
🖥 HTML semántico
🖥 Renderizado condicional
🖥 Creación de Components
🖥 Array Metods (.filter, .map)
🖥 Selectores y eventos del DOM
🖥 CSS (Flexbox CSS, CSS Grid, selectores de CSS)
🖥 Box Model
🖥 Responsive Web Design
🖥 Uso de funciones
🖥 Uso de Strings, Array y Objetos
🖥 Uso de datos primitivos

Conocimientos adquiridos

💻 Swipeable list y React Circular Progress Bar
💻 React
💻 Vite

EXTRAS

🎨 Markdown
🎨 Despliegue con Netlify

Habilidades blandas

(Life Skills)

💪🏻 Disciplina
💪🏻 Resolución de problemas
💪🏻 Resiliencia
💪🏻 Comunicación eficaz

Desarrolladora

👩🏼‍💻 PAULETTE VILLEGAS