All solutions

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

📌 In this funny Frontend Mentor Challenge I practiced a lot of layout organization and the way of thinking in a reusable way following the DRY principle.

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

💡 the main challenge was the management of the application state related to the products and cart data, and the shape of the possible actions to modify it, ensuring a decoupling between the components.

📚 I practiced and applied many of the principles also used by libraries such as NgRX : I delegated the entire management of the state to a service, with a pattern based on signals API provided by Angular and the actions callable by smart components to access data and modify them through methods provided by the service.

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

I would love to get some feedbacks from you. Your insights would be incredibly valuable in helping me improve. Here are a few specific areas where I'd appreciate your thoughts:

📌 Folder Structure Management:

How effective is the current folder structure? Are there any changes you would suggest to improve organization and maintainability?

📌 State Design and Action Management:

What do you think about the design of the state and the way actions are managed? Are there any best practices or improvements you would recommend?

📌 SCSS Organization:

How is the SCSS part of the application organized? Do you have any suggestions for better structuring or optimizing the SCSS?

📌 Possible Improvements or Suggestions:

Do you have any general feedback or suggestions for improving the solutions I've implemented? Are there any areas where you see potential for enhancement?

Thank you so much for taking the time to review my work. Your feedback is greatly appreciated ❤️.

Happy code to everyone!! 😁

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

In this frontend mentor challenge I had the opportunity to continue my study on the new features introduced by the Angular framework, in particular I also studied the use of Angular Animations to have a smooth transition in the result component.

Thanks to animations based on the app state I was able to add animations based on:

• the presence of the result, in case of form submission;
• absence of the result, in case of initial state or possible subsequent reset.

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

A tricky use case was the logic for the amount input to format it as a currency, with decimal digits and separators based on locales. For this purpose I've used a valueChanges observable provided by form controls: the input is treated as text but formatted each time the valueChanges observable emits. The formatting phase includes the usage of Decimal Pipe provided by Angular to format the string with decimals and separators.

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

I would love to get some feedbacks from you. Your insights would be incredibly valuable in helping me improve. Here are a few specific areas where I'd appreciate your thoughts:

• Folder Structure Management:

How effective is the current folder structure? Are there any changes you would suggest to improve organization and maintainability?

• State Design and Action Management:

What do you think about the design of the state and the way actions are managed? Are there any best practices or improvements you would recommend?

• SCSS Organization:

How is the SCSS part of the application organized? Do you have any suggestions for better structuring or optimizing the SCSS?

• Possible Improvements or Suggestions:

Do you have any general feedback or suggestions for improving the solutions I've implemented? Are there any areas where you see potential for enhancement?

Thank you so much for taking the time to review my work. Your feedback is greatly appreciated ❤️.

Happy code to everyone!! 😁

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

The core point of this project was the management of the logic, even if I didn't use NgRX I let myself be guided by its core concepts to manage the state of the application within a service that provide the state and handle its changes.

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

All the actions that modify the state are managed within the service that exposes a single action to the smart app component and this favors a decoupling between the application logic and the access of the data and the rendering in dumb components. The service acts like a Facade that expose the state and handle events by actions dispatched from components by UI events.

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

I would love to get some feedback from you. Your insights would be incredibly valuable in helping me improve. Here are a few specific areas where I'd appreciate your thoughts:

• Folder Structure Management:

How effective is the current folder structure? Are there any changes you would suggest to improve organization and maintainability?

• State Design and Action Management:

What do you think about the design of the state and the way actions are managed? Are there any best practices or improvements you would recommend?

• SCSS Organization:

How is the SCSS part of the application organized? Do you have any suggestions for better structuring or optimizing the SCSS?

• Possible Improvements or Suggestions:

Do you have any general feedback or suggestions for improving the solutions I've implemented? Are there any areas where you see potential for enhancement?

Thank you so much for taking the time to review my work. Your feedback is greatly appreciated ❤️.

Happy code to everyone!! 😁

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

During this Frontend Mentor challenge I had the opportunity to delve into the new features introduced by the Angular framework with release of version 18. This project allowed me to explore and apply advanced tools from the Angular ecosystem that I had never used before, significantly enhancing the UX of the application.

• Angular Animations : to add animations and transitions based also on state.
• NgRx signal based : to a reactive state management.

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

I gained a lot of practice in creating shared reusable component., for example:

• a versatile ButtonComponent that could be used both as a button ,to trigger specific actions on click, and as a link for redirects, maintaining the correct semantic of these elements.
• a reusable MenuComponent, to allow customization of the menu sections, like header and content items, I opted for composition using ng-template, defining and exposing references to this composable templates via structural directives.

Thanks to NgRx, I was able to maintain a well-organized folder structure and ensure total decoupling between the application's logic and application's view and data rendering:

• The logic was defined declaratively and provided as a service to the application
• Data rendering and management of input events from the UI were handled through smart and dumb components, accessing pieces of state and derived state from the store, and calling actions of the store to update state in the events handling.

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

I would love to get some feedback from you. Your insights would be incredibly valuable in helping me improve. Here are a few specific areas where I'd appreciate your thoughts:

1. Folder Structure Management:

   • How effective is the current folder structure?
   • Are there any changes you would suggest to improve organization and maintainability?

2. State Design and Action Management:

   • What do you think about the design of the state and the way actions are managed?
   • Are there any best practices or improvements you would recommend?

3. Shared and Reusable UI Components:

   • How well do the shared components (e.g., ButtonComponent, Menu) work?
   • Are they flexible and reusable enough for different use cases?

4. SCSS Organization:

   • How is the SCSS part of the application organized?
   • Do you have any suggestions for better structuring or optimizing the SCSS?

5. Possible Improvements or Suggestions:

   • Do you have any general feedback or suggestions for improving the solutions I've implemented?
   • Are there any areas where you see potential for enhancement?

Thank you so much for taking the time to review my work. Your feedback is greatly appreciated ❤️.

Happy code to everyone!! 😁

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

In this challenge I focused a lot on:

• The organization of partial Sass files according to the 7-1 pattern;
• The use of BEM as a naming convention for style classes.
• I also experimented a different approach to handle the responsiveness of the page using a mixin for a greater readability.

Any feedback is appreciated, happy coding everyone!! :)

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

• I would like to further improve on managing the responsiveness of the design, especially related to images.

• In the end, there is always room for improvement regarding the organization and reusability of style classes, making full use of various patterns explored in depth during my studies.

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

In this challenge I focused a lot on:

• The organization of partial Sass files according to the 7-1 pattern;
• The use of BEM as a naming convention for style classes.
• I also experimented a different approach to handle the responsiveness of the page using a mixin for a greater readability.

Any feedback is appreciated, happy coding everyone!! :)

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

• I would like to further improve on managing the responsiveness of the design, especially related to images.

• In the end, there is always room for improvement regarding the organization and reusability of style classes, making full use of various patterns explored in depth during my studies.

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

In this challenge I focused a lot on:

• The organization of partial Sass files according to the 7-1 pattern;
• The use of BEM as a naming convention for style classes.

I also experimented a different approach to handle the responsiveness of the page using a mixin for a greater readability.

Any feedback is appreciated, happy coding everyone!! :)

In this challenge I wanted to approach the new version of Angular for the first time using the brand new features offered such as control flow, stable signal management and much more. I also wanted to try a different pattern compared to previous versions where I used both Observables for CRUD operations (which in the future can call real APIs of a backend rather than managing data from localStorage), and Signals for managing internal state .

Having the aim of practicing with the new version of Angular, for the moment I did not want to realize the bonus points of the challenge such as drag and drop and management of the application as a full-stack-application, however they will be points that I will delve into later.

Obviously feedbacks on any optimizations and improvements are appreciated, happy coding!

I made this challenge for practicing with Angular and RxJS using a declarative approach to filter the jobs. Any feedback is welcomed :)

My process broke down into:

1. Identify specific sections by analyzing the interface design (header, hero, features, ecc...)

2. Focus on writing the HTML content for each section while respecting the semantics of the contents

3. Style each section with CSS

4. Additional features such as smooth scrolling and email checking feedback on submit

5. Media Queries and extra

Is there any point where I could improve? Do you have more detailed workflows to share? Any response is greatly appreciated ;)

In this more advanced challenge, I wanted to practice with the Angular framework and the use of RxJS in order to make the application more responsive with a reactive approach. I also focused a lot on the accessibility and navigability of the page elements like buttons and links with the keyboard.

Feedback of any kind is obviously welcome.

I recently switched to Pro and I wanted to try a not too complicated challenge to have my first experience with Figma too, with the design files downloadable with the Pro sub, which has turned out to be a very useful tool especially if the goal is get as close as possible to the design of the challenge. Any feedback\suggestions on how to improve are welcomed, thanks everyone!