Build Event Overview Screen

Calebux commented 1 month ago

Implement the Event Overview Screen according to the Figma design provided. This screen will display key details about an event and must be visually appealing and functional.

Requirements: Build the Event Overview Screen based on the Figma design (link to Figma will be added). Ensure the layout is fully mobile-responsive. Adhere to the gradient style and color scheme specified in the design. Ensure all elements (text, images, buttons, etc.) function as intended. Test the screen for both mobile and desktop views to ensure consistency and performance.

Please refer to the Figma design here: https://www.figma.com/design/Z1IebD0dM4HMDDnlxzhV6R/Untitled?node-id=801-1514&node-type=canvas&t=tRf2C0gaILTQeHdU-0

Otaiki1 commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello i am a fullstack developer with experience with building dapps. I am super eager to contribute to this project

How I plan on tackling this issue

I would follow the style file dilligiently and ensure everything works as described

martinvibes commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello @ i'm an experienced frontend developer and a blockchain developer i would love to work on this issue Pleasee kindly assign :)

How I plan on tackling this issue

I will carefully inspect Figma for precise spacing, layout, and components behavior
Build UI using CSS and Tailwind CSS as appropriate.
Test across all screen sizes for responsive behavior
Optimize images, animations, and code for performance

CollinsC1O commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello I'm a frontend and a blockchain developer. I will love to work on this

NueloSE commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

am a frontend developer

How I plan on tackling this issue

I have gone through the UI ETA <= 78hrs

sebas11042 commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I’m a developer with experience in creating responsive and functional user interfaces. I have worked on projects that require implementing detailed designs from Figma, ensuring design fidelity and optimization across different devices. My experience includes working with gradients, specific color schemes, and ensuring the full functionality of interactive elements on both mobile and desktop interfaces.

How I plan on tackling this issue

Implementation of the Design: I will use the Figma file to accurately recreate the Event Overview Screen, adhering to the gradients, colors, and layout of the elements.

Responsiveness: I will ensure that the design is fully responsive by adjusting the layout and size of elements to work properly on both mobile and desktop devices.

Testing and Functionality: I will test the screen on various devices to ensure that buttons, images, and text function correctly and look consistent across all screen sizes.

Joy-Adah commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi my name is Joy and I am a web3 developer and contributor.

How I plan on tackling this issue

I plan to approach this issue by implementing the event overview screen using the figma design. I will also ensure it is responsive both on mobile and desktop views.

abdegenius commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a fullstack developer worked with various frontend frameworks over the years as well as different backend languages. currently transitioning into the web3 space.

How I plan on tackling this issue

I will create a well documented and written codebase that will capture every bit of detail of the figma design and bring it to live, with the animations, mobile responsiveness, dark and light mode features as well as componentization for reusability across other pages, ican very much handle this task!

Samuel1-ona commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged Hello a blockchain developer. I will love to work on this issue

enehizy commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi my name is Osas, I am a Frontend Developer,My expertise aligns perfectly with this issue, and I would love to work on this project

How I plan on tackling this issue

I would follow the Figma guidelines and build the specific screens

Mystic-Nayy commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a frontend/web3 developer

How I plan on tackling this issue

I will implement the Event Overview Screen based on the provided Figma design, ensuring the layout is fully mobile-responsive and adheres to the specified gradient style and color scheme. Ensure all elements, including text, images, and buttons, function as intended. Test the screen for consistency and performance across both mobile and desktop views.

MullerTheScientist commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a full-stack developer with experience in QA testing and languages like Python, Cairo, Solidity, React, and JavaScript.

How I plan on tackling this issue

i will Follow the semantic HTML structure. Use CSS variables for consistency. Ensure mobile responsiveness. Test thoroughly.

Ayoazeez26 commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a software developer with 6 years experience building applications

How I plan on tackling this issue

Build the event overview screen using the figma design as a guide to pixel perfect conversion ETA - 4 days

stephanniegb commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I’m a frontend engineer with experience in building responsive, interactive UIs. I’ve worked on implementing pixel-perfect designs, and optimizing performance across various projects. My frontend technologies like css and tailwind will ensure that every detail matches Figma and works flawlessly.

How I plan on tackling this issue

I will carefully inspect Figma for precise spacing, layout, and components behavior
Build UI using CSS and Tailwind CSS as appropriate.
Test across all screen sizes for responsive behavior
Optimize images, animations, and code for performance

t0fudev commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi! My name is Hellen. I'm currently a computer science student and a web3 developer. I have been focusing on frontend developing. I am eager to leverage my skills on this area by contributing to this project. I would be really excited to have the opportunity to make a meaningful impact.

How I plan on tackling this issue

To solve this issue I would do the following:

Check and analize the given figma design.
Develop the website making use of CSS, TypeScript and HTML.
Test the functionality and the performance, then fix if any issues are presented.

ShantelPeters commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

My background in frontend development and UI/UX design equips me to translate visual designs into functional, responsive screens while maintaining a high standard of usability and aesthetics.

How I plan on tackling this issue

To implement the Event Overview Screen according to the provided Figma design, I would first review the design to fully understand the layout and key components required. Then, I would create the screen structure in the codebase, ensuring it is fully mobile-responsive and adheres to the specified gradient style and color scheme. I would develop reusable components for text, images, buttons, and other elements, ensuring they function as intended. After implementing the layout, I would rigorously test the screen for consistency and performance across both mobile and desktop views.

KevinLatino commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have a deep passion for Web3 and I am currently working as a frontend developer intern at a Web2 company, focusing on Next.js. Additionally, I am an active member of Dojo Coding, a prominent Web3 community in LATAM, which has given me great exposure to decentralized technologies.

Recently, I have been working on a project for Base LATAM's Buildathon, where I am gaining hands-on experience in building decentralized applications. I am eager to continue growing and contributing, and see this as a fantastic opportunity to further develop my skills and make a significant impact.

This is my first OD Hack, so I will appreciate it if you give me the chance to contribute to this amazing project.

Some frontend projects that i have: https://buildmyevent.xyz/ https://peritazgo-website.vercel.app/

How I plan on tackling this issue

To implement the Event Overview Screen as specified, I will follow this structured approach:

Thoroughly Analyze the Figma Design: I will begin by reviewing the Figma design in detail to understand the layout, styles, color schemes, and components required for the Event Overview Screen. This will ensure that I accurately replicate the intended visual and functional elements.

Develop the Screen Layout: Based on the design, I will create the layout for the Event Overview Screen. This will involve organizing key event details, such as the event title, date, time, location, and any relevant images or icons, in a visually appealing manner.

Implement Gradient Styles and Color Scheme: I will adhere to the gradient style and color scheme specified in the design. This includes applying the correct background gradients, text colors, and button styles to ensure consistency with the overall branding.

Ensure Mobile Responsiveness: To guarantee that the Event Overview Screen is fully responsive, I will utilize responsive design techniques. This will involve using CSS media queries and flexible grid layouts to ensure the screen displays correctly on various device sizes, from mobile to desktop.

Incorporate Functional Elements: I will implement all interactive components, including buttons and links, ensuring they function as intended. This includes setting up actions like RSVP, sharing options, and navigation to related pages or sections.

Testing for Consistency and Performance: After completing the implementation, I will conduct comprehensive testing on both mobile and desktop views. This will include checking for performance issues, ensuring that all elements load correctly, and confirming that the layout remains consistent across devices.

Gather Feedback and Make Adjustments: Once the initial implementation is complete, I will seek feedback from stakeholders or team members. Based on this feedback, I will make any necessary adjustments to ensure the screen meets both design specifications and user expectations.

By following these steps, I aim to deliver a visually appealing and functional Event Overview Screen that aligns perfectly with the provided Figma design.

ETA: I estimate that this task will take approximately [insert your estimated time, e.g., 5-7 days] to complete, which includes design implementation, testing, and any required adjustments based on feedback.

Benjtalkshow commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack Developer specializing in Next.js, TypeScript, Node.js, Cairo and Rust . With over 31 contributions across projects in the OnlyDust ecosystem, I’ve developed strong proficiency in delivering high-quality solutions and resolving complex issues within tight deadlines. My experience spans frontend, backend, smart contracts, and the optimization and maintenance of scalable codebases.

How I plan on tackling this issue

To implement the Event Overview Screen from the Figma design, I’ll replicate the layout and style, ensuring all elements like text, images, and buttons align with the specified gradient and color scheme. I'll prioritize mobile responsiveness using flexible layouts and test functionality across devices. Accessibility will also be a focus, ensuring readability and contrast meet standards. Once complete, I’ll prepare the screen for deployment, providing users with a seamless experience.

0xdevcollins commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I'm Collins a frontend and blockchain developer, and an active contributor on OnlyDust. You can check out my profile here: https://app.onlydust.com/u/0xdevcollins. This is my first time contributing to this repository, and I’m excited about the opportunity to contribute. Looking forward to collaborating!

How I plan on tackling this issue

To implement the Event Overview Screen, I will follow the Figma design closely, ensuring mobile responsiveness and adherence to the specified gradient style and color scheme. I’ll structure the layout using CSS Grid or Flexbox, integrate functional elements like buttons and images, and test the screen across devices for performance and consistency. The goal is to create a visually appealing and fully responsive screen that matches the design and works smoothly on both mobile and desktop.

mubarak23 commented 4 weeks ago

@Otaiki1 what is the progress on this issue, can you drop an update on the progress of work

Otaiki1 commented 3 weeks ago

Hi @mubarak23 @Calebux , I have made a draft PR here

Otaiki1 commented 3 weeks ago

@mubarak23 @calebux i have made the requested changes

mubarak23 / chainevents-frontend