React + Vite

Todo App

Description

This Todo App is a simple yet powerful tool designed to help users manage their daily tasks efficiently. Built with React and styled with pure CSS, this app provides a clear and interactive interface for tracking tasks, including adding, removing, and updating items.

Features

• View Todo List: Display all todo items fetched dynamically from Airtable.
• Add Todo Items: Users can add new tasks to the list.
• Remove Todo Items: Users can remove tasks they've completed or no longer need.
• Update Todo Items: Users can edit the details of existing tasks.
• Sorting Capability: Toggle between ascending and descending order of tasks based on the title.
• Responsive Design: Ensures that the app is usable on both desktop and mobile devices.

Technology Stack

• Frontend: React.js
• API: Airtable
• Styling: CSS with responsiveness supported.

Setup and Installation

Prerequisites

• Node.js
• npm or yarn
• Airtable API Key and Base Configuration

Installation

1. Clone the repository:

   git clone https://github.com/nata-kalina/react-todo-new.git
   cd todo-app
   

2. Install dependencies:

   npm install
   

3. Configure your Airtable API details:

   • Update VITE_AIRTABLE_API_TOKEN, VITE_AIRTABLE_BASE_ID, and VITE_TABLE_NAME with your Airtable details.

4. Running the App

   • Execute the following command to start the development server:

   npm run dev
   

Usage

Once the app is running, you can start adding, removing, and updating your todo items. Use the sort button to toggle the order of the items.