Code Monkey home page Code Monkey logo

planificador-gastos's Introduction

💰💸💵 Planificador de gastos 💰💸💵

👇🏻 Ir al sitio web aquí 👇🏻

JavaScript HTML5 React

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.