{"id":26713404,"url":"https://github.com/ankit-nautiyal/task-manager-app","last_synced_at":"2026-04-11T05:31:12.156Z","repository":{"id":284425247,"uuid":"954677692","full_name":"ankit-nautiyal/Task-Manager-App","owner":"ankit-nautiyal","description":"📝Task Manager App: An Advanced React To-Do Application with API Integration ✅ A simple yet efficient Task Manager App built with React.js and Redux Toolkit for seamless task management. This project is designed with state management, asynchronous API calls using Axios, and a clean, responsive UI.","archived":false,"fork":false,"pushed_at":"2025-03-27T10:14:21.000Z","size":291,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T11:26:18.275Z","etag":null,"topics":["api","axios","css3","git","github","html5","javascript","material-ui","react-redux","react-router","react-router-dom","reactjs","redux","redux-thunk","redux-toolkit","vercel-deployment","weather-api"],"latest_commit_sha":null,"homepage":"https://task-manager-app-ankit.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ankit-nautiyal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-25T12:59:15.000Z","updated_at":"2025-03-27T10:14:24.000Z","dependencies_parsed_at":"2025-03-26T23:32:48.259Z","dependency_job_id":null,"html_url":"https://github.com/ankit-nautiyal/Task-Manager-App","commit_stats":null,"previous_names":["ankit-nautiyal/todo-list-react-redux","ankit-nautiyal/task-manager-react-redux","ankit-nautiyal/task-manager-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ankit-nautiyal/Task-Manager-App","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankit-nautiyal%2FTask-Manager-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankit-nautiyal%2FTask-Manager-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankit-nautiyal%2FTask-Manager-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankit-nautiyal%2FTask-Manager-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ankit-nautiyal","download_url":"https://codeload.github.com/ankit-nautiyal/Task-Manager-App/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankit-nautiyal%2FTask-Manager-App/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259668698,"owners_count":22893133,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","axios","css3","git","github","html5","javascript","material-ui","react-redux","react-router","react-router-dom","reactjs","redux","redux-thunk","redux-toolkit","vercel-deployment","weather-api"],"created_at":"2025-03-27T12:19:59.856Z","updated_at":"2025-12-30T20:07:29.230Z","avatar_url":"https://github.com/ankit-nautiyal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **Task Manager App: An Advanced React To-Do Application with API Integration** 📝✅  \n\nA simple yet efficient **Task Manager App** built with **React.js** and **Redux Toolkit** for seamless task management. This project is designed with **state management**, **asynchronous API calls using Axios**, and a clean, responsive UI.  \n\n---  \n\n## 🚀 **Features**  \n\n✔️ **Add Tasks** – Users can input new tasks effortlessly.  \n✔️ **Mark as Done/Undo** – Click to mark a task as complete (strikethrough styling). Clicking again will undo the action.  \n✔️ **Delete Tasks** – Remove tasks from the list with a single click.  \n✔️ **Persisted State** – The task list persists across sessions using Redux.  \n✔️ **Weather API Integration** – Fetches real-time weather data using Axios.  \n✔️ **Responsive Design** – Fully functional across all screen sizes.  \n\n---\n\n## 🛠 **Tech Stack**  \n\n- **Frontend:** HTML, CSS, JavaScript, React.js, Redux Toolkit, Material UI, React Router\n- **State Management:** Redux  \n- **API Handling:** Axios  \n- **Styling:** CSS Modules  \n- **Build Tool:** Vite (for fast development)  \n\n---\n## 📷 **Project Snapshots** \n![image](https://github.com/user-attachments/assets/94fd1253-4e01-42f6-8ff7-e8987c983f96)\n![image](https://github.com/user-attachments/assets/0d5a4392-6241-475d-baaf-af8f686269ff)\n![image](https://github.com/user-attachments/assets/bdb612df-e746-4dd8-9270-3029b85b9df8)\n![image](https://github.com/user-attachments/assets/8a6b45c9-d6f8-4809-93a3-ee536e65889e)\n![image](https://github.com/user-attachments/assets/c62bbcf3-9c1b-41c5-ba6b-d1fad36f40ab)\n![image](https://github.com/user-attachments/assets/bc14323a-166d-4513-9e64-6034c72d4aee)\n![image](https://github.com/user-attachments/assets/701df4c0-d5e8-4cb3-b3e2-5c56ae93e41e)\n![image](https://github.com/user-attachments/assets/a41191d8-4405-44ad-ad02-db230971e850)\n![image](https://github.com/user-attachments/assets/b1528230-3619-473e-81c9-4afa22cc7cd1)\n![image](https://github.com/user-attachments/assets/717860d9-3e6c-4714-80c3-d6867bbb9ad6)\n![image](https://github.com/user-attachments/assets/292f49c8-b31a-4925-b092-84fb7f3eddcb)\n![image](https://github.com/user-attachments/assets/60ee90fb-1569-4cef-b4f6-d1bf3747741f)\n![image](https://github.com/user-attachments/assets/21c62582-6ef1-4e09-8ec9-acd04da367c9)\n![image](https://github.com/user-attachments/assets/0b71ac59-d909-4983-8878-e59edcf5ebb0)\n![image](https://github.com/user-attachments/assets/05ae2409-bbba-4955-a848-282bf31e2d8f)\n![image](https://github.com/user-attachments/assets/4a8130b7-9a94-44f5-85d1-9bfa8a411419)\n![image](https://github.com/user-attachments/assets/73ce41fd-a396-4d7f-b9ec-2730398c7955)\n![image](https://github.com/user-attachments/assets/ba586c00-92fd-4b0f-af13-20880de55135)\n\n\n\n---\n## 🏗️ **Setup \u0026 Installation**  \n\n### **Prerequisites**  \nMake sure you have the following installed:  \n- **Node.js** (v16+)  \n- **npm** or **yarn**  \n\n### **Step 1: Clone the Repository**  \n```bash\ngit clone https://github.com/ankit-nautiyal/Task-Manager-App.git\ncd task-manager-app\n```\n\n### **Step 2: Install Dependencies**  \n```bash\nnpm install\n# or\nyarn install\n```\n\n### **Step 3: Set Up Environment Variables**  \nCreate a `.env` file in the root directory and add the following:  \n```\nVITE_API_URL=https://api.openweathermap.org/data/2.5/weather\nVITE_API_KEY=your_openweather_api_key\n```\n\n\u003e 🔹 **Replace `your_openweather_api_key` with your actual API key** from [OpenWeather](https://openweathermap.org/api).  \n\n### **Step 4: Run the App**  \nStart the development server:  \n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nThis will start the application on `http://localhost:5173/`.  \n\n---\n\n## 🏗️ **Folder Structure**  \n```\n📂 task-manager-app/\n├── 📂 node_modules/          # Dependencies (auto-generated)\n├── 📂 public/\n│   └── 📄 favicon.webp       # Website favicon\n├── 📂 src/\n│   ├── 📂 api/               # API-related files\n│   │   ├── 📄 axiosClient.js # Axios instance for API calls\n│   │   └── 📄 weatherAPI.js  # Weather API functions\n│   ├── 📂 app/\n│   │   └── 📄 store.js       # Redux store configuration\n│   ├── 📂 components/        # Reusable UI components\n│   │   ├── 📄 TaskInput.jsx  # Input field for tasks\n│   │   ├── 📄 TaskList.jsx   # Task list display\n│   │   └── 📄 WeatherInfo.jsx # Weather info component\n│   ├── 📂 features/          # Redux slices (state management)\n│   │   ├── 📄 authSlice.jsx   # Authentication state\n│   │   ├── 📄 taskSlice.jsx   # Task state management\n│   │   └── 📄 weatherSlice.jsx # Weather data management\n│   ├── 📂 pages/             # Main page components\n│   │   ├── 📄 auth.jsx       # Authentication page\n│   │   └── 📄 home.jsx       # Home page\n│   ├── 📂 styles/            # CSS Module styles\n│   │   ├── 📄 Auth.module.css\n│   │   ├── 📄 TaskInput.module.css\n│   │   ├── 📄 TaskList.module.css\n│   ├── 📄 App.css            # Global styles\n│   ├── 📄 App.jsx            # Root component\n│   ├── 📄 index.css          # Main CSS file\n│   ├── 📄 main.jsx           # Main entry point\n├── 📄 .env                   # Environment variables\n├── 📄 .gitignore             # Git ignore file\n├── 📄 eslint.config.js       # ESLint configuration\n├── 📄 index.html             # HTML entry point\n├── 📄 package.json           # Project metadata \u0026 dependencies\n├── 📄 package-lock.json      # Package lock file\n├── 📄 README.md              # Project documentation\n└── 📄 vite.config.js         # Vite configuration\n```\n---\n\n## 📌 **Usage**  \n\n1. **Add a new task**: Type in the input field and press enter.  \n2. **Mark task as done**: Click the task to toggle strikethrough styling.  \n3. **Delete task**: Click the ❌ button to remove it.  \n4. **Check the weather**: Enter a city name and get real-time weather data.  \n\n---\n\n## 🚀 **Build \u0026 Deploy**  \n\nTo create a production build:  \n```bash\nnpm run build\n# or\nyarn build\n```\n\nTo deploy on **Vercel**:  \n```bash\nvercel --prod\n```\nTo deploy on **Netlify**:  \n```bash\nnetlify deploy --prod\n```\n\n---\n\n## 📜 **License**  \nThis project is licensed under the **MIT License**.\n\n---\n\n## 🎯 **Future Improvements**  \n🔹 **Local Storage Integration** to persist tasks without Redux.  \n🔹 **Dark Mode Toggle** for a better UX.  \n🔹 **Animations** for smoother transitions.  \n\n---\n\n## 🤝 **Contributing**  \nIf you'd like to contribute:  \n1. Fork the repo  \n2. Create a feature branch (`git checkout -b feature-branch`)  \n3. Commit changes (`git commit -m \"Added new feature\"`)  \n4. Push to GitHub (`git push origin feature-branch`)  \n5. Open a Pull Request 🎉  \n\n---\n\n## ⭐ **Support \u0026 Feedback**  \nIf you like this project, don't forget to **star 🌟** the repo!  \nFor feedback, open an issue or contact me at: **nautiyalankit65@gmail.com**  \n\n---\n\n### 🎉 **Happy Coding!** 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankit-nautiyal%2Ftask-manager-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fankit-nautiyal%2Ftask-manager-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankit-nautiyal%2Ftask-manager-app/lists"}