Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found

Submitted

Built with SvelteKit 1.0 + Tailwind CSS

#svelte#tailwind-css#progressive-enhancement
Glen• 515

@GlenOttley

Desktop design screenshot for the Product feedback app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
5guru
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my second project built using Sveltekit. I challenged myself by implementing progressive enhancement throughout, making sure that all the functionality worked correctly with or without JavaScript - please disable JS in your browser if you wish to test this out.

Another challenge was choosing not to use a database, instead relying completely on browser storage + svelte stores. This made reactivity tricky at times due to how svelte does not share stores between the server and client when implementing progressive enhancement. The solution to this was to abstract my 'actions' in to a separate 'actions.ts' file and call them from both the server and the client when using progressive enhancement.

Working with a framework like Sveltekit, which pre-renders HTML has really highlighted the amount of accessibility issues with my code (as highlighted by the accessibility report included on this site). For my next project I intend to go 'back to basics' a little and work on my accessibility and semantic HTML skills.

Any questions / comments are welcome! Glen

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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