todo_today Tailwind Templates

Todo_today

Todo Today is a cross-platform desktop ToDo application built with Tauri, ViteJS, TypeScript, React, and Tailwind CSS. It offers a modern, responsive user interface with basic ToDo functionalities such as adding, toggling, and deleting tasks. The application also includes proper exception handling for a seamless user experience.

# Todo Today

Todo Today is a cross-platform desktop ToDo application built with Tauri, ViteJS, TypeScript, React, and Tailwind CSS. It offers a modern, responsive user interface with basic ToDo functionalities such as adding, toggling, and deleting tasks. The application also includes proper exception handling for a seamless user experience.

Table of Contents

Features

  • Add ToDo: Add new tasks to your ToDo list.
  • Toggle ToDo: Mark tasks as completed or not completed.
  • Delete ToDo: Remove tasks from your ToDo list.
  • Responsive UI: Modern, responsive UI built with Tailwind CSS.
  • Exception Handling: Proper error handling for a smooth user experience.

Prerequisites

Installation

  1. Clone the repository:

    git clone https://github.com/alphadevking/todo_today.git
    cd todo_today
    
  2. Install dependencies:

    npm install
    
  3. Initialize Tauri:

    npx tauri init
    

Usage

Development

To start the development server and the Tauri application, run:

npm run tauri dev

Build

To build the application for production, run:

npm run tauri build

File Structure

todo-today/
├── src/
│   ├── components/
│   │   ├── Todo.tsx
│   │   └── TodoItem.tsx
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── src-tauri/
│   ├── tauri.conf.json
├── tailwind.config.js
├── index.html
├── package.json
└── README.md

Development

Adding a New ToDo

  • Todo.tsx: Main component for managing the list of todos and providing input for adding new todos.
  • TodoItem.tsx: Component for displaying individual todo items with options to toggle and delete.

Styling

  • Tailwind CSS: Utility-first CSS framework for styling the application. Configuration is defined in tailwind.config.js and index.css.

Configuration

  • ViteJS: Used for fast development and building of the project.
  • Tauri: Configured via tauri.conf.json for building the cross-platform desktop application.

Contributing

Contributions are welcome! Please fork the repository and create a pull request with your changes.

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature/your-feature-name).
  3. Commit your changes (git commit -m 'Add some feature').
  4. Push to the branch (git push origin feature/your-feature-name).
  5. Create a new pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.


Top categories

Loading Svelte Themes