search

mubarak23 / chainevents-frontend

strk-events.vercel.app
0 stars 6 forks source link

Build Your Events Screen #4

Open Calebux opened 6 days ago

Calebux commented 6 days ago

Implement the Your Events Screen based on the provided Figma design. This screen will show users a list of their created or upcoming events.

Requirements: Build the Your Events Screen according to the Figma design (link to Figma will be added). Ensure the screen is fully mobile-responsive. Follow the gradient style and color scheme from the design. Ensure all elements (event cards, buttons, text, etc.) work smoothly. Test the screen for performance and consistency across both mobile and desktop views.

Check out the Figma design here: https://www.figma.com/design/Z1IebD0dM4HMDDnlxzhV6R/Untitled?node-id=801-1513&node-type=canvas&t=tRf2C0gaILTQeHdU-0

Otaiki1 commented 6 days 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

CollinsC1O commented 6 days 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 6 days 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

ETA <= 78

od-hunter commented 6 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, please can I be assigned this please? This would be my first time contributing to this project and I would love to be the given the opportunity to contribute. I have experience in html, css, JavaScript,TypeScript and solidity, and Cairo.

How I plan on tackling this issue

To solve this issue, I'll carefully go through the figma design, check for typography, spacing, margin and all necessary components and develop a very responsive event screen.

Please assign me, I'm ready to work.

abdegenius commented 6 days 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!

sebas11042 commented 6 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am an advanced computer science student with experience in Java, JavaScript, and Unity. Currently, I am part of SunsetLabs, where I contribute to the frontend development of the game Citizen of Arcanis. My background in responsive design and user experience equips me to effectively handle this task, ensuring that the "Your Events" screen is both visually appealing and functional, meeting the project’s specifications.

How I plan on tackling this issue

Design Implementation: I will use the Figma file to build the "Your Events" screen, ensuring that all visual elements, such as event cards and buttons, match the provided specifications.

Responsive Design: I will ensure that the screen adapts to different screen sizes by implementing a fluid design that offers an optimal user experience on both mobile and desktop devices.

Element Functionality: I will implement the necessary logic to display the list of events, ensuring that buttons and interactive elements function correctly. This includes event management, such as the ability to edit or delete events.

Testing: I will conduct thorough testing on mobile and desktop devices to verify the functionality and performance of the "Your Events" screen, ensuring everything integrates seamlessly.

Samuel1-ona commented 6 days 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

Mystic-Nayy commented 6 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a frontend developer

How I plan on tackling this issue

To implement the Events Screen based on the provided Figma design, i will follow these steps:

  1. Layout Structure: Build the screen layout using a responsive design framework like Flexbox or CSS Grid to ensure proper alignment of event cards and other elements.

  2. Styling: Apply the gradient style and color scheme from the Figma design. Use CSS styles to ensure consistency in fonts, button styles, and spacing.

  3. Responsiveness: Utilize media queries to adjust the layout and element sizes for mobile and desktop views, ensuring that the screen is fully mobile-responsive.

  4. Functionality: Implement functionality for displaying a list of created or upcoming events, ensuring that all interactive elements (event cards, buttons, etc.) function smoothly.

  5. Testing: Thoroughly test the screen for performance and consistency across different devices and screen sizes to ensure a seamless user experience.

By following these steps, you'll create a Your Events Screen that meets the design specifications and is responsive across various platforms.

MullerTheScientist commented 6 days 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 wll Follow the semantic HTML structure, Use CSS variables for consistency, Ensure mobile responsiveness, Test thoroughly.

Ayoazeez26 commented 6 days 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

I will ensure to convert design to pixel perfect integration using the figma design as a guide and ensure that it is fully responsive ETA - 4 days

martinvibes commented 6 days 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

How I plan on tackling this issue

kindly assign :)

stephanniegb commented 6 days 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

jsandinoDev commented 6 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a full-stack developer with web3 experience, specializing in smart contracts and decentralized applications. I've worked on projects using React, Solidity, Cairo, and blockchain tools. My skills in both front-end and back-end development allow me to build scalable and secure solutions for web3 ecosystems.

How I plan on tackling this issue

  1. Review the Figma Design Analyze the layout and components in the Figma design: Identify event cards, buttons, text styles, colors, and gradients. Note the structure of the screen and any specific functionalities (e.g., filtering, sorting).
  2. Set Up the Your Events Screen Component Create a new component file (e.g., YourEventsScreen.js). Set up the initial structure with a container for the events list.
  3. Implement the Layout . Create Event Cards Define an EventCard component to display individual events, including title, date, and action buttons (e.g., "Edit," "Delete"). Pass props to customize each card based on the event data.
  4. Fetch and Display Events Implement a state management solution (like React Context or Redux) or simply use local state to manage the events. Fetch events from your API or database and map them to EventCard components.
  5. Mobile Responsiveness Ensure that all elements are fully responsive using TailwindCSS's responsive utilities (e.g., md:flex, sm:p-2). Test layout adjustments using media queries if necessary.
  6. Testing Performance and Consistency Test the screen on various devices (mobile and desktop) to ensure: All elements render correctly and are aligned with the Figma design. Performance is smooth (e.g., no lag during event fetching). Buttons and interactions work as intended.
  7. Final Adjustments Check for any design inconsistencies and refine styles. Ensure the gradient background matches the Figma design.
  8. Deployment Once testing is complete, commit and push your changes. Deploy the updated app to your hosting service.
ShantelPeters commented 6 days 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 allows me to effectively translate designs into functional, responsive screens while ensuring a positive user experience.

How I plan on tackling this issue

To implement the "Your Events" screen based on the provided Figma design, I would take the following approach:

  1. Figma Review: I would begin by thoroughly reviewing the Figma design to understand the layout, components, and interactions required for the screen.

2.*Setup: I would set up the necessary development environment and create the screen structure within the existing codebase, ensuring adherence to the project's architecture.

  1. Responsive Design: I would implement the screen with a focus on mobile responsiveness, utilizing CSS frameworks or media queries to ensure a seamless experience on both mobile and desktop.

  2. Component Development: I would create reusable components for event cards, buttons, and other UI elements, ensuring they follow the gradient style and color scheme from the design.

  3. Data Integration: I would integrate the functionality to display users' created or upcoming events, ensuring smooth data fetching and rendering.

  4. Testing: Finally, I would test the screen for performance and consistency across different devices and browsers, making any necessary adjustments to enhance usability and responsiveness.

KevinLatino commented 6 days 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.

https://buildmyevent.xyz/ https://peritazgo-website.vercel.app/

How I plan on tackling this issue

To implement the "Your Events" screen as specified, I will take the following approach:

Review the Figma Design: I will start by thoroughly examining the Figma design to understand the layout, styles, color schemes, and components required for the "Your Events" screen. This will help me ensure that all aspects of the design are accurately reflected in the implementation.

Build the Screen Layout: Using the Figma design as a guide, I will create the layout for the "Your Events" screen. This will involve setting up the structure to display a list of events, including event cards that contain details such as event name, date, time, and any relevant images or icons.

Apply Gradient Styles and Color Scheme: I will follow the gradient style and color scheme from the design, ensuring that all visual elements are cohesive and aesthetically pleasing. This includes implementing any backgrounds, text colors, and button styles that align with the Figma specifications.

Ensure Mobile Responsiveness: I will use responsive design techniques to ensure that the "Your Events" screen is fully functional and visually appealing on both mobile and desktop devices. This will involve using CSS media queries and flexible layouts to adapt the design across different screen sizes.

Implement Functional Elements: All interactive components, such as buttons and event cards, will be implemented to function smoothly. This includes ensuring that clicking on event cards leads to the appropriate detail pages or actions as indicated in the design.

Test for Performance and Consistency: Once the implementation is complete, I will conduct thorough testing on both mobile and desktop views. This will include checking for performance issues, ensuring smooth transitions, and verifying that all elements are displayed consistently across devices.

Gather Feedback and Make Adjustments: After the initial implementation and testing, I will seek feedback and make any necessary adjustments to ensure that the screen meets both design specifications and user expectations.

By following these steps, I aim to deliver a "Your Events" screen that aligns perfectly with the provided Figma design and enhances the overall user experience.

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 adjustments based on feedback.

0xdevcollins commented 6 days 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

I'll implement the "Your Events" screen as per the Figma design, ensuring that it is mobile-responsive and follows the specified gradient style and color scheme. All elements, including event cards, buttons, and text, will function smoothly. I'll test the screen for performance and ensure consistency across both mobile and desktop views.

Benjtalkshow commented 6 days 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 Your Events Screen based on the Figma design, I'll start by closely examining the layout and style elements to ensure fidelity to the specifications. I’ll build the screen to display users' created or upcoming events, using responsive design principles to ensure it looks great on both mobile and desktop.

I’ll create event cards that showcase essential information while incorporating the gradient style and color scheme from the design. Buttons for user interactions will be included, ensuring they function smoothly and are visually consistent.

Testing will be crucial, so I’ll verify the performance and responsiveness across devices, ensuring all elements work seamlessly. Additionally, I’ll focus on accessibility standards to make sure the screen is user-friendly for everyone. Once complete, I’ll document the process and prepare for deployment.

Calebux commented 1 day ago

@sebas11042 ETA please?

sebas11042 commented 11 hours ago

Hello @Calebux If I am working on the issue!

mubarak23 commented 6 hours ago

@sebas11042 can you provide an update on this issue,

what is the progress of work