salla-web-components

Salla Web Component Challenge

Overview

This is an assignment project for talented Senior Front-End developers who are willing to join Salla development team.

You will be responsible for creating a reusable web component that showcases your skills in front-end development. Each component should be well-structured, efficient, adhere to best practices, and include state management. You will create a mini checkout (Check the UI here) using this simple MockAPI with the following steps:

• Cart Items web Component.
• Shipping Companies web component.

The checkout will be in 2 versions React and Vue to ensure web component re-usability in any different framework. use the following API for the project:

Description	URL
Base URL	https://checkout.free.beeceptor.com
Cart Items	/items
Shipping Companies	/shipping
Coupons	/coupons
Cart Total: with coupon and shipping fees	/totals?coupon=false&shipping=dhl
Order submit	/submit

Key Requirements:

• Technology Stack:
  • You must use StencilJS, a powerful toolchain for building web components.
  • Your Code must be written using TypeScript.
  • Use Tailwind CSS as your styling utility.
• Component Functionality: The web component should serve its purpose, From the UI provided, each checkout step should be in a separate web component and implement state management within the component to handle and update internal data.
• Re-Usability: Develop the component to be reusable in different web applications. It should follow the principles of encapsulation and provide a clear API for interaction, use the web components in 2 versions of the checkout (Vue and React)
• Unit Tests: Write comprehensive unit tests for your web component to verify its functionality, including state management. Use a testing framework of your choice (e.g., Jest, Jasmine).
• Performance: Optimize the component for performance. Consider lazy loading and asynchronous loading if applicable. Aim for minimal impact on page load times.
• Documentation: Provide clear and concise documentation on how to use your web component. Include usage examples and explanations of available props, methods, events, and how the state management works.

Submission Guidelines:

• Make sure your code is well-organized and follows best practices for TypeScript, Stencil JS, and unit testing.
• Include a README.md file with instructions on how to run the unit tests locally.
• Create a demo or example HTML file that showcases the usage of your web component, including interactions that demonstrate the state management.
• When you're ready, submit a production ready link to your repository along with any additional notes you'd like to share about your implementation.

Evaluation Criteria:

Your solution will be evaluated based on the following criteria:

• Functionality: Does the web component serve its purpose, and is it implemented correctly, including state management?

• Code Quality: Is the code well-structured, maintainable, and efficient?

• Re-Usability: Can the component be easily reused in different projects?

• Unit Tests: Are there comprehensive unit tests that verify the component's functionality, including state management?

• Documentation: Is the usage of the component and its state management well-documented?

• Performance: Does the component perform efficiently?

• Provide your solution within 7 calendar days. If you need any clarification you can send an email with your questions.