Task-Builder Application

Overview

This project combines the powerful drag and drop functionality provided by the React DnD library with a secure authentication system. It aims to create an interactive and personalized experience for users while maintaining the necessary security measures to protect sensitive data and ensure appropriate access control.

Project Type

Fullstack

Deployed App

• Frontend: Kryzen Frontend
• Backend: Kryzen Backend
• Database: MongoDB Atlas

Directory Structure

Task-Builder-Kryzen/ ├─ server/ ├─ Configs ├─ Models ├─ Middleware ├─ Routes ├─ index.js ├─ client/ │ ├─ src ├─ Components ├─ Pages │ ├─ AllRoutes.jsx │ ├─ Dashboard.jsx │ ├─ Home.jsx │ ├─ Signin.jsx │ ├─ Signup.jsx ├─ redux │ ├──Bug Tracker │ │ ├─ bug.action.js │ │ ├─ bug.reducer.js │ │ ├─ bug.type.js │ ├── store.js
├─ Styles │ ├─Comman.css ├─ App.js ├─ index.js

Video Walkthrough

Watch Video Walkthrough

Features

• Form for adding task name, status, and date.
• Task details submission to the database.
• View task page with sections for tasks, in progress, completed, and pending.
• Draggable and droppable tasks.
• Updating database upon task drop.
• Filter for tasks based on task creation date.
• Authentication

Additional Features

• User can set task priority according to preferences and filter by task priority

assumptions

• Deployed on vercel for frontend and render for backend
• preferred PDF format and layout for data export
• Assumption about the availability of third-party libraries or plugins for drag-and-drop functionality and PDF generation
• Assumption about the level of security measures required for authentication and data protection.

Installation & Getting started

https://github.com/Pushpendra-1697/Task-Builder-Kryzen

Clone the above Repository from Github. Then do the following steps:

    cd client
    npm install
    npm run start

    cd server
    npm install
    npm run server

Usage

• Task Management: Users can create, organize, and track tasks efficiently within different stages of completion (e.g., tasks, in progress, done, rework).
• Reporting: Users can generate PDF reports containing task-related data, facilitating communication and documentation.
• Overall, the application serves as a comprehensive tool for efficient task and project management, promoting productivity, collaboration, and transparency.

Credentials

• Email Address: test@gmail.com
• Password: Push1697@

Technology Stack

Frontend:

• React (JSX Syntax)
• Redux
• Chakra-ui Library for Styling & Modal
• Axios for handling asynchronous requests
• React Router DOM for routing or navigation
• Standard React components
• React Hooks
• Chakra-icons & React-icons
• Drag & Drop by React DnD library

Backend:

• Node.js
• Express.js
• MongoDB (NoSQL)
• Mongoose for connecting database to server
• CORS for handling the CORS error
• JSON Web Token
• Node-fetch
• BSON and Bsondump

PORT Used

• For Frontend: 3000
• For Backend: 8000

HTTP Status Codes Used

• 404: Not Found/failure
• 201: Created/post
• 200: OK/Success/get/put

API Endpoints

• GET /: Welcome in Task Manager App!!!
• GET /download/pdf: Download the collected data in PDF format from the database (status-wise)
• POST /users/signup: Register a new user
• POST /users/login: Log in a user
• Restricted endpoints:
  • GET /dashboard/: Retrieve the tasks data for dashboard
  • POST /dashboard/post: Store a new task in the database
  • PATCH /dashboard/patch: Update the task details (one or many) by task ID
  • DELETE /dashboard/delete: Delete the task by task ID

Some Project Screenshots :

A) For Computer Screen:

B) For Mobile Screen :