A simple task management application built with Flask (backend) and React (frontend) that allows users to create, edit, and delete tasks, as well as add, edit, and delete comments on tasks.
- ✅ RESTful API for Tasks and Comments
- ✅ Full CRUD operations for both Tasks and Comments
- ✅ SQLite database with SQLAlchemy ORM
- ✅ Automated tests with pytest
- ✅ CORS enabled for frontend integration
- ✅ Create, edit, and delete tasks
- ✅ Mark tasks as complete/incomplete
- ✅ Add, edit, and delete comments on tasks
- ✅ Modern, beautiful UI with gradient background
- ✅ Smooth animations and transitions
- ✅ Responsive design (mobile-friendly)
- ✅ Real-time updates with hot reload
- ✅ Emoji icons for better UX
- ✅ Glass morphism effects
Better_Software/
├── backend/
│ ├── app.py # Flask application with API endpoints
│ ├── test_app.py # Automated tests for API
│ ├── requirements.txt # Python dependencies
│ └── README.md # Backend documentation
├── frontend/
│ ├── src/
│ │ ├── components/ # React components
│ │ │ ├── TaskForm.jsx
│ │ │ ├── TaskList.jsx
│ │ │ ├── TaskItem.jsx
│ │ │ ├── CommentList.jsx
│ │ │ └── CommentItem.jsx
│ │ ├── App.jsx # Main App component
│ │ └── App.css # Styles
│ └── package.json # Node dependencies
└── README.md # This file
- Navigate to the backend directory:
cd backend- Create a virtual environment:
python3 -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate- Install dependencies:
pip install -r requirements.txt- Run the Flask server:
python app.pyThe backend will run on http://localhost:5001
- Navigate to the frontend directory:
cd frontend- Install dependencies:
npm install- Run the development server:
npm run devThe frontend will run on http://localhost:5173
cd backend
source venv/bin/activate
pytest test_app.py -vAll 12 tests should pass:
- ✅ Create comment
- ✅ Create comment without content (validation)
- ✅ Create comment for non-existent task
- ✅ Get all comments for a task
- ✅ Get single comment
- ✅ Get non-existent comment
- ✅ Update comment
- ✅ Update comment without content (validation)
- ✅ Update non-existent comment
- ✅ Delete comment
- ✅ Delete non-existent comment
- ✅ Cascade delete comments when task is deleted
GET /api/tasks- Get all tasksGET /api/tasks/<id>- Get a specific taskPOST /api/tasks- Create a new taskPUT /api/tasks/<id>- Update a taskDELETE /api/tasks/<id>- Delete a task
GET /api/tasks/<task_id>/comments- Get all comments for a taskPOST /api/tasks/<task_id>/comments- Create a comment for a taskGET /api/comments/<id>- Get a specific commentPUT /api/comments/<id>- Update a commentDELETE /api/comments/<id>- Delete a comment
-
Simple Authentication: No user authentication is implemented. In a production app, you'd want to add user accounts and associate tasks/comments with users.
-
Single User: The app assumes a single user environment. All tasks and comments are visible to everyone.
-
In-Memory Database: SQLite is used for simplicity. For production, consider PostgreSQL or MySQL.
-
Basic Validation: Only basic validation is implemented (e.g., required fields). More robust validation could be added.
-
No Pagination: All tasks and comments are loaded at once. For large datasets, pagination should be implemented.
-
Timestamps: Comments track creation and update times. Tasks only track creation time.
- Flask 3.0.0
- Flask-SQLAlchemy 3.1.1
- Flask-CORS 4.0.0
- pytest 7.4.3
- React 18
- Vite 7.3.0
- Modern JavaScript (ES6+)
- Add user authentication and authorization
- Implement pagination for tasks and comments
- Add search and filter functionality
- Add due dates and priorities for tasks
- Add file attachments to comments
- Implement real-time updates with WebSockets
- Add dark mode
- Deploy to production (e.g., Heroku, Vercel)