/task-manager

Primary LanguageTypeScriptMIT LicenseMIT


Task Manager Application

Overview

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.

Table of Contents

  1. Features
  2. Tech Stack
  3. Getting Started
  4. API Endpoints
  5. Data Models
  6. Testing
  7. Security
  8. Bonus Features
  9. Deployment
  10. Contributing
  11. License

Features

  • 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.

Bonus Features

  • User Profiles: Profile avatars.
  • Task Enhancements: Due dates, reminders, sorting, and searching capabilities.

Tech Stack

  • 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

Getting Started

Prerequisites

Make sure you have the following installed:

  • Node.js (v20+)
  • npm or yarn
  • MongoDB

Installation

  1. Clone the repository:

    git clone https://github.com/itsRkator/task-manager.git
    cd task-manager
  2. Install the dependencies:

    # For backend
    cd backend
    npm install
    
    # For frontend
    cd ../frontend
    npm install
  3. 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

Running the Application

  1. Run the Backend:

    cd backend
    npm run start
  2. Run the Frontend:

    cd frontend
    npm run start
  3. Access the Application:

    Open your browser and navigate to http://localhost:3000.

API Endpoints

User Authentication

  • POST /api/auth/register - Register a new user
  • POST /api/auth/login - Log in with credentials
  • POST /api/auth/google - Log in with Google

User Management

  • GET /api/user/get - Get user using the id from token

Task Management

  • 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

Data Models

User Model

{
  username: String,
  email: String,
  password: String, // Encrypted
  googleId: String, // Optional
  avatar: String // URL to the user's avatar
  createdAt: Date,
  updatedAt: Date
}

Task Model

{
  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
}

Testing

Unit tests are included for critical parts of the application, such as API endpoints and data validation.

Security

  • Implemented JWT for user authentication.
  • Used server-side validation to prevent malicious data inputs.
  • Protected routes to ensure only authenticated users have access.

Bonus Features

  • User Profiles: Allows users to upload avatars.
  • Task Enhancements: Tasks have due dates, reminders, and can be sorted or searched.

Deployment

The application is deployed on [Platform] and can be accessed via [Deployed App Link].

To deploy:

  1. Backend Deployment:

    • Use services like Heroku, AWS, or Firebase Functions.
  2. Frontend Deployment:

    • Use services like Vercel or Netlify.

License

This project is licensed under the MIT License.