About project

The Joystream dashboard offers a comprehensive overview of essential company data and performance metrics, covering aspects such as tokens, supporters, progress, development, community engagement, team dynamics, comparative analysis, and future plans.


01.2024 – 03.2024


Gatsby.js, React, Sass, Classnames, react-spring, React Helmet, react-modal, Vimeo Player API, Recharts, pure-react-carousel, react-responsive, prop-types.

Business solutions

  • Direct Monetization: Joystream allows creators to earn directly from their content, bypassing middlemen.
  • Community Governance: Users have a voice in platform decisions, promoting a decentralized approach
  • Automated Transactions: Smart contracts handle transactions and revenue sharing efficiently, ensuring transparency.
  • Personalized Discovery: Advanced algorithms tailor content recommendations for users, boosting engagement
  • Strong Privacy: Joystream prioritizes user privacy with decentralized storage and encryption, building trust.


  • Orchestrated the development workflow by structuring pull requests in Git, complete with detailed comments to foster team comprehension and facilitate smooth review processes.
  • Emphasized a responsive user interface to ensure a visually captivating and functional dashboard across various devices.
  • Crafted semantic and accessible markup, enhancing user experience while bolstering SEO efforts.
  • Adhered to the BEM methodology for styles, promoting clear naming conventions for efficient development.
  • Leveraged Gatsby.js with server-side rendering for optimal initial page load speed and SEO advantages.
  • Integrated APIs to ensure users have access to real-time information.
  • Implemented internationalization (i18n) for a seamless user experience catering to a global audience.


Development Workflow & Responsive Design

Jan - Feb 2024

● implemented a well-organized pull request system to promote efficient team collaboration;
● developed semantic and accessible markup, with stylesheets corresponding to the BEM naming convention, for header, hero, token, backers, traction, engineering, community, team, comparison, and roadmap sections.

API Integration and Internationalization

Feb - March 2024

● established API integration to provide users with the most up-to-date information;
● introduced a visual loading state to indicate that data is being fetched;
● implemented internationalization (i18n) to support multiple languages to reach a global audience.

Main Functionality

Project Description Image

Navigation System

This feature enhances user experience with a smooth navigation system:

Anchors: Clicking navigation links scrolls smoothly to sections.
Scroll Tracking: The navigation bar smoothly appears when scrolling up and hides when scrolling down, maintaining focus on content.
Project Description Image

Video Player

This feature adds a video player using Vimeo Player API and react-modal. Users can open the video in a modal window and close it by clicking outside the video or pressing "Escape".
Project Description Image

Copy to Clipboard

This feature allows users to share page sections effortlessly. Each section has a "Copy link to this section" button that instantly copies the link to the clipboard. A custom tooltip confirms successful copying, and users can adjust the scroll margin for a tailored viewing experience.
Project Description Image

Term Definition Tooltip

This feature enables users to understand highlighted terms without leaving the main content. Each term has an adjacent "i" button; hovering over or clicking it reveals the term's definition.
Project Description Image

Composed Chart

The chart, created using the recharts library, merges area and bar chart visuals for data presentation. It's distinguished by its extensive customization, altering various visual elements like axes, ticks, dots, and tooltips to accurately represent data and improve user experience.
Project Description Image

Grid Layout with Placeholder Handling

The responsive grid layout automatically adjusts its setup according to screen size, ensuring optimal viewing across devices like phones, tablets, and desktops. When there aren't enough items to fill a row at a breakpoint, placeholders maintain a consistent grid structure.
Project Description Image

Area Chart with Interactive Legend

This chart provides interactive features for dynamic data exploration. Clicking or hovering over legend items highlights corresponding areas, and vice versa. Additionally, a dynamic reference line adjusts to indicate the current month based on the launch date.
Project Description Image

Interactive Pie Chart

When hovering over a section of the pie chart, the corresponding label in the legend is visually highlighted. This dual-channel highlighting reinforces the connection between the data point and its information in the legend.
Project Description Image

Reusable Bar Chart Widget

While built upon recharts, this component offers various customization options to tailor its appearance and behavior to specific requirements. This includes customizing colors, labels, etc. This component can be easily integrated into different parts of an application, promoting code maintainability and consistency.

Contact Us

Please contact us for any further information