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.
Fullstack
- Frontend: Kryzen Frontend
- Backend: Kryzen Backend
- Database: MongoDB Atlas
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
- 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
- User can set task priority according to preferences and filter by task priority
- 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.
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
- 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.
- Email Address: test@gmail.com
- Password: Push1697@
- 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
- 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
- For Frontend: 3000
- For Backend: 8000
- 404: Not Found/failure
- 201: Created/post
- 200: OK/Success/get/put
- 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