⚠️ This project is currently linked externally or is undergoing a work in-progress, but will soon be available here on the website.

Planner

Overview

Planner is a React web app with a neumorphic UI that helps users track events and set actionable goals leading up to them.

Planner Image

Styled Components

React

Project Details

After completing the React section of Jonas Schmedtmann’s course, I designed and developed Planner from scratch using Styled Components and React. The app features a modern neumorphic interface, intuitive state management, and modular component architecture. Users can create events, set goals toward each event, and visually track their progress in an organized and engaging way.

Implimentations

  • Implemented TanStack Query (React Query) for efficient API data management
  • Built custom hooks for reusability across the app
  • Used a neumorphic UI library for visual elements such as the dashboard clock
  • Integrated date-fns for date and calendar handling
  • Added React Hot Toast for real-time notifications
  • Simulated authentication with JSON Server (fake auth for demonstration purposes)

Problem

Users struggling to complete a task

Solution

Countdown and reminders

1/3

Next