Code Monkey home page Code Monkey logo

react-tools's Introduction

React Tools

visitor badge

React Tools is a project that provides a collection of tools and components built using popular technologies like React, React Router, and TailwindCSS. Also this project implement browser local storage so it didnt need any databases. React Tools offers features such as a Todo List, Note-taking, and Expense Tracking. This project is also my first react project. If you find any bugs please contact me, I'll try my best to fix it.

JavaScript React React Router TailwindCSS

Features

  • Todo List: Manage your tasks with a simple and intuitive todo list.
  • Note-taking: Take notes and organize your thoughts efficiently.
  • Expense Tracking: Keep track of your expenses and manage your finances.

Installation

  1. Clone the repository:

    https://github.com/Alvalens/react-tools.git
    
  2. Navigate to the project directory:

    cd react-tools
  3. Install dependencies:

    npm install
    
  4. Start the development server

    npm start

Usage

You can access these menu on home page on the navbar, feauture section and footer. You can also access those feauture by direclt type the url /todo /note and /expense-tracker.

Todo List

  • add new todo list: You can add new todo by pressing the new todo button
  • Edit existing todo list: Click the edit button on the right side of todo to modify it.
  • Remove todo: Use the delete button to remove a todo from the list.
  • Mark as complete: You can mark or unmark todo as complete by clicking the blue check button on each todo.
  • Clear Todo: Selete all of your todos

Note

  • Create new notes: You can create new notes by clicking new note button, you can start writing note after creating one.
  • Edit notes: Edit your by directly type in note card to update information.
  • Delete notes: Remove notes that are no longer needed by clicking the trash icon.
  • Clear Notes: Delete all of your notes

Expense tracker

  • Add new expense or income: Record your expenses or income by adding details.
  • Edit existing expenses or income: Edit the details of your recorded expenses or income.
  • Delete expenses or income: Remove expenses from your tracker.
  • Total balance: Auto calculated based on your expense and income.

Contributing

Contributions are welcome! If you find any issues or have suggestions, feel free to open an issue or submit a pull request.

License

This project is licensed under the GPL-3.0 License seethe LICENSE file for details.

react-tools's People

Contributors

alvalens avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

kriti7744

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.