A Todo App built with React.js that helps you manage your tasks efficiently. The app also features a sleek Weather Card, providing current weather details with an interactive UI.
-
Task Management:
- Add, edit, complete, and delete tasks.
- Tasks are stored in localStorage to persist across sessions.
-
Weather Card:
- Displays current weather details in a modal view.
- Opens with a darkened and blurred background effect.
-
Responsive Design:
- Optimized for various screen sizes.
-
Interactive UI:
- Smooth hover effects and transitions for enhanced user experience.
Check out the deployed application: Todo App with Weather Feature
- Frontend: React.js, Tailwind CSS
- State Management: React
useState,useEffect, Context API - Icons: Custom SVG assets for weather and interactions
- Add Task Form: A simple input form for adding new tasks.
- Task List: Dynamic list of tasks with completion and deletion options.
- Weather Details: Displays current weather conditions in a clean, compact card.
- Modal Overlay: Appears over the main page with a blur and dark background.
- Clone the repository:
git clone https://github.com/your-username/todo-weather-app.git
- Navigate to the project directory:
cd todo-weather-app - Install dependencies:
npm install
- Start the development server:
npm run dev
- Weather API Integration: Fetch real-time weather data using an API like OpenWeatherMap.
- User Authentication: Add sign-in functionality to personalize user experience.
- Categorization: Allow categorization or tagging of tasks.
- Drag & Drop: Implement drag-and-drop for task reordering.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
- Thanks to React and Tailwind CSS for enabling rapid development.
- Inspired by productivity tools and weather apps.