feat: Adding missing Projects in project page with proper categorised tabs and sorting#642
feat: Adding missing Projects in project page with proper categorised tabs and sorting#642reach2saksham wants to merge 3 commits intoAOSSIE-Org:mainfrom
Conversation
📝 WalkthroughWalkthroughReplaces 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 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan for PR comments
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. Comment |
There was a problem hiding this comment.
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 | 🟡 MinorPlaceholder 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 | 🟠 MajorMissing
slugfield causes broken links.The older project entries (Agora Blockchain, EduAid, OpenChat, Resonate, Monumento, Social Street Smart) lack the
slugfield. TheCardProductcomponent links to/projects/${product.slug}, which will result in/projects/undefinedfor 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
Cardscomponent is defined but no longer used — the main render now usesCardProductdirectly (line 251). Consider removing this dead code.Additionally, if this component is kept for future use:
- Line 124: The GitHub icon uses
project.link.hrefinstead ofproject.githubLink- Line 127: The Discord link is hardcoded to
"https://discord.gg/hjUhu33uAn"instead of usingproject.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
📒 Files selected for processing (2)
src/app/projects/page.jsxsrc/helper/projects.js
|
@CodeRabbit review |
✅ Actions performedReview triggered.
|
src/app/projects/page.jsx
Outdated
| } | ||
|
|
||
| // Define the Cards component here | ||
| // Organisation tab definitions |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
c2d219e to
d3471e7
Compare
|
@Zahnentferner , I have implemented your changes, and the final code is clean and ready to be merged. |
There was a problem hiding this comment.
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
📒 Files selected for processing (2)
src/app/projects/page.jsxsrc/helper/projects.js
There was a problem hiding this comment.
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.
| 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', | ||
| }, |
There was a problem hiding this comment.
🧩 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.
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
StabilityNexusandDjedAlliancewere absent from the pageAOSSIE-Orgprojects (Agora Web,Agora iOS,CarbonFootprint API,CarbonFootprint Mobile,OpenPeerChat,Skeptik,Sensala,CrowdAlert,DebateAI) were also missingSolution
1. Tabbed organisation switcher (
src/app/projects/page.jsx)Three tabs sit at the top of the page, letting users switch between:
Projects are routed to their tab automatically via
githubLinkdomain matching — no manual categorisation needed for future additions. Within each tab, projects are sorted alphabetically. Tab switching usesAnimatePresencefor a smooth crossfade, and the active tab uses the existing brand green (#00843D) /yellow-400dark-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)
StabilityNexus (19 projects)
DjedAlliance (6 projects)
Screenshots/Recordings:
Before:

After:

Testing
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:
I have used the following AI models and tools: TODO
Checklist
Summary by CodeRabbit
New Features
Style