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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent