Quizzes (Library)
In 2022, I created a TypeScript library that allows users to answer quiz questions and capture their email.
This library allows for great customization and can be easily embedded on any website.
This library, called lead-generation-library, is made using the following technologies:
- TypeScript
- WebPack
- zustand (state management)
- jsonschema (schema validation)
- styled-components
Here you can see the library in action.
Requirements
I needed a library that lets a user answer pre-defined quiz questions AND captures their email (by sending it to an API).
Also, the library needed to:
- Be small
- Be easy to embed
- Support mobile
- Be easy to customize
- Support dark/light modes
- Support multiple locales
Development
The development of this library took a little over a month and was smooth.
For state management, I chose zustand, my go-to state management solution for all libraries.
Also, I needed a way to validate large configuration files with many properties. That's why I chose jsonschema, a fast and easy way to validate JSON schema.
Then, to style all my components, I chose styled-components to be able to write my CSS easily.
Finally, I needed some icons, and what's better than font-awesome for this task?
Here is a code portion from the project:
typescriptexport class LeadGenerationLibrary {
public init (element: HTMLElement, config: IConfig): void {
validateConfig(config);
const root = createRoot(element);
root.render(<App config={config} />);
}
public getVersion (): string {
return __VERSION__;
}
}
Some screenshots
Here are some example screenshots of the library in action.
A main screen:
A question screen:
An email lead capture screen:
A results screen:
Final thoughts
Overall, I really liked working on this project.
It was also my first time working with JSON schema on the front end, which I also enjoyed.
Try this library for yourself and embed it on your website.
Links: [View Code]