Priyobroto.

Frontend Developer

CheckOff
laptop frame
CheckOff

Overview

CheckOff is a modern task management app with a user-friendly interface developed using React and Next JS. Tasks are stored and retrieved using a backend built with Next JS and Firebase. The app supports task creation, updating, and deletion, as well as organization through lists or tags and creation and syncing user accounts across all devices.

Features

  • Task Creation, Editing, and Deletion: Easily add, update, and remove tasks to manage your to-do list with a seamless interface.
  • Organized Task Management: Group tasks by custom lists or categorize them with tags for better organization and productivity.
  • Real-time Sync Across Devices: Access and manage your tasks on any device, with automatic syncing powered by Firebase.
  • User Accounts with Authentication: Securely create and sync your account, ensuring your tasks are always protected and accessible.
  • Responsive User Interface: Enjoy a clean, user-friendly design built with React and Next.js, optimized for desktops and mobile devices.
  • Progress Tracking: Mark tasks as completed and keep track of your accomplishments effortlessly.

Timeline

3 weeks, Deployed in July 2023

Challenges

  • Maintaining Client-side Authentication State: Implement a secure mechanism to manage and persist user authentication state across sessions on the client side.
  • Persisting Todos in Firebase: Seamlessly integrate Firebase to save, update, and retrieve todos with real-time synchronization.
  • Managing Categories of Todos: Organize and group todos effectively by creating and managing distinct categories.
  • Making Cool-Looking Sequence GSAP Animations: Design smooth, visually appealing animations by sequencing elements with GSAP for enhanced user experiences.

Tech Stack

Javascript Javascript
Typescript Typescript
nextjs nextjs
Firebase Firebase

Highlights

Showcasing Major Milestones and the Key Features

User Authentication

0.1 User Authentication

Image

0.2 App Opening Animation

Video
Add New Task Dialog

0.3 Add New Task Dialog

Image
Assign a Category to a Task

0.4 Assign a Category to a Task

Image
Create a new Category on the GO!

0.5 Create a new Category on the GO!

Image
Describe your Task

0.6 Describe your Task

Image
Show the Task and Check it off once done

0.7 Show the Task and Check it off once done

Image

0.8 Filter Tasks based on Category

Video
Manage Categories

0.9 Manage Categories

Image

Next Project

FlickFinder

FlickFinder is a React Webapp that allows users to browse, search and rate movies from various genres and categories. Users can filter movies by genre, popularity, release date and rating, as well as view movie details, trailers, reviews and cast information.