ODHack: Improve Frontend

[Julian-dev28]

Please add PRs to the update-P21 branch

Description:
Enhance the frontend of the Soroban Example Dapp to improve user experience, visual appeal, and functionality.

Tasks:

• 1. Redesign UI/UX : $150

  • Analyze the current user interface and user experience.
  • Propose and implement design improvements to make the Dapp more intuitive and visually appealing.
  • Ensure a consistent design language across all pages.

• 2. Improve Responsiveness: $150

  • Ensure the Dapp is fully responsive and works seamlessly across different devices and screen sizes.
  • Test the Dapp on various browsers and devices to identify and fix any responsiveness issues.

Expected Outcome:

• A redesigned and visually appealing frontend for the Soroban Example Dapp.
• Improved responsiveness and performance across all devices and browsers.
• Smooth animations and transitions for a better user experience.
• A functional dark mode with a toggle switch.
• Improved form validation with clear and helpful error messages.

Why This Is Important:
Improving the frontend of the Soroban Example Dapp will significantly enhance the user experience, making the Dapp more accessible, responsive, and visually appealing. These enhancements will provide a better overall experience.

[armsves]

I will work on this as discussed

[HumbertoTM10]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have 4 years working in development environments, have encountered several challenges, requests and teams focusing in reusable and efficient code, so that gives me a better understanding of the code and how to solve problems efficiently.

How I plan on tackling this issue

First of all, I would analuze the UI/UX so I can identify opportunities for improvement and then work towards improvement in responsiveness with the respective testing on different devices.

[FlamesInTech]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I'm Shalom, a professional frontend developer with 3yrs+ of experience using;

• HTML,
• CSS,
• JS,
• SCSS,
• REACT
• Angular
• PHP

I've worked with different complex UI designs and I'm eager to get on this issue

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

How I plan on tackling this issue

Thoroughly Analyze the design
Ensure a clean and efficient code is written.
Check for possible issues with design measurements or sizes
Replicate exact interface as per design and instructions.
Add smooth animations.

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

[chibokaxavier]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, my name is Chiboka Emmanuel, and I am a software engineer specializing in frontend development with over three years of experience. I have a strong command of CSS, Tailwind CSS, and a range of other frontend technologies including Next.js, React.js, and TypeScript.

How I plan on tackling this issue

1-Analysis and Research: I will start by thoroughly analyzing the present user interface and user experience, marking out areas for improvement through user feedback.
2-Propose Design: I will propose design enhancements that make the Dapp more intuitive and visually cohesive. This includes creating wireframes and prototypes to visualize the proposed changes.
3-Implementation: Using frontend frameworks such as Next.js and Tailwind CSS, I will implement the design improvements, ensuring a consistent design language
4-Responsive Design: I will ensure the Dapp is fully responsive, utilizing CSS Grid, Flexbox, and media queries to make the Dapp adapt seamlessly to different devices and screen sizes.
4-Design: I will create a visually appealing toggle switch which will be placed in a prominent location using CSS and JavaScript or React components. The switch will be easy to use and will clearly indicate the current mode (dark or light).

[Ugo-X]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello Project Lead! I'm Ugo, a fullstack (js,React,Node,Next.js,Three.js) developer with a strong track record in OD hack projects. I've been actively involved since Edition 1, contributing to various initiatives, and I'm thrilled to be part of Edition 6!
Having used OnlyDust extensively (see my profile: https://app.onlydust.com/u/Ugo-X)), I'm confident in my ability to tackle new challenges within this edition.
I'm eager to leverage my skills and experience to contribute effectively.

[ShantelPeters]

I am applying to this issue via OnlyDust platform

As a frontend developer with experience in building interactive UI components and API integrations, I'm confident in my ability to tackle this challenge. My background in UI/UX design and development has equipped me with the skills to create intuitive and visually appealing interfaces. I'm well-versed in HTML, CSS, JavaScript, and TypeScript, having worked on multiple projects that utilize these technologies.

Approach to the Problem:

1. Analyze Current UI/UX: I'll analyze the current user interface and user experience, identifying areas for improvement.
2. Propose Design Improvements: I'll propose design improvements to make the Dapp more intuitive and visually appealing, ensuring a consistent design language across all pages.
3. Implement Redesign: I'll implement the redesign, focusing on improving responsiveness, performance, and user experience.
4. Test and Refine: I'll thoroughly test the Dapp on various browsers and devices, identifying and fixing any responsiveness issues.

Solution:
My proposed solution involves analyzing the current UI/UX, proposing design improvements, implementing the redesign, and testing and refining the Dapp.

Technical Details:

• I'll use HTML, CSS, JavaScript, and TypeScript to implement the redesign.
• I'll utilize modern frontend development tools and best practices to ensure a smooth and responsive user experience.
• I'll ensure the Dapp is fully responsive, works seamlessly across different devices and screen sizes, and has smooth animations and transitions.

[0xdevcollins]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

With 3 years of solid experience in JavaScript, TypeScript, and React, I have developed a strong proficiency in creating intuitive and visually appealing user interfaces. My work on various projects, including browser extensions such as Huddle Screenshare Capture, has provided me with valuable insights into enhancing user experience and ensuring responsiveness across different devices.

How I plan on tackling this issue

Analyze the Current Interface:
Conduct a thorough review of the existing UI/UX to identify pain points and areas for improvement.

Propose Design Improvements:
Develop wireframes and mockups to visualize the proposed changes.
Ensure that the design is consistent with the overall branding and design language of the Dapp.
Include features such as a functional dark mode, smooth animations, and transitions to enhance user experience.

Ensure that the new design is responsive and adapts well to different screen sizes and devices.

Perform usability testing to validate the effectiveness of the new design.

Cross-Browser Testing:
Test the Dapp on different browsers (e.g., Chrome, Firefox, Safari) to ensure consistent performance and appearance.
Address any browser-specific issues that may arise.

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @Julian-dev28 ,

I'm excited about the opportunity to enhance the frontend of the Soroban Example Dapp. My track record includes the successful implementation of the block details page in op-scan project during the last ODHack, which was recognized for its quality. With my 3 years of expertise in Next.js, TypeScript, Shadcn, and React, I am confident in my ability to significantly improve the user experience, visual appeal, and functionality of the Dapp.

How I plan on tackling this issue

Proposed Solution for Enhancing the Soroban Example Dapp Frontend

##UI/UX Redesign:

• I will identify current UI/UX pain points and areas for enhancement.
• i will develop wireframes and high-fidelity prototypes using Figma or Sketch, focusing on improving usability and visual coherence.
• I will implement the new design using Tailwindcss and framer motion.
• I will ensure adherence to design principles and consistency in design language across all pages and components.

Responsiveness Improvement:

• I will implement responsive design techniques using CSS Grid and Flexbox to ensure seamless operation across various screen sizes and devices.
• I will conduct cross-browser and cross-device testing using tools like BrowserStack to identify and resolve any layout and functionality issues.
• i will optimize media queries and breakpoints for different screen sizes to enhance the user experience on mobile, tablet, and desktop devices.

Expected Outcome:

• A visually appealing and functionally robust frontend for the Soroban Example Dapp, significantly improving user engagement and satisfaction.
• Enhanced responsiveness and performance across all devices and browsers, ensuring a consistent and smooth user experience.
• Smooth animations and transitions, contributing to a polished and dynamic interface.
• A functional dark mode with a toggle switch, allowing users to customize their viewing experience.
• Improved form validation with clear and helpful error messages, ensuring accurate user input and reducing friction.

I hope to get this task assigned to me and i will deliver a top-notch and user-friendly interface.

[lindsaymoralesb]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi! My name is Lindsay, and I'm a Software Engineer based in Costa Rica. I'm part of Dojo Coding community, and thanks to that I've already successfully contributed to the last 4 ODHacks in various projects, feel free to check my profile and contributions.
I've been working over the past 4.5 years as a full stack developer, specializing myself in frontend development. I've successfully integrated APis, developed new features, optmize projects, improving responsiveness, etc with the most known/used FE frameworks such as React, Next, Vue, and Angular. All this experience plus some courses I've taken had helped me master both javascript and typescript languages.

How I plan on tackling this issue

With my experience on frontend development, I'm sure I can easily tackle the second task "Improve Responsiveness". I would love to tackle this issue with the help of a designer that would work on the first task.

1. I would review the figma/adobe/other platform designs or suggestions made by the designer to make sure I understand the complete flow and changes to implement it.
2. Start implementing the changes. I would check the styles on the project to make sure we are using the correct breakpoints.
3. For every fix/feature I would test the platform on multiple browsers (safari, chrome, firefox) to ensure cross-browser compatibility. I would also take advantage of dev tools to simulate different devices and make sure it is fully responsive.

Note: If no designer available and/or applied for the task. I would make sure to dive deep into the UI to propose some improvements.

[Whevalmeze]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have several experiences building dashboards as i mainly major in building fintech websites as a frontend developer. I have also participated in dashboard building context on X. My most recent project also involved me building a responsive admin dashboard.

How I plan on tackling this issue

Firstly, I would understand the user flows and navigations. Then check if there is a design system that is used, if not create one. Then, I would contact the Soroban team to propose a few changes if needed. After this, I would design the dashboard for various screen sizes to be more intuitive and straightforward. Alongside, I would design the dark mode to complement. After that, I would build it with react-typescript, ensuring full responsiveness and a toggle switch for dark mode. Then I would add some animations and transitions with framer-motion while ensuring the performance is not lagging either. to make it more appealing and interactive for the user. Lastly, I would test it on different screens before merging.

[PoulavBhowmick03]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a seasoned fullstack blockchain developer, with over 2 years of experience
I have contributed to many open source repositories and also to OnlyDust

How I plan on tackling this issue

I will go through the repository, I will check some similar designs and improve on it. I will add responsiveness across all sorts of devices and will test it in multiple screen sizes
I will also implement amazing UI UX, add consistency across the pages and make it appealing

[Ugo-X]

Thank you I will start working on it and be sure to relay updates.

[Ugo-X]

currently working on this @Julian-dev28
please can i get more details on maybe what components or functions are needed so i can propose a design or do i redesign the crowdfund template page that is available

[Ugo-X]

currently working on this @Julian-dev28 please can i get more details on maybe what components or functions are needed so i can propose a design or do i redesign the crowdfund template page that is available

Good morning @Julian-dev28 please could i get some clarification on this?

[Ugo-X]

@Julian-dev28 my proposal for the redesign

https://www.figma.com/proto/JY2dP1yA8tRWLcf4Apavqf/Untitled?node-id=1-2&t=5nNkSMXgy3p52PvT-1&scaling=scale-down-width&content-scaling=fixed&page-id=0%3A1