This project focuses on the development of a component repository using the Qwik framework for internal use by developers at LCC Opentech. The goal is to streamline the front-end development process and enhance component reusability within the company.
The project began with a comprehensive analysis, including a semi-structured interview with clients to gather functional and non-functional requirements. Understanding the clients' needs and the existing front-end development workflow at Opentech was crucial. Leveraging documentation provided by the company, the development environment was set up.
Components were developed using JSX and the TypeScript programming language, adhering to the Qwik framework. Integration with Storybook facilitated testing and documentation for each component. The results achieved align with the specific objectives and requirements outlined by the company.
- Qwik Framework: Used as the foundation for developing efficient and reusable components.
- TypeScript: Chosen for its statically-typed nature, enhancing code reliability.
- Storybook: Integrated for component testing and documentation.
Card
Documentation for Card
Header
Header with color variation
ImageBanner
Documentation for ImageBanner
CardService, the color is autogenerated
Documentation for CardService
Dropdown
Documentation for Dropdown
Button variation
Documentation for Button
Carousel
To run the project locally and see the rest of the components, follow these steps:
- Clone the repository: git clone https://github.com/luisamlopez/component-library.git
- Install dependencies: npm install
- Run Storybook: npm run storybook
- Visit http://localhost:6006 in your browser to explore and test the components using Storybook.