top of page
Abstract Shapes

Career

Micro-Frontend E-commerce Platform

Scenario:

You are tasked with building a micro-frontend architecture for an e-commerce platform. The platform consists of several distinct features, each managed as a separate micro-frontend. These features include product listings, user authentication, shopping cart, and order history.

Requirements:

  • Micro-Frontends: Design and implement the micro-frontend architecture for the platform. Each feature should be a separate, independently deployable micro-frontend application. Use a technology of your choice for this, such as Webpack Module Federation, single-spa, or custom micro-frontend architecture. Product Listings Micro-Frontend: Create a micro-frontend responsible for displaying a list of products. Users should be able to filter and sort products.

  • Implement a "Add to Cart" button for each product. User Authentication Micro-Frontend: Develop a micro-frontend for user authentication. Users should be able to register, log in, and log out. Implement JWT-based authentication.

  • Shopping Cart Micro-Frontend: Create a micro-frontend to manage the shopping cart. Allow users to view, update, and clear items in their cart. Display the total price of items in the cart.

  • Order History Micro-Frontend: Build a micro-frontend that displays the user's order history. Orders should include information such as order date, products purchased, and total price. Users should be able to view their past orders.

  • Redux State Management: Use Redux to manage the global state of each micro-frontend. Implement actions and reducers as needed for each feature. Ensure that micro-frontends can communicate through Redux.

  • Navigation: Implement a navigation system that allows users to switch between micro-frontends seamlessly. Update the URL to reflect the current feature.

  • Responsive Design: Ensure that the platform is responsive and works well on various screen sizes and devices.

  • Error Handling: Implement error handling and provide clear error messages to users when something goes wrong, such as failed login attempts or network errors.

  • Testing and Documentation: Write unit tests for critical components and features. Provide clear documentation on how to run and deploy each micro-frontend.

Additional notes

  • Use Typescript where possible

  • You're allowed to use open-source packages as you see fit.

  • After publish assignments in to your public version control share it link via mail to us

  • Anything not in the description is up to you.

bottom of page