Migrating the Graphspace UI with modern stack like Next.js + React

[yash170106065]

Background

GraphSpace is an easy-to-use web-based platform collaborating research groups can use for storing, interacting with, and sharing networks. A GraphSpace user can upload graphs through a REST API, import graphs created in Cytoscape, interact with graphs (view them, customize layouts, and save layouts), share graphs (create groups and add collaborators, share graphs among all members of a group or with the world), search graphs, and organize graphs using tags. GraphSpace has a comprehensive REST API that allows users to communicate programmatically with it. Overall, GraphSpace provides a rich set of user-friendly features designed to enhance network-based collaboration.

---

Goal

This project aims to modernise and future-proof the GraphSpace frontend by migrating the existing JavaScript-based UI to a Next.js + modern React stack. The goal is to improve developer experience, long-term maintainability, scalability, and UI consistency, while establishing a clean and extensible frontend architecture for future feature development.

• Rebuild GraphSpace UI with Next.js + Modern React:
  Migrate the existing frontend to Next.js (App Router) with a clean, modular design system.

• Adopt a modern frontend foundation:
  Introduce TypeScript for type safety, ESLint/Prettier for consistent code quality, and modern styling solutions such as Tailwind CSS or CSS Modules. Optionally integrate a component library like shadcn/ui or MUI where appropriate.

• Establish scalable frontend patterns:
  Implement a feature-based folder structure (routes/pages → features → components → services) and build shared UI primitives along with reusable GraphSpace-specific components such as graph lists, graph viewers, node/edge panels, filters, and controls.

• Improve UX, accessibility, and responsiveness:
  Ensure the UI is fully responsive, follows basic WCAG accessibility guidelines, and provides a consistent, intuitive user experience across the platform.

---

Difficulty Level

Medium

---

Size and Length of Project

• Medium: 175 hours
• 12 weeks

---

Skills

JavaScript
React
Next.js
TypeScript
HTML & CSS
Modern CSS (Tailwind CSS / CSS Modules)

---

Public Repository

https://github.com/Murali-group/GraphSpace/

---

Potential Mentors

Yash Agarwal
Mahesh Kasbe
Daniyal Jahan Warsi
Aditya Bharadwaj

---

IRC

Discord for GSoC 2023: https://discord.gg/AqjnwHndq8
Gitter for community: https://gitter.im/graphspace/community?utm_source=share-link&utm_medium=link&utm_campaign=share-link

[aditya-jnu]

Hi @yash170106065 and mentors,
This project looks very interesting. I have a strong hands-on experience with Next.js (App Router), React, and TypeScript, and I’m confident I can contribute effectively to this modernization effort.
Before starting, I wanted to ask:

• What would be the recommended first steps for contributors interested in this project?
• Is there any preferred roadmap, design doc, or existing frontend structure that should be reviewed first?
• Would you recommend starting with a small exploratory PR or discussion before implementation?

Looking forward to your guidance. Thanks!

[dyrpsf]

Hi @yash170106065, @khanspers and all other mentors

I’m interested in contributing to this GraphSpace UI migration for GSoC 2026.

Briefly about me:

• Experience with React and basic Next.js / TypeScript.
• Built a small demo app with Next.js + Tailwind here: <link to your repo/demo>.

I’ve started exploring the current GraphSpace UI and codebase.
To get started, could you please suggest:

• Any design docs or parts of the frontend I should study first?
• A small, well‑scoped page/feature that would be good to migrate first so I can open an initial PR?

Thanks for your time and guidance.

[narang24]

Hi @yash170106065, @khanspers, and mentors 👋

I’m interested in contributing to the GraphSpace UI migration to Next.js + modern React and would love to get involved.

Background & proof of work:

I have hands-on experience building modern, responsive React and Next.js applications from scratch, with a focus on clean UI, scalability, and maintainable frontend architecture.

React projects (UI/UX and styling entirely by me): https://github.com/narang24/Rupee, https://github.com/narang24/Happen

These involved end-to-end UI design, responsive layouts using Tailwind CSS, usage of frontend libraries like Recharts, and a modular, component-based structure.

Next.js projects: https://github.com/narang24/Explore, https://github.com/narang24/wed-me-good

Skills:

• JavaScript, React, Next.js (App Router)
• TypeScript
• HTML, CSS, Tailwind CSS / CSS Modules
• Comfortable with shadcn/ui, Framer Motion, and modern UI libraries

I’m confident I can contribute effectively toward building a clean, scalable, and future-proof GraphSpace frontend.

Some questions to get started:

• Are there any design docs, mockups, or reference implementations for the new UI?
• Is there a recommended starting point for contributors—would you suggest beginning with a small exploratory PR (project setup, layout shell, or a specific page/component)?
• Are there any high-priority frontend or UX pain points to focus on first?

Looking forward to your guidance.

[Arushi-Gupta13]

Hi @yash170106065
I wanted to know the relatability of GraphSpace with NRNB. Is this an individual project ?
Please share resources of GraphSpace's usage in the org.
Best, Arushi.

[Omkarop0808]

Hello, I wanted to check if this issue is still open. If it is, I would like to work on it. I have hands-on experience with Next.js (App Router), modern React, TypeScript, and Tailwind CSS, and I am comfortable migrating and restructuring frontends for long-term maintainability and scalability. For proof of my skills, here are two projects I built: Owise (https://github.com/Omkarop0808/Owise) and Finexa (https://github.com/Omkarop0808/Finexa). I am happy to start by rebuilding a core part of the UI to demonstrate my approach. Please let me know if the issue is available and if there are any specific constraints or priorities before I begin.

[Prasad8830]

Hi @yash170106065, @khanspers, and mentors 👋

I’m really interested in contributing to the GraphSpace frontend modernisation and would love to get involved in this project.

About me

I’m a 3rd-year undergraduate student at IIT Kharagpur with full-stack internship experience and over a year of consistent open-source contributions. Over this time, I’ve worked on real-world codebases where I contributed to full-stack features, improved frontend structure, migrated UIs, and cleaned up existing code to make it more maintainable.

I’ve also taken part in several hackathons and development competitions, which taught me how to build practical, scalable solutions and collaborate effectively under time constraints.

Why I’m a good fit for this project

• Hands-on experience with React, Next.js (App Router), and TypeScript
• Comfortable building scalable full-stack applications and organising frontend code in a clean, reusable way
• Regularly use Tailwind CSS and follow a component-driven development approach
• Have used shadcn/ui extensively in multiple personal projects as well as during my internship, and understand when it makes sense to integrate a component library (like shadcn/ui or MUI) and when to keep things lightweight
• Familiar with ESLint, Prettier, and standard open-source collaboration practices

Getting started

I’m happy to start with a small, well-scoped PR-for example, setting up the Next.js App Router structure, creating a base layout, shared UI components, or migrating a simple page to establish patterns. I’m also open to following any roadmap, design references, or priority areas you think contributors should focus on first.

I’m looking to be an active and long-term contributor, not just submit a one-off PR, and I’d love to learn from and collaborate with the mentors and community.

Thanks for your time, and I’m looking forward to your guidance! 🙌

[akriti311]

Hi @yash170106065 , @khanspers , and mentors,

I’m interested in contributing to the GraphSpace frontend migration and learning through the transition to Next.js and modern React.

About me :

I’m currently building my frontend skills with JavaScript, React, and Next.js, and I’ve started exploring the existing GraphSpace UI and repository to understand the current structure and features. My focus right now is on learning by doing and contributing incrementally to a real-world codebase.

Before I dive in, I wanted to ask:

• Is there a particular part of the frontend that would be a good place for a first contribution?
• Would it be better to start with setup or structural work or with a small UI component or page?

Thanks for your time, and I’m looking forward to contributing.