The objective of this project is to develop a flexible and customizable Ribbon component that meets the specified business requirements and use cases. This component can be integrated into all pages of the Apple.com website, supporting over 100 different locations.
Overview of the project's directory structure:
/scripts: This directory contains essential scripts that run before commits to ensure code quality and maintain best practices.
/packages/core-components: Within this directory, you'll find all the components used in the project, along with accompanying Storybook files for easy development and documentation.
/apps/web: This directory hosts a sample web application built using Next.js to showcase the functionality of the core components in action.
In order to run this on your local:
- clone this repo
- in the project folder, run:
yarn install
yarn dev
Run:
cd packages/core-components
yarn storybook
Run:
cd packages/core-components
yarn test
Thinking how to handle the visibility management of the component we decided to get the data from the server using SSR. Here are some motivations for this choice:
-
Control: Logic can be centralized on the server, making it easier to manage and update across the application.
-
Security: The server can enforce strict visibility rules, reducing the risk of unintentional exposure of sensitive content.
-
Flexibility: Visibility can be adjusted globally or for specific user groups based on server-side information.
On the other hand, we can expect some disavantages of this approach:
- Latency: The need to query the server to determine visibility can add latency to user interactions, especially in slower network conditions.
Turbo: Simplifies the management of multiple packages and dependencies within a monorepo, optimizes build and compilation times. We also talked about Lerna but due the broader scope it could add complexity to the project.
NextJS: Provides Server-Side Rendering (SSR) for better performance and automatic code splitting for optimized loading.
Typescript: Static typing for enhanced code quality and better collaboration among developers.
styled-component: We selected styled-components over Tailwind CSS due to its ability to associate styles directly with components, simplifying CSS management on a per-component basis mitigating global CSS conflicts. It also offers dynamic styling based on component props or state, facilitating responsive and interactive user interfaces.
System fonts: We choose system fonts for performance and consistency. It loads quickly because they are already available on the user's device and provide a consistent look and feel across platforms, enhancing user experience.
Animations with Keyframe: This animations are supported by all major browsers without the need for additional libraries or dependencies and allow us to create smooth and visually appealing animations, improving user engagement.
Husky: It enforces consistency across the development team with the execution of Git hooks, ensuring that code quality checks and other processes are run before commits and pushes.
ESLint: We use it to catch potential issues early in development and maintain code style across the team.
Commilint: Check for standard commit messages, improve collaboration among team members and make it easier to track changes over time.
Jest: We choose Jest for its simplicity, ease of use, extensive documentation and a large community, making it easy to find resources and solutions.
Testing-library: It focuses on testing from a user's perspective in an atomic level, promoting testing based on user interactions and behaviors.
Storybook: We use it for it's component isolation, visual testing and documentation by providing a dedicated space to showcase and test each component.
Accessibility: Implemented ARIA roles and attributes where it was necessary.
RTL-LTR: Implemented CSS direction properties for RTL languages, added tests with RTL and LTR content to verify proper rendering.
Cross-browser: Team has tested compatibility with Safari, Firefox, Chrome.
Performance: Optimization asset loading with SSR and Sass.
Responsive: We use media queries to test across different screen resolutions, implementing flexible layouts.
Observability: Crucial for gaining insights into the health and performance when loading data for the ribbon. It can identify issues before they impact users.
Analytics: We would be able to track user engagement, helping to understand which ribbons are popular and which need improvement.
Dark mode: Users often prefer dark mode, making it a valuable option for improving user satisfaction.
E2E tests: Use it for end-to-end testing, to simulate real user interactions across the pages and components. Our preference would be Cypress due its developer-friendly interface and straightforward setup. We also considered Playwrith, but decided against because of its complexity and steeper learning curve.