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.
Duration
01.2024 – 03.2024
teCHNOLOGIES
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.
deveLOPMENT PROCESS
- 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.
Roadmap
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
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.
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.
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".
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.
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.
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.
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.
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.
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.
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
