luisamlopez / qwik-component-library

Component Library for Qwik, tested with Storybook as HTML.

Project Name: Qwik Component Repository

Overview

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.

Project Description

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.

Tools Used

• 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.

Screenshots

Card component

Card

Documentation for Card

Header component

Header

Header with color variation

ImageBanner component

ImageBanner

Documentation for ImageBanner

CardService component

CardService, the color is autogenerated

Documentation for CardService

Dropdown component

Dropdown

Documentation for Dropdown

Button component

Button variation

Documentation for Button

Carousel component

Carousel

Documentation for Carousel

Getting Started

To run the project locally and see the rest of the components, follow these steps:

1. Clone the repository: git clone https://github.com/luisamlopez/component-library.git
2. Install dependencies: npm install
3. Run Storybook: npm run storybook
4. Visit http://localhost:6006 in your browser to explore and test the components using Storybook.