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.
- 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.
- Frontend: React.js
- API: Airtable
- Styling: CSS with responsiveness supported.
- Node.js
- npm or yarn
- Airtable API Key and Base Configuration
-
Clone the repository:
git clone https://github.com/nata-kalina/react-todo-new.git cd todo-app
-
Install dependencies:
npm install
-
Configure your Airtable API details:
- Update VITE_AIRTABLE_API_TOKEN, VITE_AIRTABLE_BASE_ID, and VITE_TABLE_NAME with your Airtable details.
-
Running the App
- Execute the following command to start the development server:
npm run dev
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.