[FEATURE] Build a dynamic project page with GitHub API

[mkubdev]

Detailed description

Our current project page is a temporary one :

Goal ✨

• Update the src/pages/project.js and add a getServerStaticProps data fetching strategy
• Add this query to retrieve the list of all our repository: https://api.github.com/orgs/WebXDAO/repos
• Display the list of repository as cards (See details above)

Repository Cards Design 🎨

We aim to display the repos like this example:

Context

Don't forget to use a bg-transparency in the parent div to get the background gradient, and use text-white/80 for the text-color!

Possible implementation

This is the code snippet for the card exemple mentionned above :

• src/components/Projects/RepoCard.js :

<div class="h-screen flex items-center justify-center bg-gray-900">

  <!-- Card -->
  <a href="#" class="w-72 bg-slate-900 border rounded-lg border-gray-700 p-5 shadow hover:bg-gray-700 delay-100 duration-200">

    <!-- Header -->
    <div class="flex flex-row">
      <img src="https://picsum.photos/40/40" class="rounded" />
      <p class="ml-3">
        <span class="text-gray-500 font-semibold">facebook/</span>
        <span class="text-gray-300 font-semibold">react<span>
      </p>
    </div>

    <!-- Content -->
    <p class="text-xs text-gray-500 mt-3">
      A declarative, efficient, and flexible JS library for building user...
    </p>

  </a>

</div>

Additional information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[abhikrishnaram]

heyy 👋🏽
happy hacking

[abhikrishnaram]

@mkubdev could you assign this to me

[mkubdev]

Hello @abhikrishnaram ! Sure, i assigned you ☺️

[Anuran12]

Oh no i missed the opportunity 🤦

@abhikrishnaram you came first so you should take it . By the way @abhikrishnaram if you need any help you can ask me as i already implemented the staticprops in the contributors page. 🙂

[mkubdev]

@Anuran12 Hello! Yep unfortunately it's already taken! But don't worry, we will open many more issue for this repos. :)

Good to see collaboration ✨