https://github.com/tamilselvanraman/crud-task-management-frontend
A responsive Task Management app built with React.js and Tailwind CSS. It allows users to create, view, update, and delete tasks using a connected backend API. Ideal for learning CRUD operations, API integration, and building clean, user-friendly interfaces.
https://github.com/tamilselvanraman/crud-task-management-frontend
csss curd-operation-api-example front-end-development html reactjs simple-project tailwindcss
Last synced: 3 months ago
JSON representation
A responsive Task Management app built with React.js and Tailwind CSS. It allows users to create, view, update, and delete tasks using a connected backend API. Ideal for learning CRUD operations, API integration, and building clean, user-friendly interfaces.
- Host: GitHub
- URL: https://github.com/tamilselvanraman/crud-task-management-frontend
- Owner: TamilselvanRaman
- Created: 2025-06-29T05:55:30.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-29T06:02:55.000Z (about 1 year ago)
- Last Synced: 2025-06-29T07:19:40.710Z (about 1 year ago)
- Topics: csss, curd-operation-api-example, front-end-development, html, reactjs, simple-project, tailwindcss
- Language: JavaScript
- Homepage: https://tamilselvanraman.github.io/CRUD-Task-Management-frontend/
- Size: 1.94 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📝 CRUD Task Management App (Frontend)
This is a **Task Management** frontend project built using **React.js** and styled with **Tailwind CSS**. It allows users to manage their tasks with full **CRUD functionality** – Create, Read, Update, and Delete. The app connects to a backend API (you can build with Node.js/Python) to store and manage tasks.
---
## 🚀 Features
- ✅ Add new tasks with title & description
- ✅ View all tasks in a clean list
- ✅ Edit tasks in-place
- ✅ Delete tasks with confirmation
- ✅ Fully responsive design using Tailwind CSS
- ✅ Clean, component-based structure using React
---
## 🛠️ Tech Stack
| Technology | Purpose |
|----------------|---------------------------------|
| React.js | Component-based frontend UI |
| Tailwind CSS | Styling and responsive layout |
| Axios / Fetch | To call backend REST API |
| React Hooks | State management and lifecycle |
---
### 1. Clone the repository
```bash
git clone https://github.com/your-username/crud-task-frontend.git
cd crud-task-frontend
```
2. Install dependencies
bash
Copy
Edit
npm install
3. Start the development server
bash
Copy
Edit
npm run dev
The app will open at http://localhost:5173 or http://localhost:3000 depending on your setup.
🔗 Backend API Integration
Make sure your backend (Node.js, Python, etc.) supports the following RESTful endpoints:
Method Endpoint Description
GET /api/tasks Fetch all tasks
POST /api/tasks Add a new task
PUT /api/tasks/:id Update task
DELETE /api/tasks/:id Delete task
You can use Axios or fetch() in React to call these APIs.
🧑💻 Author
Name: Tamil Selvan R
GitHub: TamilselvanRaman
📄 License
This project is open-source under the MIT License.
Would you like a basic **React + Tailwind starter template** to go with this README? I can generate that for you too.