https://github.com/ankit-nautiyal/task-manager-app
📝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.
https://github.com/ankit-nautiyal/task-manager-app
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
Last synced: 3 months ago
JSON representation
📝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.
- Host: GitHub
- URL: https://github.com/ankit-nautiyal/task-manager-app
- Owner: ankit-nautiyal
- Created: 2025-03-25T12:59:15.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-27T10:14:21.000Z (over 1 year ago)
- Last Synced: 2025-03-27T11:26:18.275Z (over 1 year ago)
- 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
- Language: JavaScript
- Homepage: https://task-manager-app-ankit.vercel.app/
- Size: 284 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **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.
---
## 🚀 **Features**
✔️ **Add Tasks** – Users can input new tasks effortlessly.
✔️ **Mark as Done/Undo** – Click to mark a task as complete (strikethrough styling). Clicking again will undo the action.
✔️ **Delete Tasks** – Remove tasks from the list with a single click.
✔️ **Persisted State** – The task list persists across sessions using Redux.
✔️ **Weather API Integration** – Fetches real-time weather data using Axios.
✔️ **Responsive Design** – Fully functional across all screen sizes.
---
## 🛠 **Tech Stack**
- **Frontend:** HTML, CSS, JavaScript, React.js, Redux Toolkit, Material UI, React Router
- **State Management:** Redux
- **API Handling:** Axios
- **Styling:** CSS Modules
- **Build Tool:** Vite (for fast development)
---
## 📷 **Project Snapshots**
---
## 🏗️ **Setup & Installation**
### **Prerequisites**
Make sure you have the following installed:
- **Node.js** (v16+)
- **npm** or **yarn**
### **Step 1: Clone the Repository**
```bash
git clone https://github.com/ankit-nautiyal/Task-Manager-App.git
cd task-manager-app
```
### **Step 2: Install Dependencies**
```bash
npm install
# or
yarn install
```
### **Step 3: Set Up Environment Variables**
Create a `.env` file in the root directory and add the following:
```
VITE_API_URL=https://api.openweathermap.org/data/2.5/weather
VITE_API_KEY=your_openweather_api_key
```
> 🔹 **Replace `your_openweather_api_key` with your actual API key** from [OpenWeather](https://openweathermap.org/api).
### **Step 4: Run the App**
Start the development server:
```bash
npm run dev
# or
yarn dev
```
This will start the application on `http://localhost:5173/`.
---
## 🏗️ **Folder Structure**
```
📂 task-manager-app/
├── 📂 node_modules/ # Dependencies (auto-generated)
├── 📂 public/
│ └── 📄 favicon.webp # Website favicon
├── 📂 src/
│ ├── 📂 api/ # API-related files
│ │ ├── 📄 axiosClient.js # Axios instance for API calls
│ │ └── 📄 weatherAPI.js # Weather API functions
│ ├── 📂 app/
│ │ └── 📄 store.js # Redux store configuration
│ ├── 📂 components/ # Reusable UI components
│ │ ├── 📄 TaskInput.jsx # Input field for tasks
│ │ ├── 📄 TaskList.jsx # Task list display
│ │ └── 📄 WeatherInfo.jsx # Weather info component
│ ├── 📂 features/ # Redux slices (state management)
│ │ ├── 📄 authSlice.jsx # Authentication state
│ │ ├── 📄 taskSlice.jsx # Task state management
│ │ └── 📄 weatherSlice.jsx # Weather data management
│ ├── 📂 pages/ # Main page components
│ │ ├── 📄 auth.jsx # Authentication page
│ │ └── 📄 home.jsx # Home page
│ ├── 📂 styles/ # CSS Module styles
│ │ ├── 📄 Auth.module.css
│ │ ├── 📄 TaskInput.module.css
│ │ ├── 📄 TaskList.module.css
│ ├── 📄 App.css # Global styles
│ ├── 📄 App.jsx # Root component
│ ├── 📄 index.css # Main CSS file
│ ├── 📄 main.jsx # Main entry point
├── 📄 .env # Environment variables
├── 📄 .gitignore # Git ignore file
├── 📄 eslint.config.js # ESLint configuration
├── 📄 index.html # HTML entry point
├── 📄 package.json # Project metadata & dependencies
├── 📄 package-lock.json # Package lock file
├── 📄 README.md # Project documentation
└── 📄 vite.config.js # Vite configuration
```
---
## 📌 **Usage**
1. **Add a new task**: Type in the input field and press enter.
2. **Mark task as done**: Click the task to toggle strikethrough styling.
3. **Delete task**: Click the ❌ button to remove it.
4. **Check the weather**: Enter a city name and get real-time weather data.
---
## 🚀 **Build & Deploy**
To create a production build:
```bash
npm run build
# or
yarn build
```
To deploy on **Vercel**:
```bash
vercel --prod
```
To deploy on **Netlify**:
```bash
netlify deploy --prod
```
---
## 📜 **License**
This project is licensed under the **MIT License**.
---
## 🎯 **Future Improvements**
🔹 **Local Storage Integration** to persist tasks without Redux.
🔹 **Dark Mode Toggle** for a better UX.
🔹 **Animations** for smoother transitions.
---
## 🤝 **Contributing**
If you'd like to contribute:
1. Fork the repo
2. Create a feature branch (`git checkout -b feature-branch`)
3. Commit changes (`git commit -m "Added new feature"`)
4. Push to GitHub (`git push origin feature-branch`)
5. Open a Pull Request 🎉
---
## ⭐ **Support & Feedback**
If you like this project, don't forget to **star 🌟** the repo!
For feedback, open an issue or contact me at: **nautiyalankit65@gmail.com**
---
### 🎉 **Happy Coding!** 🚀