search

Dprof-in-tech / peer-on-strk

https://peer-on-strk.vercel.app
2 stars 11 forks source link

Build a dynamic blog page UI #6

Closed Dprof-in-tech closed 4 days ago

Dprof-in-tech commented 1 week ago

build out a dynamic blog page UI for peer protocol that would take data from an array of text objects. Take your design inspo from https://dribbble.com/shots/24565936-Minimal-blog-Untitled-UI and when you are done, the url to posts on the blog page should be shown as :

https://peer-on-stark.vercel.app/blog/{name of the blog post}

CollinsC1O commented 1 week ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello I'm a front-end and a blockchain developer. I will love to solve this issue. I can handle this. please assign

josephchimebuka commented 1 week ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am Joseph I am a frontend developer and blockchain developer and I am also an active contributor here on only dust here is my profile https://app.onlydust.com/u/josephchimebuka. This is my first time to contribute to this repo ill appreciate the opportunity to contribute. this is a couple of frontend and blockchain projects i have built https://metacrypt.vercel.app/ https://mattedsgn.com/

How I plan on tackling this issue

I will follow the ui and and build out the dynamic blog page

web3normad commented 1 week ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

"I am a result-driven Web3 frontend developer with good experience in creating responsive, functional, visually appealing, and user-friendly interfaces. I have worked on various projects within both the Web2 and Web3 spaces, including building a fully functional and responsive website for an NGO. I am also a team lead, which is a testament to my robust understanding of problem-solving and ensuring projects are done well, on time, and appealing to users. My background in working with React and CSS frameworks such as SCSS and TailwindCSS enables me to quickly adapt and enhance designs for responsiveness, ensuring smooth user interactions on both mobile and desktop platforms.

How I plan on tackling this issue

To build the dynamic blog page, I would take the following approach: I would use the design inspiration from the provided Dribbble shot, focusing on a clean, minimal, and responsive layout. React and TailwindCSS would be my choice to implement the design efficiently. I would define an array of text objects as placeholders for blog posts using gridbox. Each object will contain fields like title, content, author, and date. These objects will dynamically populate the blog page using a map function in React. To ensure each blog post has its unique URL, I would use React Router. The URL structure would follow the pattern /blog/{name-of-the-blog-post}, where the blog post's name is derived from the text objects’ title field. For rendering, the main blog page would display a list of blog post previews (title, author, a snippet of content). Clicking on a blog post preview would navigate the user to the individual blog post page, displaying the full content. I would ensure that the blog pages are SEO-friendly by setting meta tags dynamically for each blog post (such as title and description) based on the text object data.

KodeSage commented 1 week ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm James Harrison, A Seasoned Software Engineer and well experienced in the web2 and web3 space

How I plan on tackling this issue

This UI should not take more than 1 day to implement and I will do that perfectly well

NueloSE commented 1 week ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a frontend develop with experience using frontend technology

How I plan on tackling this issue

I have gone through the UI ETA <= 72hrs

0xdevcollins commented 1 week 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 will carefully implement the ui and make it dynamic

JoelVR17 commented 1 week ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Build a dynamic blog page UI

Hello peer on strk team,

I am Joel Vargas, and I'm a member of Dojo Coding. I also come from OnlyDust.

I would like to request the assignment of this issue. Below is my proposed approach for implementing this issue:

How I plan on tackling this issue

Proposal for Dynamic Blog Page UI for Peer Protocol

Objective

Create a dynamic blog page UI that displays blog posts using data from an array of text objects. The design will be inspired by the minimal blog UI from Dribbble, ensuring a clean and user-friendly experience.

Design Inspiration

The design will take inspiration from the following Dribbble shot: Minimal Blog - Untitled UI. The focus will be on simplicity, readability, and a visually appealing layout.

Blog Page Structure

  1. Header:

    • A simple navigation bar with the logo and links to Home, Blog, About, and Contact.

  2. Main Blog Section:

    • Display a list of blog posts in a grid format.
    • Each post card will include:
      • Post title
      • Short description
      • Author and date
      • Read more link

  3. Footer:

    • A footer containing links to social media, copyright information, and additional resources.

Example Blog Post Data

Here is an example array of text objects representing blog posts:

const blogPosts = [
  {
    title: "Understanding Peer-to-Peer Protocols",
    description: "A deep dive into how peer-to-peer protocols work and their implications for decentralized networks.",
    author: "Jane Doe",
    date: "October 15, 2024",
    slug: "understanding-peer-to-peer-protocols"
  },
  {
    title: "The Future of Decentralized Applications",
    description: "Exploring the potential of decentralized applications and their impact on technology.",
    author: "John Smith",
    date: "October 20, 2024",
    slug: "future-of-decentralized-apps"
  },
  // Add more posts as needed
];

## Example:

import React from 'react';

const BlogPage = ({ posts }) => { return (

Blog

{posts.map((post) => (

{post.title}

{post.description}

By {post.author} on {post.date}

Read More
))}

© 2024 Peer Protocol. All rights reserved.

); };

export default BlogPage;

Ayoazeez26 commented 1 week 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

Use the dribble inspo to build out the dynamic blog page and ensuring the url of the blog page ends with the name of the blog post ETA - 4 days

wheval commented 1 week ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello @Dprof-in-tech, I'm Wheval, a frontend developer with experience building responsive and user-friendly interfaces with React, typescript and tailwindcss. I also have experience contributing to open source projects. With my prior experience working with Nextjs, I can resolve this issue. I am really hoping to contribute to Peer Protocol, Thanks

How I plan on tackling this issue

To build this dynamic blog page. i listed the steps i would follow:

  1. Review Peer Protocol Brand Guidelines
    I would first review the current brand guidelines such as fonts, colors, and sizes.

  2. Set Up Data and Interfaces
    I would create the dummy data with fields such as title, description, tags, content, author, and date. I would also create interfaces to ensure type safety where necessary.

  3. Follow Codebase Structure and Use Available Components
    I would ensure to follow the existing folder structure when creating components for the blog page. Additionally, I would import available components such as the navbar and footer instead of creating new ones.

  4. Build Page Layout Using Grids
    I would use grids to create the layout of the entire page to ensure responsiveness.

  5. Ensure Semantic HTML for SEO
    I would use semantic HTML to improve the SEO of the blog page.

  6. Implement Responsiveness and Test on Different Screen Sizes
    I would ensure the blog page is responsive on all screen sizes, testing it on different devices.

  7. Add Dark Mode Support
    I would implement dark mode for the comfort of readers.

  8. Implement Dynamic Routing with Next.js
    I would use Next.js dynamic routing to ensure blog posts route to URLs based on the page title, such as:
    https://peer-on-stark.vercel.app/blog/{title}

  9. Run Tests and Linting
    Finally, I would run npm test and lint the code before committing the changes and making a pull request.

ETA is 3 day.

Benjtalkshow commented 1 week 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 build a dynamic blog page UI for the peer protocol, I will create a user interface that pulls data from an array of text objects representing individual blog posts. The design will be inspired by the minimalistic style showcased in the Dribbble example. The blog page will display a clean layout with attention to typography and spacing, ensuring a visually appealing experience for readers.

Each blog post will have its own dedicated URL structured as https://peer-on-stark.vercel.app/blog/{name of the blog post}, where {name of the blog post} is dynamically generated from the data array. This will allow users to easily navigate to specific posts.

Once the UI is built and connected to the data, I will ensure that the routing works correctly and that the page responds well across different devices and screen sizes. The task will be considered complete when the dynamic blog page is fully functional and meets the design specifications.

stephanniegb commented 1 week 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.

How I plan on tackling this issue

melnikga commented 1 week ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, my name is Georgiy, I'm a frontend developer. I have extensive experience in developing tools for Starknet, and I've participated in almost all ODHacks, during which I worked on many projects. My OnlyDust profile: https://app.onlydust.com/u/melnikga

How I plan on tackling this issue

I'd use shadcn components for consistent styling, particularly for cards and typography. For the dynamic content, I'd implement a map function to render blog posts from the text objects array, with each post linking to its unique URL using slugified titles. To make it look professional, I'd add hover effects on cards, proper spacing between elements, and ensure the layout is fully responsive. For the routing, I'd set up dynamic routes to handle individual blog post pages using the URL pattern you specified.

Ugo-X commented 1 week ago

assigned @stephanniegb good luck

Join the group here: https://t.me/+p7vbt9n01blhZDY0