Skip to content
Submitted 9 days ago

Angular Quiz App - scss and themes switcher (Optionnal: NestJs API)

angular, sass/scss, bem, typescript
P
LVL 4
@ExploryKod
A solution to the Frontend Quiz app challenge

Solution retrospective


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

This project has two different angles :

  • main branch is prepared to work with a NestJs Api I designed to put into pratices RESTFul principles, JWT Auth and clean architecture with CQRS that have a MongoDB bdd. The first MVP is on my hostinger VPS (dockerized) and can work with the main branch of this app published only in vercel. However quizzed cannot be the one exactly as recommended by frontendmentor as it is a dynamic webapp that do not follow the frontendmentor ui as well as new pages exists and we need to login.
  • frontendmentor-dev branch is the static website you see that is published on netifly and used to have the good comparisons

I am proud of my first angular experience. I found this framework robust with clear files organization, may be more stable environment as writing using html files and adding angular sort of "templating system wrapper" was agreeable for me (if I compare to my NextJs/React Experience were I found more difficulties some years ago but I was also beginning learning code so this a bias).

I am also proud that I manage to guide my LLM into my own scss architecture I love and make it work with angular and LLM writing code for me without too much problems as I guided it into my own ways and make my prompt so that it understand how I need to structure a maintainable app. I create a set of functions, mixins and variables that I can reuse in all my project as I know them.

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

Using clamp is a good thing and I create a scss system with functions and variable for my projects that is efficient. However this only work well if I do not have to be pixel perfect and can use my own vision to make the UI.

I also forgot numerous SEO and accessibility areas that I need to fix later. I forgot security headers as well ...

As all of my weekend project I work partially focusing on some things and ship fastly. I also want to know how frontendmentor IA will analyse the edges cases I know there is errors and misconceptions.

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

I can be better in accessibility principles so any need or help can help make things really better.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Amaury Franssen’s solution.

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