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.
-
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.
- 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.