This is a solution to the Interactive pricing component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Add new todos to the list
- Mark todos as complete
- Delete todos from the list
- Filter by all/active/complete todos
- Clear all completed todos
- Toggle light and dark mode
- Bonus: Drag and drop to reorder items on the list
- Bonus: Build this project as a full-stack application
- Live Site URL: Website hosted on Netlify
- Semantic HTML5 markup including a11y
- CSS custom properties and flexbox
- Mobile-first workflow including Figma comps
- React - JS library
- TypeScript, using gts
- Custom Hooks
- Styled Components
- @dnd-kit/sortable
This was an opportunity to keep my skills sharp. The explicit things I wanted to tinker with were TypeScript with React, and also wanted to implement custom hooks and styled components, especially with CSS variables and theming. This was an opportunity to play a little more with inline SVGs and implementing accessibility, especially in the context of forms and checkboxes.
Drag and Drop via @dnd-kit/sortable was interesting, extending event sensors to ignore default behavior using an HTML attribute.
I'll add more ideas I have in the GitHub issues, but things like using an app state like Context, implementing storybook, or animating with React Spring come to mind.