@iamwal.near [Posted on DevHub](/devgovgigs.near/widget/Post?id=3042) ## Solution: UI is Near: A plug-and-play component library unlocking seamless design for NEAR BOS ###### Requested amount: 33150 USDT ###### Requested sponsor: @neardevdao.near ## **UI is Near** A plug-and-play component library unlocking seamless design for NEAR BOS ### **Overview:** UI is Near is not just a repository; it's the go-to destination for unlocking a world of effortless design solutions for NEAR BOS. This project is designed to redefine the development experience by providing a comprehensive plug-and-play component library with crystal-clear documentation and thus, ease the entry barrier for new developers during hackathons and other onboarding activities, projects and events and also improve the development process for seasoned NEAR devs. ### **Motivation:** **1. Our Motivation:** As active participants in numerous hackathons and contributors to NEAR's thriving ecosystem, we couldn't help but notice a shared sentiment within the developer community. We listened attentively to their discussions about NEAR, absorbing all the feels: their insights, frustrations, and aspirations. What did we find out? Despite the innovative potential and promising bounties offered by NEAR, some developers would stay on the fence. That’s when it hit us, everyone's facing this same challenge: too much information, scattered and little to no clue of where to start. So we said, “They need something slick, easy, like a plug-and-play magic wand for developing, let's make NEAR a no-brainer for every dev out there, from the code wizard to the hackathon hero!”. This is how the idea for UI is Near was born. UI is Near serves as a solution crafted by developers for developers, driven by a genuine passion for making NEAR an irresistible choice for every developer, hackathon enthusiast, and project pioneer who want to build for the Open Web. **2. A She is Near + Dev Hub initiative:** Built by the community of She is Near in collaboration with Dev Hub, UI is Near is our initiative for the NEAR Ecosystem. This project aligns with both She is Near and NEAR Dev Hub core values and goals of onboarding new devs into the ecosystem and increasing retention while fostering an inclusive and supportive developer community that includes women of all backgrounds. ### **Key Features:** With a “for dummies” approach, we want to show devs how the components were built and also facilitate their styling. In other words, create the type of libraries that already exist in Web2 to facilitate onboarding and continuous work on Web3. A developer’s dream. * **Entry point for Devs:** UI is Near allows devs new to Near, whether at hackathons or other projects, programs or events, to focus on what matters most, accelerating the development process and enabling them to bring their ideas to life swiftly. * **Custom Designed Components:** Accessible and customizable UI is Near will offer 37 components designed to facilitate and enhance the visual appeal and functionality of front-ends built on BOS. These components are: 1. accordion 2. alert-dialog 3. alert 4. aspect-ratio 1. avatar 1. badge 1. button 1. card 1. checkbox 1. collapsible 1. context-menu 1. dialog 1. dropdown-menu 1. hover-card 1. input 1. label 1. menubar 1. navigation-menu 1. pagination 1. popover 1. progress 1. radio-group 1. scroll-area 1. select 1. separator 1. sheet 1. skeleton 1. slider 1. switch 1. table 1. tabs 1. textarea 1. toast 1. toaster 1. toggle-group 1. toggle 1. tooltip * **Crystal-Clear Documentation:** UI is Near will be accompanied by detailed and user-friendly documentation, providing developers with comments on how the code works and how to use it. * **Effortless Integration:** UI is Near will ensure a seamless integration process, reducing development time and eliminating repetitive tasks. As simple as importing a ready-to-use component into a project, or have the possibility to copy/paste the code to customize at will. * **Analytics and User Engagement Tracking:** We will implement tracking mechanisms to monitor the number of visitors to our website, analyze user interactions, and assess the popularity of specific components. ### **Timeline:** The project is anticipated to span 13 weeks, divided into 4 phases. **1. Milestones: (In labor days)** **First Milestone:** * Create web design for documentation (Agree on timeline with Dev Hub designer) * Define first 12 components we will work on * Account Creation for hosting the components (UI is Near) * Create Github repository * Web implementation with dummy components for validation * Creation and styling of 12 components * Create examples for documentation * Create Web3 NEAR integrations for needed components * Testing of 12 components * Integrating 12 components in the documentation * Send to Dev Hub for test run before going live First Test run with Dev Hub: Day 1 - 20 First part going live: Day 25 **Second Milestone:** * Define first 12 components we will work on * Creation and styling of 12 components * Create examples for documentation * Create Web3 NEAR integrations for needed components * Testing of 12 components * Integrating 12 components in the documentation * Send to Dev Hub for test run before going live Second Test Run with Dev Hub: Day 21 - 35 Second part live: Friday, Day 40 **Third Milestone:** * Define first 13 components we will work on * Creation and styling of 13 components * Create examples for documentation * Create Web3 NEAR integrations for needed components * Testing of 13 components * Integrating 13 components in the documentation * Send to Dev Hub for test run before going live Third Test Run with Dev Hub: Day 36 - 50 Third part live: Friday, Day 55 **Fourth Milestone:** * Define variants for all 37 components * Modify and style 37 components * Create examples for documentation * Testing of 37 variants of components * Integrating 37 variants of components in the documentation * Send to Dev Hub for test run before going live Fourth Test Run with Dev Hub: Day 51 - 65 Fourth part live: Day 70 **2. Deliverables:** **First Milestone** * PRD for developers * List of components to be added and design * Review and approve the UI/UX design (Figma file, from wireframes to components) * Implementation of the design in to BOS widget * Share Github with Dev Hub * First version goes live **Second Milestone** * List of components to be added and design * Review and approve the UI/UX design (Figma file, from wireframes to components) * Implementation of the design in to BOS widget * Share Github with Dev Hub * Second version goes live **Third Milestone** * List of components to be added and design * Review and approve the UI/UX design (Figma file, from wireframes to components) * Implementation of the design in to BOS widget * Share Github with Dev Hub * Third version goes live **Fourth Milestone** * List of components to be added and design * Review and approve the UI/UX design (Figma file, from wireframes to components) * Implementation of the design in to BOS widget * Share Github with Dev Hub * Fourth version goes live ### **Request for Dev Hub support:** **1. Web Design Collaboration:** We understand the importance of maintaining a cohesive look and feel within the NEAR ecosystem. To ensure consistency, we kindly request the assistance of Dev Hub’s web designer to collaborate with us. Our aim is to integrate UI is Near seamlessly while adhering to the established design guidelines. By working together, we believe we can create a harmonious visual experience that aligns with both NEAR's aesthetic and the specific requirements of our component library. **2. Package Integration into NEAR BOS:** In addition to the design collaboration, we are seeking support for the integration of **clsx**: A tiny utility for constructing classname strings conditionally. Also serves as a faster & smaller drop-in replacement for the classnames module. Also, the integration of **class-variance-authority**: It's a function that takes in a ClassValue (styles assigned using the className), along with optional configurations for variants, default variants, and compound variants. We believe that adding these packages will contribute to the accessibility and ease the creation of the components for all developers working within the NEAR ecosystem. ### **The Team:** **1. Megha - Web3 Developer Lead** I am a Web3 developer, deeply immersed in the NEAR blockchain for over a year. My journey has seen me contribute to various impactful projects, including with NDC on Astra++, and I-m-human. I've actively contributed to the Dev Hub platform, played a role in NearBuilders, and collaborated on numerous other intriguing ventures within the NEAR ecosystem. As a proud member of "She is NEAR," I'm passionate about empowering women in the blockchain space. I believe in creating opportunities that break down entry barriers, making the NEAR Ecosystem more inclusive and diverse. **Github:** https://github.com/Megha-Dev-19 **2. Gonzalo - Web2 Developer** As a seasoned Full-Stack Developer with over 20 years of experience, I've cultivated a strong technical foundation, specializing in client-side and server-side programming, SQL database design and REST API development. I entered the blockchain space in 2023 through Alchemy University. I then participated (and won) in hackathons such as Eth Barcelona and Eth Global Istanbul, this last one with NEAR. Beyond technical skills, I possess a deep understanding of collaborative team dynamics and a commitment to delivering quality results. My journey involves a unique blend of technical expertise, marketing, and branding, acquired through self-driven learning over the past decade. I want to support the initiative by She is Near because I think it is a great project and a tool I would have liked to have during my participation at the hackathon. This is going to help many developers to enter Web3 and use NEAR. **Github:** https://github.com/gonzalobarria **3. Souheila - Junior Developer** I'm Souheila, a passionate Software Engineer with a keen eye for design. I hold a master's degree in teaching and have gathered over 6 years of experience in various creative roles, including Graphic Designing, Digital Marketing, and Video Editing. My love for technology has led me to embark on a journey to excel in Software Engineering, where I aim to use my creative skills to craft elegant and efficient solutions. I was one of the winners of Nearcon Hackathon 2023 in Lisbon, I’m passionate about all things NEAR and want to dive deeper and create tools that benefit all, also She is Near aligns with my values and mission of paving the way for other women to become developers and also enter Web3. **Github:** https://github.com/Souheilaso **4. Waleska - Project Manager** With a versatile background spanning hotel & events management, financial coaching, and online business consulting, I bring a unique blend of entrepreneurial skills to our team for Project Management. My involvement with Blockchain developers started back in 2022, I attended the Women Hack hackathon in Lisbon, then I co-organized Eth Barcelona Hackathon and hosted my first Hackathon in Madrid with Block&Change, a project I co-founded in 2023 where NEAR participated as sponsor. I have joined She is Near to propel and support the inclusion and growth of women devs into the ecosystem. **Linked In:** https://www.linkedin.com/in/waleskacerpa/ ### **Budget:** Milestone 1: 10200 USDT Milestone 2: 7650 USDT Milestone 3: 7650 USDT Milestone 4: 7650 USDT Please see full budget breakdown here: https://docs.google.com/spreadsheets/d/1o-ewI3EwNgo3jbCM3c8Aeo9dfvvPXXj6YyX-b2JyUNU/edit?usp=sharing ### **In a Nutshell:** This project liberates devs from the noise of all the scattered information and documentation for the tedious tasks of styling basic elements, allowing them to concentrate on the essential aspects of their project, especially when they are under a tight schedule. The Open Web and NEAR BOS adoption can be accelerated through faster, more efficient, and visually appealing development upgrades with UI is Near.