</Marsif Codes>

Task Tactician

A task management application for adding, organizing, and tracking tasks. Features include marking tasks as important or completed, setting due dates, and organizing tasks into groups.

My Role

As the sole developer for the To-Do List application, I handled both frontend and backend development.

Tech Stack

This app is built using the MERN stack, with React.js for the frontend, Node.js and Express.js for the backend, and MongoDB for data storage. I handled all aspects of development, from design to deployment.

Home page with an elegant and user-friendly design

Home page with an elegant and user-friendly design

Features

The To-Do List Application, built using the MERN stack, features a user-friendly interface for adding tasks, marking them as completeor important, and organizing them into groups for better management. Its responsive design ensures seamless functionality across all devices, from desktops to mobile screens. The backend, powered by Node.js, Express.js, and MongoDB, enables robust task storage, retrieval, and management.

More Features

  • Login & Registration of a user
  • Used jsonwebtoken library to create jwt tokens for user authentication
  • User sessions
  • Error handling
  • API's built for different routes
Login page

Login page -- in case new user, leads to registration page

Pain Points Found

At first, the fixed sidebar was a big issue for small mobile screens because it took up too much space and made using the app harder. To fix this, I added a toggleable sidebar that users could show or hide as needed. This made the app much easier to use and worked well on all screen sizes.

Tasks Page

Task Management interface

Side bar

Side bar with functionality of searching & filtering tasks

What I learned?

Working on this project taught me how to approach problems with a solution-driven mindset. I gained hands-on experience in building responsive designs, managing full-stack development, and optimizing user experience. It also reinforced the importance of continuous testing, user feedback, and adapting to challenges to deliver a polished final product. Feel free to take a look at this working app demo: