Skip to content
Submitted 6 days ago

Full-stack solution - Angular + node.js

node, mongodb, angular, typescript, sass/scss
P
LVL 3
Amit-R328350
@Amit-R328
A solution to the Audiophile e-commerce website challenge

Solution retrospective


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

I’m proud that I completed a full multi-page e-commerce project with Angular, including category pages, product detail pages, a cart, checkout form, and order confirmation flow. This was a big project for me because it involved both layout precision and application logic, not just static HTML and CSS. I’m especially happy with the responsive work across mobile, tablet, and desktop, and with getting the cart state, quantity controls, checkout summary, and confirmation modal working together. I also connected the frontend to a custom Express/MongoDB API instead of relying only on static data, which made the project feel more like a real application. If I did this again, I would plan the structure earlier before building too much UI. I would also break the project into smaller milestones, because the size of the challenge made it easy to lose track of what I had already solved.

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

One of the biggest challenges was managing the amount of responsive styling needed to match the design across different screen sizes. Some sections, like the hero area, product cards, cart modal, checkout page, and footer, needed a lot of small adjustments before they looked right on mobile, tablet, and desktop. Another challenge was handling cart and checkout behavior. I needed the cart to persist with localStorage, update totals correctly, support quantity changes, and still show the order details after the cart was cleared. I solved this by keeping cart logic in a dedicated service and taking a snapshot of the order before clearing the cart. The checkout form was also challenging because it needed validation, conditional payment fields, error states, and a disabled submit state when the cart was empty. I overcame this by using Angular reactive forms and updating validators based on the selected payment method.

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

I would appreciate feedback on the overall Angular structure and whether my components and services are organized well for a project of this size. I’d also like feedback on my responsive SCSS, especially whether there are places where I could simplify the layout or avoid repeated media query adjustments.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Amit-R328’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