Giter VIP home page Giter VIP logo

task-management's Introduction

Task Management Application

Overview

This is a Task Management Application built using React. It allows users to add, edit, delete tasks, and mark tasks as completed. The application utilizes React Router for navigation, React state for managing component functionalities, and LocalStorage to persist tasks even after a page refresh.

Project Structure

The project structure follows a typical React application structure:

  • src/components: Contains React components (TaskList, AddTaskModal, EditTaskModal, Task).
  • src/router: Contains the main Router component with React Router configuration.
  • src/utils/localStorage.js: Utility functions for saving and retrieving tasks from LocalStorage.
  • src/App.js: Main entry point of the application.
  • public: Static assets and HTML template.

Design Choices

Styling

The application uses a simple and clean CSS style. The layout is responsive, and basic styling is applied to enhance the user interface. You can find the styles in the respective component files.

State Management

React state is used within each component to manage their respective functionalities. React context or state lifting is employed to share state between components where necessary.

Routing

React Router is implemented for navigation between the task list, add task, and edit task pages.

LocalStorage

Tasks are saved in the browser's LocalStorage, ensuring that tasks persist even after a page refresh.

Testing

Unit tests for critical components (TaskList, AddTaskModal, EditTaskModal) are written using Jest, a popular testing library for React.

Additional Features

  • Sorting tasks based on priority or completion status.
  • Pagination for the task list.
  • Adding due dates to tasks.

Getting Started

  1. Clone the repository:

    git clone https://github.com/Satyam-23/Task-Management.git
    cd task-management
    
  2. Install dependencies:

    npm install
  3. Run the application:

    npm start

    The application will be accessible at http://localhost:3000.

Running Tests

To run tests, use the following command:

npm test

Contributing

Feel free to contribute to the project by opening issues or submitting pull requests. Your feedback is valuable!

image image image image

This README.md provides a basic structure, and you can expand on it based on your specific project details and requirements.

task-management's People

Contributors

satyams-23 avatar

Watchers

 avatar

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.