Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Advice generator with Firebase Auth

@BettoRaite

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Things I'm proud of:

  • Implemented authentication/authorization with Firebase. (It's my first time)
  • Created form with validation.
  • Made the app multi-page.
  • Properly(Maybe not) utilized useEffect hook to synchronize with external state. (Auth)
  • Figured out how to propagate that external state to the whole app.
  • Not a bad design. (Fits in pretty nicely)
  • Fully responsive.

Things I would like to change. (Mb some time in the future or today, idk.):

  • [ + ] Infinite load (Sometimes fetch fails, because of nonexistent id, so you have to hard-reload website)
  • [ + ] Make error handling centralized, currently it's some real bad mess.
  • Do not have dead code.
  • Comply with accessibility rules. (For those reading out there, there is a tool called axe DevTools, it's a useful extension which scans your website for accessibility issues).
  • No error, reset password pages.
  • It's still not 100% functionality (around 40% currently) that I wanted. (Just too overwhelmed by life at the moment, it's a dev burnout I guess.)
  • Currently project supports translation but I do not want to leak my api keys, so I had to remove it. (Solution is using server-less functions.)
  • Too many unnecessary contexts. Can be refactored.

What challenges did you encounter, and how did you overcome them?

  • Authentication is hard at first. You have no idea how to propagate auth state, where to put functions, handlers so on. (It comes with time)
  • Actually after sending email verification and user successfully clicking the link, the auth state that the Firebase provides is not updated, so you have to check by reloading user and manually setting that user email is verified.
  • A bunch of crappy tutorials, and nothing good. (Though, maybe it's great, you get to read 1000+ articles)

What specific areas of your project would you like help with?

You can look at my code and give feedback, although, even I know it's some real bad mess.

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