Skip to content

SachinCoder11/TO-DO-WEB-APP

Repository files navigation

--> iTask - Manage Your Tasks <--

YOU CAN DIRECTLY ACCESS THIS PROJECT THROUGH THIS URL - https://tasknest-orcin.vercel.app/

updation.deletion.of.the.task.mp4
functoniality.of.TO.DO.APP.mp4
WORKING.OF.TO.DO.APP.mp4

Project Information

iTask is a task management application designed to help users organize their tasks effectively. It features a clean and intuitive interface built using React.js, enhanced styling with Tailwind CSS, and rapid development capabilities provided by Vite. Users can easily add, edit, delete, and manage their tasks, as well as set due dates to stay on track.

Key Features:

  • Task Management: Add, edit, and delete tasks.
  • Due Dates: Set due dates for each task.
  • Completion Tracking: Mark tasks as completed.
  • Persistent Storage: Saves tasks in local storage for persistence across sessions.
  • Responsive Design: Optimized for various screen sizes using Tailwind CSS.

Project Structure

SCT_WD_4-MASTER/
├── node_modules/         # Contains all npm packages
├── public/               # Public assets
│   └── vite.svg          # Vite logo
└── src/                  # Source files
    ├── assets/           # Images and other assets
    ├── components/       # React components
    │   ├── Navbar.jsx    # Navbar component
    ├── App.css           # Application styles
    ├── App.jsx           # Main application component
    ├── index.css         # Global styles
    ├── main.jsx          # Entry point for React
    ├── index.html        # HTML template
    ├── .gitignore        # Git ignore file
    ├── eslint.config.js   # ESLint configuration
    ├── package.json      # Project metadata and dependencies
    ├── package-lock.json # Lock file for npm
    ├── postcss.config.js  # PostCSS configuration
    ├── README.md         # Project documentation
    ├── tailwind.config.js # Tailwind CSS configuration
    └── vite.config.js    # Vite configuration

Installation

To run this project on your local machine, follow these steps:

Prerequisites

  • Node.js: Ensure you have Node.js installed. You can download it from nodejs.org.

Step 1: Clone the Repository

Clone this repository to your local machine:

git clone <repository-url>
cd SCT_WD_4-MASTER

Step 2: Install Dependencies

Run the following command to install all required dependencies:

npm install

Step 3: Start the Development Server

After installing the dependencies, start the development server with:

npm run dev

You can now view the application in your browser at http://localhost:3000.

Dependencies

This project requires the following dependencies:

  • react: A JavaScript library for building user interfaces.
  • react-dom: The entry point for DOM-related rendering paths.
  • vite: A fast build tool and development server.
  • tailwindcss: A utility-first CSS framework for styling.
  • postcss: A tool for transforming CSS with JavaScript plugins.
  • autoprefixer: A PostCSS plugin to parse CSS and add vendor prefixes.
  • uuid: A library for generating unique identifiers.

Install Command

If you want to install the dependencies manually, use the following commands:

npm install react react-dom
npm install -D vite tailwindcss postcss autoprefixer uuid

Usage

  • Adding a Task: Enter a task in the input field and click "Save".
  • Editing a Task: Click the edit icon next to the task to modify it.
  • Deleting a Task: Click the delete icon to remove a task.
  • Completing a Task: Check the box next to a task to mark it as completed.

License

This project is licensed under the MIT License.

Notes:

  • This updated version includes a Project Information section at the beginning, outlining the purpose and features of the iTask application.
  • Feel free to modify any content or add more details as necessary!