Positivus Landing Page
Deri Kurniawan
Posted at
Implementation of the Positivus Landing Page design using React.js, CSS with BEM methodology, Storybook, and Chromatic for component development, documentation, and testing. - Deri Kurniawan
Overview
Positivus is a design created by Olga on Figma Community and implemented into a web application by Deri Kurniawan.
In developing web applications with React.js, I often use TailwindCSS with UI Component Libraries such as ShadcnUI.
However, in this project I built with CSS3 and React.js, also not forgetting to use Storybook + Chromatic as a place to develop, document, and test the components built. In addition, in naming CSS classes, I apply the Mobile First approach and the CSS BEM (Block Element Modifier) writing style to maintain code consistency and readability even though I use CSS module in React.js.
Technical
In this project, I applied a slight variation of the Atomic Design approach by not placing components in separate folders. In the components I created, most of them have the asChild property, where the element defined as the container of a component will inherit its properties to the children element, which makes the component more dynamic and semantic in use. This method is inspired by Radix UI's component primitives called Slot.
See the following example:
Example of Using a Common Button Component (Example here)
<Button>Label</Button>
// output:
<button class="button button--primary">Label</button>Example of Using a Button by Including the
asChildproperty (Example here)
<Button asChild>
<a href="#" className="custom-class">Label</a>
</Button>
// output:
<a href="#" class="button button--primary custom-class">Label</a>From the code above, it is a button component with its own style, then passed down to the child element <a> anchor. As a result, the anchor element has the button style.
In the Contact Us section, I first created an API using mockapi.io. Then, I added form functionalities, including validation and error handling, as well as the ability to send POST requests to the API. You can view the submitted messages here.
I have also tested the web vitals with pagespeed.web.dev which has good results and you can see directly here.
Although the app was relatively small, just a landing page, I treated it as if it were a large-scale project. This allowed me to hone my front-end development skills by following the principle of using minimal libraries, while also testing and documenting the components with Storybook and Chromatic to ensure they were easily understood by other developers.
Role
Front-End Web Developer
Tech Stack
The technology stack used in this project:
HTML5
The latest version of HTML, providing new elements and APIs for better web page structure, multimedia, and offline capabilities.
CSS3
The newest version of CSS, adding advanced layout modules, animations, and responsive design features to enhance web styling.
React.js
A JavaScript library for building fast and interactive user interfaces using reusable components and state management.
TypeScript
A typed superset of JavaScript that improves code quality and maintainability by adding static type-checking.
Vite
A fast build tool and development server for modern web projects, leveraging native ES modules and providing instant HMR.
Storybook + Chromatic + Jest
A suite of tools for developing, documenting, visually testing, and unit testing UI components in isolation.
Period
July 26, 2024 - Aug 24, 2024
Resources
App Live Demo:
Source code in Github Repository:
Design By Olga on Figma Community:
https://www.figma.com/community/file/1230604708032389430/positivus-landing-page-design
You can see the documentation of the components published on Chromatic:
View messages sent in the Contact Us section directly in mockAPI
https://66c3d83bd057009ee9c1554a.mockapi.io/deri/dzr/api/messages
The following web vitals page speed test results:
https://pagespeed.web.dev/analysis/https-positivus-deri-my-id/j6fisdl84l?form_factor=desktop
