Rizz party refactor among other things

[zeim839]

• Rename .js files to .jsx
  • Whenever you use HTML in React (i.e. return (<div>asd</div>)) you need to use the .jsx file format.
  • Created Image component
  • When you don't add explicit width and height props to images, the website will shift around and resize as elements are loaded into the page. This reduces accessibility and lowers your Google ranking. See CLS.
  • Images are loaded dynamically: images will not download if they're not visible to the user.
  • You guys keep using class instead of className. Class is a reserved JavaScript keyword, if you're writing HTML in JS/JSX you MUST use className.
• Added linter
  • The linter automatically formats all of your code.
  • Run npm run fix to automatically format all JS files in the project.
  • Run npm run lint to check for styling errors.
• Refactored a bunch of stuff
  • There is no point to using React if you're just going to copy/paste elements across different files.
  • If you find yourself copying or rewriting the same thing, then make it into a component.
  • Each page should have its own CSS files. Some components were combining CSS from multiple files. This introduces a lot of duplicates and pollutes the DOM. Use one isolated CSS file for every component.

WebVitals performance

Before

After

Conclusion

Improved performance by quite a lot, but theres still a lot of work to do. Next steps would be to fix responsiveness.

From now on, please use <Image /> instead of <img /> with EXPLICIT width and height props. Otherwise, you are seriously compromising performance.

[AntonCSalvador]