This project is a full-stack task management application similar to Trello, allowing users to create, update, and manage tasks within different columns. Users can move tasks between columns using drag-and-drop functionality. Additionally, users can sign up, log in, and authenticate via Google.
- Features
- Tech Stack
- Getting Started
- API Endpoints
- Data Models
- Testing
- Security
- Bonus Features
- Deployment
- Contributing
- License
- User Authentication: Sign up, login, and Google login.
- Task Management: Create, update, delete, and manage tasks within different columns.
- Drag-and-Drop Functionality: Move tasks between columns seamlessly.
- Routing: Implemented throughout the application.
- Error Handling: Client-side and server-side error handling with meaningful messages.
- Validation: Server-side validation for task data and user input.
- User Profiles: Profile avatars.
- Task Enhancements: Due dates, reminders, sorting, and searching capabilities.
- Frontend: React, React Router, react-beautiful-dnd, MUI
- Backend: Node.js, Express
- Database: MongoDB / PostgreSQL / MySQL
- Authentication: JSON Web Tokens (JWT), Google OAuth 2.0
- Version Control: Git
Make sure you have the following installed:
- Node.js (v20+)
- npm or yarn
- MongoDB
-
Clone the repository:
git clone https://github.com/itsRkator/task-manager.git cd task-manager
-
Install the dependencies:
# For backend cd backend npm install # For frontend cd ../frontend npm install
-
Environment Variables:
Create a
.env
file in the backend directory for backend with the following variables:# DB Config MONGO_URI=<Your Database URI> # Used MongoDb JWT_SECRET=<Your JWT Secret> # Google Auth Config GOOGLE_CLIENT_ID=<Your Google Client ID> GOOGLE_CLIENT_SECRET=<Your Google Client Secret> # Environment-specific URLs FRONTEND_URL=http://localhost:3000 # Change this to your frontend production URL when deploying BACKEND_URL=http://localhost:8000 # Change this to your backend production URL when deploying
Create a
.env
file in the frontend directory for frontend with the following variables:# Environment-specific URLs REACT_APP_API_URL=http://localhost:8000/api # Change this to your backend production URL when deploying
-
Run the Backend:
cd backend npm run start
-
Run the Frontend:
cd frontend npm run start
-
Access the Application:
Open your browser and navigate to
http://localhost:3000
.
- POST
/api/auth/register
- Register a new user - POST
/api/auth/login
- Log in with credentials - POST
/api/auth/google
- Log in with Google
- GET
/api/user/get
- Get user using the id from token
- GET
/api/tasks
- Get all tasks - With/without query params - POST
/api/tasks
- Create a new task - PUT
/api/tasks/:id
- Update a task - DELETE
/api/tasks/:id
- Delete a task
{
username: String,
email: String,
password: String, // Encrypted
googleId: String, // Optional
avatar: String // URL to the user's avatar
createdAt: Date,
updatedAt: Date
}
{
title: String,
description: String,
dueDate: Date, // Optional
status: String, // e.g., "To Do", "In Progress", "Done"
userId: String, // Reference to the User
createdAt: Date,
updatedAt: Date
}
Unit tests are included for critical parts of the application, such as API endpoints and data validation.
- Implemented JWT for user authentication.
- Used server-side validation to prevent malicious data inputs.
- Protected routes to ensure only authenticated users have access.
- User Profiles: Allows users to upload avatars.
- Task Enhancements: Tasks have due dates, reminders, and can be sorted or searched.
The application is deployed on [Platform] and can be accessed via [Deployed App Link].
To deploy:
-
Backend Deployment:
- Use services like Heroku, AWS, or Firebase Functions.
-
Frontend Deployment:
- Use services like Vercel or Netlify.
This project is licensed under the MIT License.