FrontRevamp: A Material Design Makeover for Substrate Front-End Template
- Team Name: IgorStojanov
- Payment Address: Fiat 20.12.2023, 16.32
- Level: 1
Project Overview 📄
Our project seeks to elevate the user experience and design aesthetics of the substrate-front-end-template by transitioning to Material Design UI. With the growing emphasis on user-centric interfaces, the adoption of Material Design principles will not only enhance the visual appeal of Substrate but also streamline navigation and improve overall usability. This should enable developers to build more appealing application, without applying too much effort. By reimagining and implementing Material Design components, we aim to create a intuitive and responsive interface that aligns seamlessly with modern design standards.
Overview
This project aims to enhance the user experience of the substrate-front-end-template by migrating to Material Design UI, ensuring a visually appealing, intuitive, and modern interface that aligns with contemporary design standards.
Project Details
The project scope encompasses a comprehensive overhaul of the Web3 Foundation's React substrate-front-end-template, focusing on the adoption of Material Design UI principles. This includes redesigning key user interface elements, such as navigation menus, buttons, forms, and overall layout, to align with the Material Design aesthetic. The scope also involves the development and integration of Material Design components and patterns, ensuring a cohesive and consistent user experience across the platform.
The project will leverage the latest technologies and frameworks compatible with React, such as Material-UI, to implement these design changes efficiently. Additionally, the scope involves rigorous testing to guarantee compatibility, responsiveness, and accessibility across various devices and browsers. This project aims to not only meet the WEB3 Foundation's current needs but also establish a foundation for future scalability and adaptability to emerging web technologies.
Mockup
Ecosystem Fit
The proposed project to rewrite the substrate-front-end-template using Material Design UI has several implications for enabling developers to build better UI and benefiting the Substrate ecosystem.
-
Enhanced User Experience: By adopting Material Design principles, developers gain access to a well-established and user-tested set of design guidelines.
-
Accelerated Development: Material Design provides developers with pre-designed components and styles. This accelerates development cycles, allowing developers to focus more on refining features and functionality rather than spending time on the nitty-gritty details of UI design.
-
Responsive Design: Material Design inherently encourages responsive design practices. This means the UI will adapt seamlessly to various screen sizes and devices, providing a consistent and user-friendly experience across desktops, tablets, and mobile devices.
-
Accessibility Standards: Material Design is designed with accessibility in mind, ensuring that the UI is usable by individuals with disabilities.
-
Community Support: Material Design has a vast community of designers and developers contributing to its evolution. By aligning with this design language, developers can tap into a wealth of resources, forums, and libraries, fostering collaboration and knowledge exchange within the broader development community.
-
Adoption and Attraction of Talent: A modern, well-designed UI can make the Substrate ecosystem more attractive to developers and users. A visually appealing and user-friendly interface can play a crucial role in attracting new talent and encouraging adoption, thereby strengthening the Substrate ecosystem as a whole.
Team 👥
Team members
- Team member: Igor Stojanov
Contact
- Contact Name: Igor Stojanov
- Contact Email: contact@igorstojanov.com
- Website: https://igorstojanov.com
Legal Structure
- Registered Address: N/A
- Registered Legal Entity: Individual
Team's experience
Igor is Software Architect, currently based in Eindhoven, The Netherlands. Born in Macedonia, finished undergraduate studies in USA. Worked for large multinational organizations such as Philips, Signify, TYMLEZ and BearingPoint.
Igor Stojanov is also the founder of UniversalDot Foundation which aims to create software applications for the decentralized internet. As such, the UniversalDot Foundation is recipient of WEB3 Grant previously.
The team that was previously assembled is no longer active, and this grant is to be completed as private person.
Team Code Repos
https://github.com/stojanov-igor
Team LinkedIn Profiles
https://www.linkedin.com/in/igor-stojanov-96364ba/
Development Status 📖
Development Roadmap 🔩
Overview
- Total Estimated Duration: 2 months
- Full-Time Equivalent (FTE): 1 FTE
- Total Costs: 10,000 USD
Milestone 1 — Design & Initial code
- Estimated duration: 1 month
- FTE: 1
- Costs: 5,000 USD
❗ The default deliverables 0a-0d below are mandatory for all milestones, and deliverable 0e at least for the last one.
| Number | Deliverable | Specification |
|---|---|---|
| 0a. | License | Apache 2.0 |
| 0b. | Documentation | We will provide inline documentation of the code |
| 0c. | Docker | We will provide a Dockerfile(s) that can be used to test all the functionality delivered with this milestone. |
| 2. | Menu Header | UI element that replaces existing menu items |
| 3. | Footer | New Element for implementing a new UI Element footer |
| 4. | Polkadot Extension | Ensure working connection with Polkadot extension |
| 5. | Light/Dark Mode | Enable styling switch to dark and light mode |
| 6. | Typescript Migration | Migration of current Javascript implementation to Typescript |
Milestone 2 — Full implementation
- Estimated Duration: 1 month
- FTE: 1
- Costs: 5,000 USD
| Number | Deliverable | Specification |
|---|---|---|
| 0a. | License | Apache 2.0 |
| 0b. | Documentation | We will provide inline documentation of the code |
| 0c. | Testing and Testing Guide | Core functions will be fully covered by comprehensive unit tests to ensure functionality and robustness. In the guide, we will describe how to run these tests. |
| 0d. | Docker | We will provide a Dockerfile(s) that can be used to test all the functionality delivered with this milestone. |
| 0e. | Article | We will publish an article/workshop that explains [...] (what was done/achieved as part of the grant). (Content, language, and medium should reflect your target audience described above.) |
| 1. | Cards Module | Implement dashboard cards with basic statistics about the blockchain. |
| 2. | Table Module | Add table that holds Account balances that can be loaded from Polkadot Extension |
| 3. | Transfer Module | Simple module to transfer tokens from one acount to another |
| 4. | Upgrade Runtime Module | Ensure users can upload a wasm File from the UI that allows them to upgrade their runtime |
| 5. | Pallet Interactor | Module that allows interaction with extrinsics and queries |
| 6. | Event Module | Displaying latest events that happens on-chain |
...
Future Plans
- Build more UI pages/components that allow developers to build better dApps with improved user experience.
Additional Information ➕
How did you hear about the Grants Program? Web3 Foundation Website