Submitted over 1 year ago
Pomodoro timer using Typescript, React, Vite, and CSS Modules.
@dominicgerman
Design comparison
SolutionDesign
Solution retrospective
- I'm curious how you all deal with SVGs in React. I wound up just wrapping the svgs in custom components rather than importing them with third party libraries. What is your favorite way of using SVGs in React?
- I'd love to know if there are better/more robust ways of structuring/organizing my React app. How many lines per file is too many lines? How small/reusable should your components really be?
- When it comes to testing, how much if any would you say is realistic in an app like this?
- I'm wondering if my app has any blindspots in terms of accessibility.
Community feedback
- @daniloparrajrPosted over 1 year ago
Hi Dominic! You've done a good job with this challenge! Looks very good!
To answer some of your questions, please see below
- You can simply deal with inline SVG without third-party libraries by importing them like React Components for example:
import { ReactComponent as YourSvg } from './your-svg.svg'; - If you think that your component handles too much logic you can break it down into smaller components that way your components will stay simple and pure.
- Cross-browser testing is a great way to check if your app works on most browsers.
- You can check the Accessibility report of your solution for any accessibility issues. Also try to press the tab multiple times when your settings modal is active, it should focus on each field one by one. See my solution to this challenge as a reference.
Hope this helps you! All the best!
0 - You can simply deal with inline SVG without third-party libraries by importing them like React Components for example:
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord