A task management app created during a test code.
The challenge | Tools | Project | Deploy
Learned | Continued development | Author
The challenge was to develop a task management app for a busy professional that struggles to stay organized. The app must be user-friendly, have a visual appealing interface and the interface should addapt to different screen sizes and devices.
Users should be able to:
- Display Task List
- Add New Task
- Add Subtask
- Mark Task as Completed
- Delete Task
- Order Tasks
This project was built using following tools:
- React
- Next.js
- TypeScript
- Tailwind
- Tailwind-variants
- React Hook Form
- Figma
A figma project was created to define the app design with project colors, typography, spacing, components and wireframes. The Figma project can be accessed through this link (you'll need a Figma account).
project-demo.mp4
UI components were created using Tailwind and tailwind-variants which is a lib to help building variants (like is was introduced with Stitches and Emotion) for components to provide code and style reusability. The project also has Dark Mode which was implemented with Tailwind Dark Mode API and is configured to use the user's system configured theme to choose the app theme.
The project backend was build using Next new API Routes with app folder structure. For the front-end the Routes, Dynamic Routes, Linking and Navigation features were used.
Online app version: supertask.vercel.app
I have plans to improve this project, since the better code organization and structure to adding new features as creating and linkig it with a database and manage integration with Prisma and validations with Zod. Develop user management and login function are ideas for the near future. Creating and configuring a Storybook to document components behavior and usability and much more.
In this project my main learning was how to build an API with the new Next.js API Routes using the new app folder structure.
- LinkedIn: linkedin.com/in/tascintra
- Frontend Mentor: frontendmentor.io/profile/tascintra
This project is under a MIT license.