GSoC: Build a new version of the JSON Schema tooling page

[benjagm]

GSoC : Build a new version of the JSON Schema tooling page

Brief Description
JSON Schema is a fundamental technology massively used in the industry thanks to the amazing tooling available in the Ecosystem. In fact, the JSON Schema implementations page is third page in terms of visits which shows how important is for the JSON Schema users base. Some months ago we released a new version of the JSON Schema website, however the UX of the current page is suboptimal producing friction and slowing down the JSON Schema adoption.

The goal of this Project Idea is to build a new data-driven version of the page, with filters, call to actions to add implementations. The approved UX of this page is available here: JSON Schema Site Mock-up.zip and the community discussion is available on this issue: json-schema-org/website#160.

Before start working on the issue we'll review the discussion and capture the last requirements but as of now, the expected changes are just regarding Bowtie integration.

The JSON Schema website repository is available here: https://github.com/json-schema-org/website

Expected Outcomes

A new version of the tooling page, with filters, call to actions to add implementations. The approved UX of this page is available on this issue: json-schema-org/website#160

Skills Required

Front-end development with familiarity with Typescript, React and Next.js.

Mentors

@benjagm

Expected Difficulty
easy/medium

Expected Time Commitment
175 hours

[vr-varad]

@benjagm I would like to discuss this proposal with the mentors. I am interested in this proposal

[vr-varad]

Subject: GSoC Proposal: Building a New Version of the JSON Schema Tooling Page

Dear @benjagm ,

I am writing to express my strong interest in the project titled "Build a new version of the JSON Schema tooling page." I am excited about the opportunity to contribute to the JSON Schema project and believe that my skills in MERN stack development, coupled with my eagerness to learn and adapt, make me a suitable candidate for this project.

About Me:

My name is Varad Gupta. I have a strong background in MERN stack development and have completed projects that demonstrate my proficiency in MongoDB, Express.js, React, and Node.js. My experience also extends to containerization using Docker.

Why JSON Schema?

While my specialties lie in the MERN stack, I am enthusiastic about expanding my skill set and contributing to the JSON Schema project. I recognize the importance of JSON Schema in the industry and am motivated to improve its tooling page to facilitate a smoother user experience.

Learning Plan:

I am committed to learning and mastering the required technologies for this project, including Typescript, React, and Next.js. To ensure a seamless transition, I plan to dedicate 35hr per week to self-paced learning, utilizing online resources, and documentation, and seeking guidance from mentors like @benjagm. I am confident that my existing proficiency in web development will expedite the learning process.

Proposed Approach:

Understanding the Current Codebase: I will start by thoroughly reviewing the existing JSON Schema website repository on GitHub to gain a comprehensive understanding of the codebase.

Learning Technologies: I will diligently study Typescript, React, and Next.js, leveraging tutorials, documentation, and hands-on coding exercises to acquire proficiency in these technologies.

Implementing Filters and Call to Actions: Following the approved UX design available on issue json-schema-org/website#160, I will actively engage with mentors and the community to implement filters and calls to action on the tooling page.

Regular Updates and Feedback: I am committed to providing regular updates on my progress, seeking feedback, and making necessary adjustments throughout the project timeline.

Timeline:

I have carefully reviewed the expected time commitment of 175 hours and am confident I can meet this requirement. Here is a tentative timeline for the project:

Weeks 1-2: Codebase review and understanding
Weeks 3-5: Learning Typescript, React, and Next.js
Weeks 6-10: Implementation of filters and call to actions
Weeks 11-12: Testing, bug fixes, and finalization
Conclusion:

I am excited about the opportunity to contribute to the JSON Schema project and believe that my dedication, adaptability, and solid foundation in web development will enable me to successfully complete this project. I am eager to collaborate with the mentors and the community to deliver a new, improved tooling page for JSON Schema.

Thank you for considering my application. I look forward to the possibility of working on this project and contributing to the success of JSON Schema.

Sincerely,

Varad Gupta.

[Gaurav-Verma07]

Hey @benjagm, this new implementations page looks robust and more user friendly compared to existing one.
Adding filter options will also enhance UX and easy accessible to users.
Being a regular user of json-schema, I'd love to contribute to this new implementation as part of GSoC.

[skushagra9]

I am interested for this project

[deveshidwivedi]

Hello, I find this issue very interesting to work upon. I have considerable experience with react, next.js and typescript. Currently, I plan to work on already existing issues in the repository to get familiar with the codebase. I will come up with ideas on implementation and functionality soon. Thank you!

[DhairyaMajmudar]

This project seems to be pretty interesting and aligning with my tech stack , would like to work on this 🚀

[AjayAsnani]

Hey @benjagm as I'm a passionate frontend Web developer and also have experience with building frontend I find this issue perfectly suits me and I like to work on this project So, can you please assign this issue to me?

Would also love to discuss more about this project.

[benjagm]

Thanks a lot for joining JSON Schema org for this edition of GSoC!!

Qualification tasks will be published as comments in the project ideas by Thursday/Friday of this week. In addition I'd like to invite you to a office hours session this thursday 18:30 UTC where we'll present the ideas and the relevant date to consider at this stage of the program.

Please use this link to join the session:
🌐 Zoom
📅 20124-02-29 18:30 UTC

See you there!

[benjagm]

Qualification task

The qualification task for this issue consist on completing one issue of the website development or documentation board. If you collaborate with someone to do a joint PR that will perfect. In fact, we'd love to see you all collaborating.

If there are no issues available, you can be reviewer of PRs opened by others.

We are interested in contributors that are creative and strong at front-end but most important, contributors that are good open source citizens and love collaborating with others.

Mentor: @benjagm

[ankitmrj]

Respected JSON Schema team,
Greetings!

I am Ankit Srivastav , a first year student of Bachelor of Technology (Computer Science and Engineering) from MMMUT India.
I have experience in the field of MERN development. I am open source contributor and eager to contribute to esteemed organization.
I am thrilled to contribute and learn from idea {#602 Build a new version of the JSON Schema tooling page}.
Please help way to contribute ,discuss and share ideas more.

[Michael-Obele]

Hey @benjagm, I would love to help with this. I believe I am familiar enough with the code base to complete it, and I know I can contact you if I have any problems. I would not mind working with others on this too.

[satyam-x10]

Dear JSON Schema Team,

I am Satyam Kumar, a 3rd year B.tech student from IIT and I'm excited to express my interest in building a new version of the JSON Schema tooling page. With my background in frontend and backend development, along with familiarity with TypeScript and react, I find this project aligning with my skills and aspirations. I envision contributing to an enhanced user experience through intuitive UI/UX design, dynamic data integration, and fostering community collaboration. I am eager to join forces with the JSON Schema team and fellow contributors to create a valuable resource for developers worldwide.

I would request @benjagm to give me this opportunity to contribute in this project. #602
Thanks

[AdityaSingh-02]

Hello @benjagm

Hello! I'm Aditya Singh, a Computer Science undergraduate from India with a passion for open-source contributions. Previously, I had the opportunity to participate in Google Summer of Code 2023 at Rocket.chat, which was an enriching experience. This season, I'm eager to channel my skills and knowledge into contributing to JSON Schema. The project's requirement matches my tech stack, and I'm excited about the potential impact I can make by contributing to JSON Schema. I'm looking forward to making some worthy contributions🚀

x - https://twitter.com/Go_D_Aditya

For Developing a new version of JSON schema Implementations page -

The main focus of this project would be to improve overall user experience for the implementations page.

• I would focus on building new version for both mobile as well as desktop keeping the page responsive.

• I would create a filter that would-

  • When on Desktop, have them across the top, and sticky (stay when you scroll, and not on mobile)
  • For mobile, a filter button which opens an overlay with the filter options (like the main menu)

• This project would mainly include of creating new components and replace the existing components with the newer one’s… hence enhancing the user experience...

Further discussing, I have gone through the designs for both desktop and mobile view, This project uses NextJS and tailwind CSS for the frontend styling and I have hands on prcatice with it.

I have discussions here as well json-schema-org/website#160

[benjagm]

We just added Added clarification of the current design and what requirements are still under discussion.

[BigJoe17]

Hey @benjagm I am a passionate computer science student here in India and I Would love to contribute to this project although I will need help along the way,I find it interesting because I use this software regularly and it meets my tech stack. I do hope I get familiar with the codebase

[benjagm]

🚩 IMPORTANT INSTRUCTIONS REGARDING HOW AND WHERE TO SUBMIT YOU APPLICATION 🚩

Please join this discussion in JSON Schema slack to get the last details very important details on how to better submit your application to JSON Schema.

See communication here.

[Khaleeq01]

@benjagm I am interested in this project. What is the next step . Should i submit my proposal on GSOC Website ?

[litvinovajann]

Dear @benjagm,

I would love to participate in building a new version of the tooling page.

About me.

I am a Junior Software Engineer with experience in building production e-commerce web applications in JavaScript and PHP. The main tools and languages that I use are JavaScript, TypeScript and React.js.

Why JSON Schema?

I am interested in this project because it gives me a chance to work under the mentorship of experienced software developers. I want to work alongside other GCoS participants and I am excited to learn all the tools that are used in the project.

How to get the best out of me.

Although I am capable of delivering code on my own, I would prefer to work in a team. I would like guidance from the mentors on best practices and approaches.

My availability.

I am available to work on the project Monday through Thursday in timezone UTC-7.

My work preferences and organization.

I usually use VSCode as a coding environment and Linux Ubuntu as my OS.

My plan.

• Week 1-2: implement filters in the sidebar;
• Week 3-4: implement the search bar in the sidebar;
• Week 5-6: implement the component for Validators, Hyper-Schema and Schema Generators;
• Week 7: implement the block above the filters with the amount of implementations;
• Week 8: implement the subscribe form in the middle of the page;
• Week 9: implement the new footer;
• Week 10-12: code stabilization.

My qualification task.

Add first commit date to initial repository data #5