Skip to content

feat: Adding missing Projects in project page with proper categorised tabs and sorting#642

Open
reach2saksham wants to merge 3 commits intoAOSSIE-Org:mainfrom
reach2saksham:feat/projects-page-complete
Open

feat: Adding missing Projects in project page with proper categorised tabs and sorting#642
reach2saksham wants to merge 3 commits intoAOSSIE-Org:mainfrom
reach2saksham:feat/projects-page-complete

Conversation

@reach2saksham
Copy link
Contributor

@reach2saksham reach2saksham commented Mar 9, 2026

Addressed Issues:

Fixes #638
The AOSSIE main website's projects page was missing many projects from the three GitHub orgs. This PR adds all missing projects and restructures the page so projects are grouped by organisation, making it far easier to browse for contributors interested in specific ecosystems (GSoC, DeFi/Ergo, stablecoin infrastructure, etc.).

Problem

  • 35+ projects from StabilityNexus and DjedAlliance were absent from the page
  • Several existing AOSSIE-Org projects (Agora Web, Agora iOS, CarbonFootprint API, CarbonFootprint Mobile, OpenPeerChat, Skeptik, Sensala, CrowdAlert, DebateAI) were also missing
  • The existing page rendered all projects as one flat, randomly shuffled list with no organisational context

Solution

1. Tabbed organisation switcher (src/app/projects/page.jsx)

Three tabs sit at the top of the page, letting users switch between:

Tabs
AOSSIE Projects
StabilityNexus Projects
DjedAlliance Projects

Projects are routed to their tab automatically via githubLink domain matching — no manual categorisation needed for future additions. Within each tab, projects are sorted alphabetically. Tab switching uses AnimatePresence for a smooth crossfade, and the active tab uses the existing brand green (#00843D) / yellow-400 dark-mode colours.

Why tabs instead of a flat list? A flat, unsorted list of 50+ projects is visually overwhelming. Users browsing for GSoC opportunities have different intent than those looking for DeFi tooling — tabs let each group find what they need immediately.

2. Missing projects added (src/helper/projects.js)

AOSSIE-Org (10 new projects)

Project Description
Agora iOS iOS app for multi-algorithm elections
Agora Web Web interface for multi-algorithm elections
CarbonFootprint API REST backend for carbon emission calculations
CarbonFootprint Mobile Mobile carbon footprint tracker
CrowdAlert Web Crowdsourced incident reporting platform
DebateAI AI-powered debate practice platform
OpenPeerChat (Flutter) Decentralised P2P chat — Flutter
OpenPeerChat (React Native) Decentralised P2P chat — React Native
Sensala Computational linguistics / formal semantics
Skeptik Proof compression framework

StabilityNexus (19 projects)

Project Description
Bene FundRaising (EVM) Fundraising platform on EVM
BenefactionPlatform (Ergo) Fundraising platform on Ergo blockchain
Chainvoice On-chain invoicing system
Clowder Decentralised contributor community platform
Destiny (EVM) Verifiable-randomness outcome protocol
FairFund Decentralised community funding platform
Fate (EVM) Prediction market on EVM
Gluon (Solidity) Gold-backed stablecoin contracts for EVM
Gluon Ergo SDK TypeScript SDK for Gluon on Ergo
Gluon Ergo UI Frontend for Gluon on Ergo
HackHub Decentralised hackathon management
Hammer Auction House On-chain auction platform
hodlCoin (Solidity) DeFi staking protocol on EVM
Maelstrom Novel AMM / liquidity protocol
Plaza Decentralised peer-to-peer marketplace
RainDrop Token airdrop distribution tool
TNT Token and NFT toolkit
Treee Blockchain-based tree planting & carbon credits
VouchMe Decentralised reputation & vouching system

DjedAlliance (6 projects)

Project Description
Djed Solidity Djed algorithmic stablecoin for EVM
Gluon Ergo Backend Contracts ErgoScript contracts for Gluon backend
Gluon Ergo WebUI Web dashboard for Gluon on Ergo
Oracle Backend Price data aggregation service
Oracle Solidity On-chain price oracle contracts
StablePay Stablecoin payments platform

Screenshots/Recordings:

Before:
image

After:
image

Testing

npm run dev
# Navigate to http://localhost:3000/projects
# Verify:
# - Three tabs render correctly in light and dark mode
# - Switching tabs cross-fades and shows the correct project subset
# - All 35 new project cards display with correct logo, name, description, and GitHub link
# - No hydration errors in the browser console
# - Alphabetical ordering within each tab
# - Proper Responsiveness is maintained across devices

Additional Notes:

AI Usage Disclosure:

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.

Check one of the checkboxes below:

  • This PR does not contain AI-generated code at all.
  • This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with this policy. I have tested the code locally and I am responsible for it.

I have used the following AI models and tools: TODO

Checklist

  • My PR addresses a single issue, fixes a single bug or makes a single improvement.
  • My code follows the project's code style and conventions
  • If applicable, I have made corresponding changes or additions to the documentation
  • If applicable, I have made corresponding changes or additions to tests
  • My changes generate no new warnings or errors
  • I have joined the Discord server and I will share a link to this PR with the project maintainers there
  • I have read the Contribution Guidelines
  • Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
  • I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

Summary by CodeRabbit

  • New Features

    • Project cards now show centered logos, trimmed descriptions, and per-card animations.
    • Project listing expanded with many new entries across AOSSIE Core, StabilityNexus, and Djed Alliance, including additional public links.
  • Style

    • Redesigned card layout and typography for improved hierarchy and spacing.
    • Simplified section headers and streamlined composition for a cleaner presentation.

@coderabbitai
Copy link

coderabbitai bot commented Mar 9, 2026

📝 Walkthrough

Walkthrough

Replaces the Projects page with a motion-wrapped grid of animated project cards (conditional 60×60 logos, trimmed descriptions, updated typography) and removes banner/placeholder blocks. Separately, expands src/helper/projects.js with many new project entries and added metadata across AOSSIE Core, StabilityNexus, and Djed Alliance.

Changes

Cohort / File(s) Summary
Projects page UI
src/app/projects/page.jsx
Reworks project listing to a ProjectSection and motion-wrapped grid of CardProduct cards, adds per-card animations, conditional centered 60×60 logos, updated typography/spacing, and removes previous banner/placeholder blocks.
Projects data expansion
src/helper/projects.js
Extensively expands the exported projects array with many new entries (AOSSIE Core Projects, StabilityNexus, Djed Alliance), adding fields like slug, logo, githubLink, discordLink, status, and category; no export signature changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

"I nibble through the project list with cheer,
Logos tidy, cards that dance and steer,
New entries sprout from core to allied thread,
A hop, a scroll — the catalog is fed! 🐇✨"

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: adding missing projects with categorized tabs and sorting functionality.
Linked Issues check ✅ Passed The PR successfully addresses issue #638 by adding 35+ missing projects from three GitHub organisations with logos and implementing tabbed categorisation.
Out of Scope Changes check ✅ Passed All changes are directly scoped to issue #638: project additions, logo inclusion, and tabbed categorisation on the projects page.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
📝 Coding Plan for PR comments
  • Generate coding plan

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)
src/helper/projects.js (2)

300-308: ⚠️ Potential issue | 🟡 Minor

Placeholder link provides poor UX.

The OpenChat project has href: '#' which doesn't navigate anywhere meaningful. Consider adding the actual GitHub link or, if the repo doesn't exist yet, indicate this in the UI.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/helper/projects.js` around lines 300 - 308, The OpenChat project entry
currently uses a placeholder href ('#') which leads to poor UX; update the
object with name 'OpenChat' in the projects list by replacing link.href '#' with
the actual repository URL (e.g., GitHub link) or, if the repo isn't available,
set link.href to a meaningful fallback (such as a 'coming-soon' page or null)
and adjust link.label or add a status indicator (e.g., status/category or label
like "Repo coming soon") so the UI shows a clear, actionable destination instead
of '#'.

279-338: ⚠️ Potential issue | 🟠 Major

Missing slug field causes broken links.

The older project entries (Agora Blockchain, EduAid, OpenChat, Resonate, Monumento, Social Street Smart) lack the slug field. The CardProduct component links to /projects/${product.slug}, which will result in /projects/undefined for these entries.

🐛 Proposed fix: Add slug fields to existing entries
  {
+   slug: 'agora-blockchain',
    name: 'Agora Blockchain',
    description:
      'There isn't just one voting algorithm, there's hundreds. Therefore, we developed Agora to allow for democratic elections using any algorithm.',
    link: {
      href: 'https://github.com/AOSSIE-Org/Agora-Blockchain',
      label: 'Agora',
    },
    logo: AgoraLogo,
    status: 'ongoing',
-   category: 'Ongoing'
+   category: 'Ongoing',
+   githubLink: 'https://github.com/AOSSIE-Org/Agora-Blockchain',
+   discordLink: 'https://discord.gg/xnmAPS7zqB',
  },
  {
+   slug: 'eduaid',
    name: 'EduAid',
    ...
  },

Apply the same pattern to EduAid, OpenChat, Resonate, Monumento, and Social Street Smart.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/helper/projects.js` around lines 279 - 338, The listed project objects
(Agora Blockchain, EduAid, OpenChat, Resonate, Monumento, Social Street Smart)
are missing the slug property used by CardProduct to build links, causing
/projects/undefined; add a slug field to each object following the existing
pattern (e.g., a lowercase, hyphenated identifier like "agora-blockchain",
"eduaid", "openchat", "resonate", "monumento", "social-street-smart") so
CardProduct's `/projects/${product.slug}` resolves correctly.
🧹 Nitpick comments (2)
src/app/projects/page.jsx (2)

59-138: Unused component and hardcoded links.

The Cards component is defined but no longer used — the main render now uses CardProduct directly (line 251). Consider removing this dead code.

Additionally, if this component is kept for future use:

  • Line 124: The GitHub icon uses project.link.href instead of project.githubLink
  • Line 127: The Discord link is hardcoded to "https://discord.gg/hjUhu33uAn" instead of using project.discordLink
♻️ Proposed fix if keeping the component
-                <Link href={project.link.href} aria-label="GitHub" className="text-zinc-500 hover:text-black dark:text-zinc-400 dark:hover:text-white transition">
+                <Link href={project.githubLink || project.link.href} aria-label="GitHub" className="text-zinc-500 hover:text-black dark:text-zinc-400 dark:hover:text-white transition">
                    <FontAwesomeIcon icon={faGithub} className="w-6 h-6" />
                 </Link>
-                 <Link href="https://discord.gg/hjUhu33uAn" aria-label="Discord" className="text-zinc-500 hover:text-[`#5865F2`] dark:text-zinc-400 dark:hover:text-[`#5865F2`] transition">
+                 <Link href={project.discordLink || "https://discord.gg/hjUhu33uAn"} aria-label="Discord" className="text-zinc-500 hover:text-[`#5865F2`] dark:text-zinc-400 dark:hover:text-[`#5865F2`] transition">
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/app/projects/page.jsx` around lines 59 - 138, Remove the dead Cards
component if it's no longer used; otherwise update it: change the GitHub Link
usage from project.link.href to project.githubLink and replace the hardcoded
Discord URL with project.discordLink, and ensure Card references (Cards,
projectList, project.logo, project.link, CardProduct) align with the current
data shape so props like githubLink and discordLink exist and are used instead
of hardcoded values.

189-203: Minor formatting issue.

Line 190 has a missing space after const:

✏️ Proposed fix
  const [activeOrg, setActiveOrg] = useState('aossie')
- const[sortOrder, setSortOrder] = useState('a-z') // Added sort state
+ const [sortOrder, setSortOrder] = useState('a-z') // Added sort state
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/app/projects/page.jsx` around lines 189 - 203, There is a minor
formatting typo where the declaration for the sort state is written as
"const[sortOrder..." — update the declaration to include the missing space so it
reads like a proper const declaration (use the existing symbols sortOrder,
setSortOrder and useState) to fix the formatting and ensure consistent style in
the component that also uses activeOrg and currentTab.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@src/helper/projects.js`:
- Around line 300-308: The OpenChat project entry currently uses a placeholder
href ('#') which leads to poor UX; update the object with name 'OpenChat' in the
projects list by replacing link.href '#' with the actual repository URL (e.g.,
GitHub link) or, if the repo isn't available, set link.href to a meaningful
fallback (such as a 'coming-soon' page or null) and adjust link.label or add a
status indicator (e.g., status/category or label like "Repo coming soon") so the
UI shows a clear, actionable destination instead of '#'.
- Around line 279-338: The listed project objects (Agora Blockchain, EduAid,
OpenChat, Resonate, Monumento, Social Street Smart) are missing the slug
property used by CardProduct to build links, causing /projects/undefined; add a
slug field to each object following the existing pattern (e.g., a lowercase,
hyphenated identifier like "agora-blockchain", "eduaid", "openchat", "resonate",
"monumento", "social-street-smart") so CardProduct's `/projects/${product.slug}`
resolves correctly.

---

Nitpick comments:
In `@src/app/projects/page.jsx`:
- Around line 59-138: Remove the dead Cards component if it's no longer used;
otherwise update it: change the GitHub Link usage from project.link.href to
project.githubLink and replace the hardcoded Discord URL with
project.discordLink, and ensure Card references (Cards, projectList,
project.logo, project.link, CardProduct) align with the current data shape so
props like githubLink and discordLink exist and are used instead of hardcoded
values.
- Around line 189-203: There is a minor formatting typo where the declaration
for the sort state is written as "const[sortOrder..." — update the declaration
to include the missing space so it reads like a proper const declaration (use
the existing symbols sortOrder, setSortOrder and useState) to fix the formatting
and ensure consistent style in the component that also uses activeOrg and
currentTab.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: be5e41ac-2ea7-4322-8156-d03dd2638bc6

📥 Commits

Reviewing files that changed from the base of the PR and between 538ecbc and c2d219e.

📒 Files selected for processing (2)
  • src/app/projects/page.jsx
  • src/helper/projects.js

@reach2saksham
Copy link
Contributor Author

@CodeRabbit review

@coderabbitai
Copy link

coderabbitai bot commented Mar 9, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

}

// Define the Cards component here
// Organisation tab definitions
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need to organize by organization. Let's keep the random order that we had before. We will organize projects in a different way later.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do I keep the sorting functionality, or should I remove it as well?

…ing projects

- Add tabbed organisation switcher (AOSSIE / StabilityNexus / DjedAlliance)
  with animated crossfade via AnimatePresence
- Add 10 missing AOSSIE-Org projects: Agora Web, Agora iOS, OpenPeerChat
  (Flutter & React Native), Skeptik, Sensala, CarbonFootprint API & Mobile,
  CrowdAlert Web, DebateAI
- Add 19 StabilityNexus projects: hodlCoin, FairFund, Gluon (Ergo SDK/UI/
  Solidity), BenefactionPlatform, Bene FundRaising, Clowder, Treee, Hammer
  Auction House, RainDrop, Fate, HackHub, Maelstrom, Chainvoice, Plaza,
  VouchMe, Destiny, TNT
- Add 6 DjedAlliance projects: Gluon Ergo WebUI, Djed Solidity, Oracle
  Solidity & Backend, StablePay, Gluon Ergo Backend Contracts
- Replace random sort with deterministic A-Z sort (fixes hydration mismatch)
- Add StabilityNexus.png and DjedAlliance.png org logos
- Apply existing unused Carbon.png and scholar.png to matching projects

Closes AOSSIE-Org#638
@reach2saksham reach2saksham force-pushed the feat/projects-page-complete branch from c2d219e to d3471e7 Compare March 12, 2026 16:14
@reach2saksham
Copy link
Contributor Author

@Zahnentferner , I have implemented your changes, and the final code is clean and ready to be merged.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/app/projects/page.jsx`:
- Around line 141-152: The current render uses projects.map(...) which outputs
one flat grid and ignores the tabbed org view; change the rendering to group and
sort projects by organization before rendering: use the projects array (symbol:
projects) to first sort A-Z (by product.name) and then group into a map keyed by
product.org (or product.organization), then render a tabbed/orgbed UI (replace
the single grid inside motion.div) that iterates over the grouped keys to
produce one grid per org, passing each group's items to CardProduct (symbol:
CardProduct) and wiring the tabs (or tab state) to toggle which group's grid is
shown; keep ProjectSection where appropriate and ensure keys use org names and
product.slug/product.name for child items.

In `@src/helper/projects.js`:
- Around line 339-762: The projects array contains mixed schemas causing
CardProduct to link to /projects/${product.slug} as /projects/undefined; update
the projects data so every project object in the projects array includes the
canonical keys slug, githubLink and discordLink (and ensure link remains
consistent) for all entries (e.g., the legacy items around the earlier entries),
or alternatively add a fallback in CardProduct when reading product.slug to use
a new requiredSlug/getProjectSlug helper; target symbols: projects array,
CardProduct, product.slug, githubLink, discordLink. Ensure all project entries
are normalized to the same schema so grouping and routing work consistently.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5ec9dd93-a41f-4075-83d4-fad4277e739c

📥 Commits

Reviewing files that changed from the base of the PR and between c2d219e and d3471e7.

📒 Files selected for processing (2)
  • src/app/projects/page.jsx
  • src/helper/projects.js

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/helper/projects.js`:
- Around line 307-317: This project entry for the object with slug 'openchat'
contains placeholder URLs: update the link.href and githubLink fields to real
URLs (or remove/omit the fields or the entire project object) so external link
buttons are not left pointing to '#'—locate the project object by its slug
'openchat' in the projects list and replace link.href and githubLink with valid
URLs or remove the keys/entry if no real links exist yet.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f861b52b-ccd1-4986-b361-fd84256aa08c

📥 Commits

Reviewing files that changed from the base of the PR and between d3471e7 and a9ab04c.

📒 Files selected for processing (1)
  • src/helper/projects.js

Comment on lines +307 to 317
slug: 'openchat',
name: 'OpenChat',
description:
'a decentralised platform for secure and private messaging and file sharing built on top of blockchain',
link: { href: '#', label: 'OpenChat' },
logo: DefaultLogo,
status: 'ongoing',
category: 'Ongoing'
category: 'Ongoing',
githubLink: '#',
discordLink: 'https://discord.gg/xnmAPS7zqB',
},
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check if OpenChat repository exists under AOSSIE-Org
curl -s -o /dev/null -w "%{http_code}" "https://api.github.com/repos/AOSSIE-Org/OpenChat"

Repository: AOSSIE-Org/Website

Length of output: 65


Placeholder URLs will result in non-functional links.

The link.href and githubLink fields are set to #, which will leave external link buttons broken or navigating nowhere useful. Either remove this entry until a real URL is available, or provide valid repository and project links.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/helper/projects.js` around lines 307 - 317, This project entry for the
object with slug 'openchat' contains placeholder URLs: update the link.href and
githubLink fields to real URLs (or remove/omit the fields or the entire project
object) so external link buttons are not left pointing to '#'—locate the project
object by its slug 'openchat' in the projects list and replace link.href and
githubLink with valid URLs or remove the keys/entry if no real links exist yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Projects tab is missing many projects

2 participants