Overview Deliverables Demo Challenges Contributions Mentors Mentors Links
The Google Summer of Code Community Hub project for Rocket.Chat is centered around developing a full-stack web application designed to streamline collaboration for open-source communities. Built using a custom component framework, the project emphasizes two key areas of innovation:
Syntax Sweetening: By introducing HTML-tag-like notation into component layout files, this approach simplifies server-side customization. The result is a more intuitive development process, allowing for easy layout generation through WYSIWYG (What You See Is What You Get) IDE tools. This makes the platform accessible to developers of varying skill levels.
Data Definition and Maintenance: A robust system was implemented to manage component data efficiently, ensuring flexibility and scalability across the platform. This allows the Community Hub to meet the diverse needs of different open-source communities.
The overarching goal is to create a highly customizable, scalable platform that enhances collaboration and communication within open-source communities
This year's work builds on this framework, making it significantly easier for community builders to customize their GSoC hubs.
- Developed a new syntax allowing web app creators to define component-based static sites in a single source file
- Implemented parsing of .agml files to generate React functional components
- Modified the existing build process to accommodate customizations from syntax sweetened declaration files
- Implemented efficient integration of customizations at appropriate build stages
- Created a system to abstract away complexities of data handling for component creators
- Implemented functionality for component creators to define data directly in syntax sweetened declaration files
- Developed tooling to simplify the integration of dynamic data into static sites
-
Demonstrating the creation of Rocket.Chat Community's Demo Day page using our framework. This process leverages our
eventsfull-stack component andnavbarcomponent to generate a static website efficiently. -
Additionally, showcasing the Rocket.Chat Community's GSoC project ideas page created with our framework, which incorporates the
gsoc-projectsfull-stack component and thenavbarcomponent to generate a static website.
- During build-time, if data is specified in the component syntax, it is automatically checked and updated in the database if changes are detected. If data is not specified, it is seamlessly fetched from the database via the CMS API.
- A new feature in development will enable users to log in and persist their preferences across sessions. This will use FaunaDB to securely store and retrieve user settings, allowing for a more personalized and consistent user experience ✨
| PR Link | Description | Status |
|---|---|---|
| Link | This major PR consolidates all the final changes and features implemented during the project, which underwent continuous and significant transformations over the course of development. |  |
-
Our initial attempt at syntax sweetening using Ripgrep, a Rust-based grep tool and regex proved unreliable. After reconsidering, we switched to
Abstract Syntax Trees (AST)for parsing .agml. I invested time in learning AST manipulation, eventually adopting theTypeScript Compiler API. This allowed us to effectively convert .agml into static Next.js web pages with better accuracy and flexibility. -
Fun fact: AGML stands for
Anjaneya Gupta Markup Language—a name suggested by my mentor, Sing Li, and named after myself ;)
- Creating a dynamic data-fetching solution that worked with both JSON and CMS data presented challenges. We pondered over multiple approaches to ensure consistency between the two data sources and explored different methods, such as checking build numbers or using a flag during build-time. Prototyping various solutions helped us refine our approach and ensure consistency between data sources, leading to a more reliable and flexible system.
- The project underwent significant restructuring. Initially, we used a TurboRepo setup, but after multiple iterations, we simplified it. The final structure included a
build folderfor the Next.js static site and asrc folderfor .agml files and associated data. This streamlined structure made the project more manageable and efficient for the community builder.
- Initially, we considered implementing traditional OAuth, but after a deeper analysis, I realized that this approach would require running a separate authorization proxy server, which was unnecessary for our static site.
- To explore this further, I built a prototype of OAuth that required a server. This experiment led to an in-depth discussion on the practicality of OAuth for our use case. Ultimately, we concluded that OAuth was an over-engineered solution for our needs, allowing us to pivot towards a simpler authentication solution using
FaunaDB.
- We chose
Payload CMSover Strapi due to its code-first approach and seamless integration with Next.js. Unlike Strapi, which required running in a separate Docker container, Payload CMS allowed us to run everything within our existing Next.js environment. - Payload CMS also stood out for its active and helpful community, which played a crucial role during the initial stages. I interacted directly with the core maintainers to implement Payload CMS 3.0 alpha, customizing it to our specific needs with build-time scripts. This hands-on collaboration enabled us to modulate the CMS effectively, setting a solid foundation for our project.
- In our front-end development, Bootstrap proved superior to Tailwind for our use case. Bootstrap offers responsive, pre-built components and allows easy CSS overrides through its syntax, reducing code complexity and streamlining development. This efficiency and simplicity made it ideal for our project. I created a
Proof of Concept (POC)to demonstrate Bootstrap's advantages, which ultimately solidified our decision.
By prototyping early and iterating quickly, I was able to provide clear demonstrations that informed our decisions, making our development process more efficient and focused.
Learned something new today? Reciprocate the love and ⭐ this repo for good karma.
I extend my sincere gratitude to my mentors for their invaluable guidance and support throughout this journey. Their expertise and encouragement were instrumental in overcoming challenges and pushing the boundaries of what we could achieve 🙏
I'm a Computer Science student passionate about full-stack development, open-source contribution, and deep learning. What sets me apart is my strong problem-solving skills and my knack for finding creative solutions to complex challenges. I'm a curious and inquisitive individual, always pushing the boundaries of what's possible and eager to collaborate on impactful projects.
My journey as a software engineer began with an insatiable fascination for technology and a burning desire to be at the forefront of innovation. During this journey, I have really upgraded my skills in frameworks such as Next.js whilst learning and applying languages such as Typescript, shell scripting, GoLang, SQL( Prisma + Zod). I’ve worked a lot on my DevOps skills as well while working at Zscaler as a DevOps Intern and building a MVP of a project ( Zcoder ~ an internal tool to generate unit test cases, provide code suggestions etc using the LLM trained on our private codebase) which was presented to the board of the company!
| Student | Anjaneya Gupta |
|---|---|
| Organization | Rocket.Chat |
| Project | Google Summer of Code Community Hub 2024 |
| GitHub | @anjy7 |
| Anjaneya Gupta | |
| anjyofficial@gmail.com | |
| Rocket.Chat | anjaneya.gupta |
| Project Github Repository | GSoC-Community-Hub |