Helios

Helios AI is an AI-driven platform for commodity traders and agricultural buyers, offering real-time predictions on global agricultural supply chain risks and price changes.

It tracks 150+ countries and 50+ commodities using climate data, economic analysis, and machine learning models. The platform helps users identify supply disruptions, anticipate price shifts, and mitigate risks weeks in advance by analyzing billions of data points daily

helios map view

My Role

As a Frontend Developer in a startup, I’ve gained significant experience over the past 8 months, contributing to various aspects of the project.

vue

Initially, I helped migrate the MVP app from Vue.js to a React.js and Next.js environment, adapting the code to the new stack.

to-react

I continuously contributed to ideating and developing new features alongside the UX team and my senior frontend colleague. This involved researching the best libraries (date-fns, slate.js, etc) and documenting technical decisions and reasoning in Confluence.

confluenceslatedate-fns

I built new components using Styled Components and TypeScript, which were added to the Storybook-based component library. Some components were customized from the Carbon UI library.

carbon uistorybook

I worked extensively with the UI, gaining a strong understanding of Flexbox, Grid, and CSS in general. I also connected frontend components to backend services, integrating dynamic data from FastAPI endpoints for operations like adding, editing, and deleting data, ensuring smooth communication between the frontend and backend systems.
Additionally, I fetched data and managed state using React hooks like useState, useRef, useContext and costum hooks.

fast apireact hook

I also gained experience working with Git in a collaborative repository, handling contributions from multiple team members. Task management was done via Jira, and daily and weekly planning meetings ensured the team remained synchronized and focused.

jiragit

Some of the components I worked on include:

image 1

Image 1: Log in page

image 2

Image 2: Main page dashboard in map view, using mapbox library

image 3

Image 3: Insight's page climate tab, graphs made using recharts

image 4

Image 4: Notes page

image 5

Image 5: Main page dashboard in table view

image 6

Image 6: Mobile version of the user profile