Todos App (Next.js, react-beautiful-dnd, Tailwind, Local storage)

App functions:

• Create, Read, Update and Delete tasks.
• Task progress filters.
• Sync with local storage.
• Drag and drop to reorder.
• Theme switch.

Tools / Concepts used:

• CSS: Custom properties to define the design system and enable theming.
• React: State, context, refs, forwardRef, imperative handle, flushSync, custom hooks.
• Next.js: App router - server and client components.
• react-beautiful-dnd: For drag and drop reordering of tasks.
• Local storage to persist data.

UX:

• User can operate the entire app using just the keyboard.
• Subtle reveal animation on the tasks list items using native transitions.

Page speed insights: (4X cpu throttle, slow 4g network)

• Performance, Accessibility, Best practices, SEO -> 99, 95, 100, 100.

Modifications to original design:

• Moved the filters above the list for easy access.
• Added background colors to buttons.

I wanted to make it a full stack app from the get-go using Supabase and Next.js's pages router, but kept running into auth flow issues using middleware redirects. I'll try to make things work with the app router, but for the now, the app uses local storage.

I'm looking for suggestions specifically on the design system implementation. Thanks!