Skip to content
Submitted about 2 years ago

Pomodoro timer using Typescript, React, Vite, and CSS Modules.

react, typescript, vite
Dominic•40
@dominicgerman
A solution to the Pomodoro app challenge
Preview (opens in new tab)Code (opens in new tab)

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.
Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Danilo Parra Jr•430
    @daniloparrajr

    Hi Dominic! You've done a good job with this challenge! Looks very good!

    To answer some of your questions, please see below

    1. 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';
    2. 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.
    3. Cross-browser testing is a great way to check if your app works on most browsers.
    4. 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!

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