Skip to content

This a fully responsive React app for tracking your goals based on their priorities

Notifications You must be signed in to change notification settings

MatinT-SA/goal-tracker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

goal-tracker

This is a fully responsive React app for tracking your goals based on their priorities. There's a Progress Bar for displaying each of the goals checked and done. I've utilized various React Hooks and concepts, such as useState, useEffect, and forwardRef, along with the react-icons library to make it a robust and modern app.

Features

  • Pagination with Smooth Animations: Implemented pagination for displaying the Goal List with smooth animations on page transitions using Framer Motion.

  • Dynamic Animations: Created a cool icon transition between a rocket and a checkmark when checking off a goal.

  • Celebratory Effects: Incorporated Canvas-Confetti to celebrate each goal completion with dynamic particle effects.

  • Date Selection: Added goal deadlines using the React Datepicker component for a seamless user experience.

  • Theme Switcher: Implemented a theme toggle using the React Switch component.

  • Notifications: Integrated Sonner for toast notifications to inform users about important actions.

  • Spring Animations: Used React Spring to add smooth, interactive animations.

Tech Stack

  • React: For building the user interface.
  • Framer Motion: For animations and transitions.
  • React Spring: For interactive and smooth animations.
  • React Datepicker: For goal deadline selection.
  • Canvas-Confetti: For celebratory effects.
  • React Switch: For theme toggling.
  • Sonner: For modern toast notifications.

goal-tracker

About

This a fully responsive React app for tracking your goals based on their priorities

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published