Cardano Component UI Library [by Lido Nation]

[GENERAL] Name and surname of main applicant

Darlington Wleh

[GENERAL] Are you delivering this project as an individual or as an entity (whether formally incorporated or not)

Entity (Incorporated)

[GENERAL] Please specify how many months you expect your project to last (from 2-12 months)

9

[GENERAL] Please indicate if your proposal has been auto-translated into English from another language

No

[GENERAL] Summarize your solution to the problem (200-character limit including spaces)

A suite of professionally designed, expertly built Cardano and Governance-specific templates to accelerate app development: The perfect starting point for your next great Cardano project or prototype!

[GENERAL] Does your project have any dependencies on other organizations, technical or otherwise?

No

[GENERAL] If YES, please describe what the dependency is and why you believe it is essential for your project’s delivery. If NO, please write “No dependencies.”

No dependencies.

[GENERAL] Will your project’s output/s be fully open source?

Yes

[GENERAL] Please provide here more information on the open source status of your project outputs

The code will be made public and open source under Apache-2.0 license. 

www.cardanoui.dev will be available for free to the entire community.

[METADATA] Horizons

Developer Tools

[SOLUTION] Please describe your proposed solution

The Lido Nation crew is well known for education, catalyst tooling (www.catalystexplorer.com) and most recently voltaire tooling (https://1694.io). For each of these systems we’ve built, we’ve faced the same challenge: creating basic user interface for common Cardano things:

• signing a transaction
• Showing a single NFT
• Showing pool information
• Showing a list of proposals
• Showing a list of governance actions
• Showing a list of NFTs
• Showing wallet information
• Showing  list of Cardano translations, etc.

The Lido Nation crew is not alone in this. Every dex, aggregator, NFT marketplace, minter all show the same information with each team having to rewrite the same boilerplate html every time. 

The big idea

What if there were dozens of plug and play components you could simply grab, throw into your code, and customize? That’s the idea! We propose to build a high-quality ada-compliant component library designed by professional UI/UX experts, implemented by the Lido Nation crew. 

Not another NPM package

Note, this is not another framework. This is not another NPM package. We’re proposing a website you can go to, see a list of Cardano ui elements, pick the one you’re looking for, copy and paste directly into your code, and customize. Once you copy and paste your component, you own it, you get to customize it and evolve according to the specific needs of your application. No more css !import override hell. 

What Cardano UI elements

Inspired by our work with Intersect and our participation in the Catalyst Working Group event in Nairobi, we will first hold a series of community workshops to narrow down the list of UI elements. You can expect these basic elements atop of what the working groups come up with:

• List of Catalyst Proposals
• List of DReps
• List of Governance Actions
• List of Stake Pools
• List of NFTs
• List of Cardano transactions
• Single NFT
• Single Catalyst Proposal
• Single Stake Pool
• Single DRep
• Single Cardano Transaction
• Wallet Login
• Single Governance Action
• Cardano Wallet Information

[IMPACT] Please define the positive impact your project will have on the wider Cardano community

Having a list of Cardano-specific ui components to copy and paste will save developers and companies hundreds of hours. It will reduce writing and rewriting boilerplate code every time.  It will save companies and teams hundreds of thousands of ada if widely adopted and used. Rapidly prototyping will become even more rapid!

Since it’s not a framework or package to install, we will be able to measure the impact by:

• User Engagement Metrics: Track the number of visitors, page views, and engagement to the site. These metrics will be monitored through web analytics tools, and shared in project reports.
• Community Growth: Monitor social shares. Monitor contributions from other devs.

[CAPABILITY & FEASIBILITY] What is your capability to deliver your project with high levels of trust and accountability? How do you intend to validate if your approach is feasible?

The Lido Nation team has delivered 10 Project Catalyst projects, and is fully invested and involved in the community, at both virtual and in-person events. Darlington is a Cardano Ambassador and a full-stack Software and DevOps Engineer with experience running his own company.

Darlington is a full-stack Software and DevOps Engineer with experience running his own company.

[PROJECT MILESTONES] What are the key milestones you need to achieve in order to complete your project successfully?

Timeline 2 Months

Output: 

• Hold 2 community workshops
• User Stories
• UI/UX of 10 user stories
• Bootstrap open source repo

Acceptance Criteria: 

• Notes and findings from workshops.
• pdf and Mirro board of user stories.
• Figma designs of pages
• Link to git repository with contribution guideline and description of the project

Evidence: 

• Link to a google drive with pdfs 
• Figma for at least 10 component
• Link to Mirro board

Timeline 2 Months

Output: 

• Launch landing page of cardanoui.dev
• First 10 components live
• Figma designs of pages
• UI/UX of 15 user stories

Acceptance criteria: 

• Github repo updated with new code
• The public can visit https://www.cardanoui.dev and learn about the project
• The public can visit https://www.cardanoui.dev and see 10 components ready for copy-pasting. 

Evidence: 

• Components live at  https://www.cardanoui.dev 
• Figma for 15 components

Timeline 3 Months

Output:  

• 25 components live
• New UI/UX of last 25 components

Acceptance criteria: 

• The public can visit https://www.cardanoui.dev and see 25 components ready for copy-pasting.
• Github repo updated with new code

Evidence: 

• Components live at  https://www.cardanoui.dev 
• Figma for last 25 components
• Link to git release

Timeline 3 Months

Output: 

• 50 components available live
• Final close-out report
• Final closeout video

Acceptance criteria:  

• Github repo updated with new code
• The public can visit https://www.cardanoui.dev and see 50 components ready for copy-pasting.
• Final closeout report is publicly available
• Final closeout video is publicly available

Evidence: 

• Components live at  https://www.cardanoui.dev 
• Figma for last 25 components
• Link to git release

[RESOURCES] Who is in the project team and what are their roles?

We are Cardano enthusiasts and a growing collective of dreamers who believe in providing insightful education about Cardano in plain English, Swahili, and Spanish. Most online blockchain content is written by and for developers and finance geeks. We break down complicated technical ideas for everyday people, provide relevant news in quick bites, and build tools that everyone can use.

Our website is a resource for anyone who wants to learn what Cardano is, why they should care, and how they can participate. We want to make these resources accessible to as many people as possible.

Stephanie is a teacher and technologist with a passion for helping non-profits navigate and capitalize on technology. She applies her communication skills at Lido Nation by writing and editing articles, and helping to organize ideas in a way that people can understand.

Darlington is an engineer by day and at all times a dancer, humanitarian, idealist and entrepreneur. Darlington has deep knowledge about blockchain technology and broad experience in the Cardano ecosystem. 

www.lidonation.com 

https://www.linkedin.com/company/lido-nation

Darlington Wleh: Co-Dreamer at Lido Nation

Co-Founder of Lido Nation. 

Senior Developer. 

Blockchain writer & Educator. 

Cardano Ambassador.

https://www.linkedin.com/in/profd2004

https://twitter.com/LidoNation

Stephanie King: Co-Dreamer at Lido Nation

Co-Founder of Lido Nation.

Art & Design lead. 

Blockchain writer & podcaster. 

Cardano Ambassador.

Project manager

https://www.linkedin.com/in/phuffyking

https://twitter.com/Lido_Phuffy

Donbosco Otunga: Communication and Marketing Associate at Lido Nation

https://www.linkedin.com/in/dbao-don/

Emmanuel Titi: Nairobi Blockchain Lab Junior Developer Lead.

Titi has been on the Lido Developer team at the Ngong Road Blockchain Lab in Nairobi Kenya. Titi leads and manages an ever-changing staff of junior developers who come through our mentorship program to learn about Cardano, skill up on Web3 development, and contribute to active projects

[BUDGET & COSTS] Please provide a cost breakdown of the proposed work and resources

Community Workshops - 5,000 Ada

UI/UX Design - 44,000 Ada

Development - 72,000 Ada

Server + Maintenance for 1 Yr - 12,000 Ada

Project Management - 12,000 Ada

Marketing - 15,000 Ada

[VALUE FOR MONEY] How does the cost of the project represent value for money for the Cardano ecosystem?

cardanoui.dev is poised to have a significant positive impact on the Cardano community by addressing a common pain point for developers: the repeated creation of basic user interface (UI) elements for Cardano-based DApps. Here's how this project could be beneficial:

Efficiency and Cost Savings: By providing a library of reusable UI components, developers can drastically reduce the time and resources needed to build and prototype Cardano applications. 

Enhanced Innovation: With easier access to standard components, developers can focus more on creating innovative solutions rather than dealing with repetitive UI coding. 

Consistency and Quality: The involvement of professional UI/UX experts in designing these components ensures that they are not only functional but also aesthetically pleasing and user-friendly. This can improve the overall quality and user experience of Cardano applications, making them more appealing to end-users.

Community Engagement and Collaboration: The project plans to involve the community in deciding which components to develop through workshops and feedback sessions. This engagement can enhance community collaboration and ensure that the tools developed are genuinely useful and desired by the community.

Accessibility and Customization: Since the components are designed to be easily integrated and customized, developers have the flexibility to adapt them to their specific needs. This makes it easier for a wide range of projects to benefit from the library, regardless of their scale or specific requirements.

Measurement of Impact: The project's impact can be directly measured through user engagement metrics and community growth indicators:

• Web metrics as indicator of the components being used
• More developer contribution to the project

cardanoui.dev could serve as a foundational tool that empowers developers, enhances the quality of Cardano-based applications, and fosters a more collaborative and innovative ecosystem within the Cardano community.