QR Component using CSS and Vite.js

Hello @rodrigoparis!

Your solution looks great!

I have a suggestion for improvement:

• Use <main> to wrap the main content instead of <div>.

📌 Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page.

This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, great job!

Hey Rodrigo,

Well done on completing the challenge. As for code structure you're usually looking for patterns and scalability, as well as how easy files are to find in your project. On smaller projects like this one this usually isn't a problem, but once you start getting bigger you'll have troubles finding the files you need if you put all of them in a single folder. There are a lot of structures for files and all of them have good ideas behind them. I'd recommend you start by creating a folder called "Components" in which you can put components that you create (Like the QRCodeComponent.tsx). Once you start working with multiple pages you can consider creating a "Views" folder to put your pages in (like your App.tsx in this case). Another thing to consider are your .css files. You could have a dedicated "css" or "styles" folder where you keep all of your .css files or you could always keep them close to the files they are used in.

As you can see there are quite a lot of options already. Try some out and look what works best for you.

Happy Coding!