DEV Community: Harsh

GSoC 2025 – Week 11 with CircuitVerse 🚀

Harsh — Mon, 18 Aug 2025 08:31:43 +0000

Hey everyone!
Week 11 was a big one. Our Landing Page Revamp is now live in production 🎉 and we made strong progress on the search experience.

🏠 Landing Page Revamp – Merged and Live

The completely redesigned Landing Page is finally merged and deployed to production.

Built with modular ViewComponents
Includes RTL support from the ground up
Matches the approved Figma design across all sections

This was one of the largest UI revamp efforts so far and a major milestone for the project.

🔎 Sorting PR – Final Changes

The Sorting PR is now ready for merge, with the final refinements added this week:

Fixed margin gaps in Project Search results
Added auto-submit on resource change (Projects vs Users)
Added auto-submit on sorting option selection, removing the need to click the Search button manually

These changes make sorting smoother, faster, and more intuitive.

🎛 Filters – In Progress

Work on the Filters PR is almost complete:

Added Apply and Clear buttons for easier filter management
Implemented multi-select for tags in projects
Added country dropdown and institute text field filters for users

The Sorting PR should be merged early next week, and the Filters PR will follow immediately after (target: Tuesday).

📌 Next Steps (Week 12 Plan)

Begin work on the Email Verification Flow to improve onboarding
Polish and test the new Search Filters for a smooth rollout

GSoC 2025 – Week 10 with CircuitVerse 🎯

Harsh — Tue, 12 Aug 2025 06:51:33 +0000

Hey everyone!
Week 10 was all about wrapping up sorting, finalizing filters, and preparing for the next set of features.

🔢 Sorting PR – Finalized & Ready

The Sorting PR is now finalized with all remaining UI tweaks completed, including:

✅ Responsive design for better usability on mobile and tablet
✅ Sorting icons to clearly indicate active sort order
✅ Polished dropdown styling for a consistent look with the rest of the app

With backend and frontend now fully integrated, this feature is ready for merge.

🎛 Filters – Ready for PR

The Search Filters feature is also complete and will be opened as a PR right after the Sorting PR merges to avoid merge conflicts.

Projects Search Filters

Filter by tags – Multi-select input allowing users to add or remove multiple tags for precise filtering.

Users Search Filters

Filter by country – Dropdown list to select a country.
Filter by institute – Text field for searching by institute name.

The backend implementation is already in place, so the PR will deliver a fully functional filtering system on day one.

📌 Next Week’s Focus (Week 11 Plan)

Start work on the Email Verification Flow to improve onboarding and user trust.
Migrate the remaining ViewComponents (Team Section on About Page, Text Editor, etc.).
Merge Filters PR after Sorting PR is in master.

With sorting and filtering nearly done, the search experience is about to become much more powerful and user-friendly.

GSoC 2025 – Week 9 with CircuitVerse ⚙️

Harsh — Wed, 06 Aug 2025 14:05:47 +0000

Hey everyone!
Week 9 was focused on enhancing the search experience through improved sorting mechanics and a clean, modular UI implementation.

🔢 Sorting PR: Backend & Frontend Integration

We opened a comprehensive PR that added:

✅ Counter cache columns for:
- stars_count on projects
- projects_count on users

This allows us to sort results efficiently using precomputed values instead of expensive COUNT(*) queries, which improves performance and scalability.

On the frontend side, we:

✅ Created a sorting UI component that dynamically adjusts options based on whether the user is browsing projects or users
✅ Hooked into the query parameters from the URL to initialize the UI with the correct state
✅ Made the select dropdown the secondary source of truth.

📦 Stimulus Controller for Sorting UI

We used a Stimulus controller to manage this sorting UI, ensuring modular, clean code and proper separation of concerns. This allowed us to:

Isolate behavior for easier testing and maintenance
Update the UI reactively based on changes in state or URL
Keep logic scoped tightly to the component that needs it

This PR took more time than usual as we spent time learning and applying Stimulus to build production-grade modular code.

📌 What's Next (Week 10 Plan)

✅ Finalize and merge the Sorting PR after one last review
🚧 Raise the PR for Search Filters UI, which will allow users to filter projects by tags and users by roles/interests
⌛ Complete the Footer section for the Landing Page Revamp once design discussions are finalized

Week 9 was slower in terms of visible output, but a lot of foundational work has been laid for a smoother Phase 2 rollout.

GSoC 2025 – Week 8 with CircuitVerse 🔍

Harsh — Tue, 29 Jul 2025 16:56:04 +0000

Hey everyone!
Since Week 7’s work was covered in our mid‑term report, here’s a focused recap of what we accomplished in Week 8:

✅ User Card Revamp UI Merged

Our User Card ViewComponent revamp PR was officially merged (originally drafted in Week 6 / covered in mid‑term).
The new design aligns with the approved Figma specs and includes full RTL support, accessible markup, and isolated component previews.

🏠 Landing Page Revamp – Footer Discussion Pending

The Landing (Home) Page Revamp is nearly complete! We’ve implemented all major sections—Hero, Features, Testimonials, and Call‑to‑Action—using modular ViewComponents and built‑in RTL styling.
Only the Footer section remains. We’ve flagged it for a quick design discussion before starting development to ensure link structure, social integrations, and legal text meet project standards.

🔍 Search Page: Sorting & Filtering (Backend)

Counter caches have been added:
- Projects now maintain a stars_count column
- Users now maintain a projects_count column
These caches allow us to sort and filter in constant time (O(1) reads) instead of issuing COUNT(*) queries on every request, improving response speed and reducing database load.
The backend endpoint for sorting by popularity (stars or project‑count) is fully implemented and covered by unit tests.

Next up (Week 9)

Finalize and merge the Search Page filter UI alongside sorting controls.

GSoC 2025 – Week 6 with CircuitVerse 🚀

Harsh — Mon, 14 Jul 2025 12:42:58 +0000

Hey everyone!
Week 6 marked another big milestone — the Landing Page Revamp PR is now live, and the User Card PR is all set for merge after feedback resolution. Here's a quick recap of the week:

🏠 Landing Page Revamp PR Created

This week, I officially opened the PR for the Landing (Home) Page Revamp, which includes:

✅ A redesigned Hero Section and other key sections based on the approved Figma design
✅ RTL support built in from the start
✅ Modular ViewComponents for better structure and reusability

This revamp lays the foundation for a modern, accessible, and visually consistent landing experience.

👤 Final Touches on User Card PR

I also resolved all remaining comments on the User Card ViewComponent Revamp PR.

That’s it for Week 6! The focus now shifts to reviewing the landing page changes, handling any feedback, and preparing for final cleanup and testing in the weeks ahead.

GSoC 2025 – Week 5 with CircuitVerse 💡

Harsh — Mon, 07 Jul 2025 21:56:21 +0000

Hey everyone!
Week 5 was all about closing loops, resolving feedback, and making progress on one of the most visible pages of CircuitVerse — the Home Page.

✅ Merged: Project Card & Search Bar UI Revamp

This week, I focused on addressing review comments and got two major PRs successfully merged:

Project Card UI Revamp – Final UI tweaks were made to align with the design system.
Search Bar UI Revamp – Resolved all conversations, including accessibility improvements and UI consistency fixes.

Both components are now part of the codebase and live with the new UI!

👤 User Card UI Revamp PR Progress

I created the PR for the User Card UI revamp, and as of now, most review conversations have been resolved. Just a few finishing touches left before it’s ready to merge.

🏠 Home Page Revamp (In Progress)

One of the bigger updates this week is the draft PR for the Home Page revamp. The new layout will include multiple redesigned sections based on the approved Figma designs.

✅ The Hero Section is already implemented.
🚧 Work is ongoing to complete the remaining sections.
🌐 RTL support is also being built into the Home Page.

The complete PR is on track to be finalized and opened for review in Week 6.

That's it for Week 5!, I’m looking forward to wrapping up the Home Page and polishing the final pieces in the coming weeks.

GSoC 2025 – Week 4 with CircuitVerse 🧩

Harsh — Mon, 30 Jun 2025 16:01:44 +0000

GSoC 2025 – Week 4 with CircuitVerse 🧩

Hi everyone!
Week 4 was focused on resolving feedback, getting key PRs merged, and continuing to align our UI components with the approved Figma designs. Here's a breakdown of what I accomplished:

✅ Resolved Feedback & Directory Fixes

I addressed mentor feedback on the View Component PRs by:

Refactoring the directory name from /component to /components (to follow Rails conventions using the plural form)
Fixing minor issues and cleaning up the structure

This helped align the project with community standards and improve clarity across the codebase.

🚀 PRs Merged This Week

Excitingly, several important PRs were merged:

✅ Contribute Card ViewComponent Migration
✅ Project Card ViewComponent Migration
✅ User Card ViewComponent Migration

This completes the migration of all major cards in the app to ViewComponents, making them more reusable and maintainable.

🎨 Project Card UI Revamp PR

I also opened a new PR to revamp the Project Card UI on the search page, matching the latest Figma designs. This involved:

Styling updates to match spacing, font, and layout specs
Making the ViewComponent more design-consistent and responsive

🔍 Search Bar UI Enhancements

For the ongoing Search Bar Revamp PR, I made several key improvements:

✅ Created a custom preview layout for all ViewComponents, making it easier to visualize and test UI in isolation in Lookbook
✅ Added keyboard navigation support to the custom select dropdown — improving accessibility and user experience

That wraps up Week 4! I'm happy to see more components polished, merged, and aligned with the new design system. Onward to finishing up the remaining UI components and refining interactivity next week!

GSoC 2025 – Week 3 with CircuitVerse 🔄

Harsh — Sun, 22 Jun 2025 13:19:05 +0000

Hey everyone!
Week 3 of GSoC has been all about breaking down complexity, enhancing reusability, and pushing forward with ViewComponent migrations and UI Revamp. Here's what I’ve been up to:

🧩 More UI Elements Migrated to ViewComponent

This week, I continued migrating UI components into ViewComponents to improve modularity and maintainability. I made PR for migrating:

✅ The Pagination component used on the search page
✅ The Contribute Card shown on the contribute page

🔍 Header Refactor & Search Bar Revamp

Last week’s large header PR was broken down into two focused PRs:

Search Bar Migration – Extracted the search bar into a reusable ViewComponent.
Header UI Revamp – Implemented the new header UI as per the Figma design with RTL support.

I also made a separate PR to revamp the UI of the search bar, improving both style and structure in line with the new design system.

🛠️ Cleanup: Removing Deprecated `current_user` Usage

While working on the Project Card migration, the legacy feature flag for S3 support was still present. Since S3 is now fully rolled out, I:

✅ Removed current_user being passed unnecessarily
✅ Cleaned up the related helper method by removing the feature flag logic

This helped simplify the component and align it with the current production behavior.

That's it for Week 3!

GSoC 2025 – Week 2 with CircuitVerse 🚀

Harsh — Sun, 15 Jun 2025 09:41:25 +0000

Hey everyone!
Week 2 of Google Summer of Code 2025 has been productive, with a strong focus on component migration and aligning the UI with our approved Figma design.

🧱 Migrating the Header & RTL Support

This week, my main task was to migrate the Header UI to match the finalized Figma design. Along with this, I also:

✅ Added RTL (Right-to-Left) support to ensure better accessibility and internationalization
✅ Migrated the Header and Notification partial into a ViewComponent

The changes were quite extensive, the PR reached over 500+ lines of code. Following a discussion with my mentor, I’m now working on splitting it into smaller, more manageable PRs, which will make the review process smoother and faster.

📦 More ViewComponent Migrations

In addition to the header work, I also:

✅ Migrated the Project Card to a ViewComponent
✅ Migrated the User Card to a ViewComponent

These migrations are part of the broader effort to make the codebase more modular, testable, and maintainable using ViewComponent architecture.

🔍 A Small Discovery

While working on the search functionality, I discovered that project search can be filtered by tags using the URL pattern /projects/tags/:tag. This insight could be helpful as we finalize the filtering UX in the upcoming search improvements.

That's a wrap for Week 2! I'm enjoying the process of learning, refining, and pushing changes that move the project forward. Thanks to my mentors for their guidance and feedback.

GSoC 2025 – Week 1 with CircuitVerse 🚀

Harsh — Mon, 09 Jun 2025 04:17:48 +0000

Hey everyone!
Here’s a quick update on what I worked on during Week 1 of Google Summer of Code 2025 with CircuitVerse.

🧩 Design Discussions

Before the coding period officially began, we had a focused meeting to discuss and iterate on the new search UI in Figma. The design is now almost complete! We’re currently finalizing:

How to display filters in the UI
Which filters will be available for both user search and project search

This final touch will ensure the search experience is intuitive and powerful for all users, I will be working on this during week 2.

💻 Coding Contributions

I’ve started off the coding period by working on a few migration tasks and community contributions:

✅ Opened 2 PRs:
- Migrated Text Editor Partial to view component
- Migrated Team Sections to view component
🛠️ Created a Good First Issue to help onboard a new contributor to the repository

That’s it for Week 1! Looking forward to finalizing the design and diving deeper into implementation in the coming weeks. Thanks to my mentors and the CircuitVerse community for all the support!

Community Bonding with CircuitVerse - GSoC 2025

Harsh — Fri, 30 May 2025 19:58:50 +0000

Hello everyone!
I’m excited to share my experience from the Community Bonding period of Google Summer of Code 2025 with CircuitVerse.

Getting Started 🚀

During these first few weeks, I spent time familiarizing myself with the community, codebase, and workflows. CircuitVerse has an incredibly welcoming and helpful community, which made it easy to settle in.

We had bi-weekly community meetings where all GSoC contributors, mentors, and other active members shared progress, plans, and even small wins from the past week. These meetings were a great way to stay aligned with the broader goals of the organization and stay motivated.

Apart from that, I also participated in recommended activities for the bonding period, including:

Exploring previous GSoC projects for context and inspiration
Discussing design directions with other contributors

Mentor Meetings 💬

In addition to the community sync-ups, I had weekly 1:1 meetings with my mentors, which were incredibly valuable. We had in-depth discussions about the search improvements for Project 3, one of the core focus of my summer contribution.

During these sessions, we are trying to finalize the Figma design for the new search experience, aligning on both functionality and UI/UX principles. The iterative design process and constant feedback will help shape a solution that is both user-friendly and technically feasible.

Looking Ahead 🔧

With a strong foundation laid, I will be moving into the coding phase with a clear roadmap and solid support from the CircuitVerse community and my mentors. I’m excited to start implementing the search enhancements and contribute to making CircuitVerse even more accessible and efficient for users.

Thank you to the entire community and my mentors for making this an engaging and collaborative experience so far. Looking forward to sharing more updates soon!

Just enough Typescript to build Projects.

Harsh — Tue, 11 Jul 2023 10:49:02 +0000

What is the point of using TypeScript ?

JavaScript is a dynamically typed language meaning type checking is performed at runtime or at the time of execution.

JavaScript allows accessing values which aren't present leading to unexpected bugs.

const person = { name: "John Doe", id: 1 };

console.log(person.email) // <- undefined
person.name.toUppercase() // <- will throw TypeError

TypeScript was created to solve these type of problems by adding static type checking to JavaScript.

Think of JavaScript as a person which doesn't provide feedback until you Beat the s- I mean ask it. The feedback provided however is not much in-depth such as where might the error be until you console log it like above.

TypeScript is a typed superset of JavaScript which provides static type checking (type checking is performed at compile time) to catch potential bugs before runtime. It adds type safety to your JavaScript code.

With TypeScript, The above code will now throw an error in the IDE before runtime.

Typescript is basically a more wiser version of JavaScript which helps you catch a lot of errors including typos, uncalled function (Math.random * 6), etc.

TL;DR

types + Javascript = Typescript.

Basic Types

Before using Typescript we need to know about JavaScript types and some special TypeScript types.

Here are a bunch of them -

string
number (there's no int or float data type in JavaScript)
boolean
Arrays (datatype[] or Array<datatype>)
object ({})
any (NOTE :- This removes the type safety provided by TS, meaning you will be back to the same old JavaScript for that particular variable)
undefined
void
never
unknown
Union Types (combination of two or more types)
Enum

and more.

Type Annotations and Inference

TypeScript allows you to optionally specify the type of variable while declaring it.

let name: string = "senbo";
let count: number = 0;
let isEven: boolean = true;
let array: number[] = [1, 2, 3, 4, 5];
let obj: { a : number; b : number; c?: number } = { a : 10, b : 20 
let age: number | string = 20; // union type, age is either a number or string
let alignment: "left" | "centre" | "right"; // Union of literal types
};

These are called Type Annotations.

In the example of object, we use ; separate the properties and declare a property optional by adding ? after its name.

But this is redundant as TypeScript can automatically infer the type of variable based on assigned value.

This is called Type Inference.

Functions in TypeScript

While declaring a function you can add Type Annotations to parameters and return type, so that arguments to that function gets checked.

function add(a: number, b: number): number  {
  return a + b;
}

In the above function, a and b are assigned the type number as well as the return type which comes after the closing parenthesis of parameter list, note that the return type can be inferred by typescript so it is not necessary to write always.

Here are some more examples

function print(name: string): void {
  console.log(`Hello ${name}`);
}

function sum(...numbers: number[]): number {
  return numbers.reduce((acc, curr) => acc + curr);
}

function printLength(item: string | string[]) {
  if (typeof item === "string") {
    console.log("Length:", item.length);
  } else {
    console.log("Lengths:", item.map(str => str.length));
  }
}

The first function, print, simply console logs the string, hence the return type is void.
The second function, sum, uses the Rest parameters syntax, allowing it to accept an indefinite number of arguments so we use array of numbers.
You may want to revisit reduce function.
and in the last function, printlength, item is either a string or an array of string, inside the function we use typeof to check its type. If it is a string, we simply log the length of the string otherwise if it is an array, we iterate over each string in the array and log their lengths. This is called Narrowing.

Type Aliases

It is a name for a type, It is used to create reusable types or if you simply want to separate writing types for convenience.

You may capitalize type aliases name to differentiate them from variables and functions.

type Person = {
  name: string;
  age: number;
};

function greet(p: Person) {
  console.log(`Hi ${p.name}, you are ${p.age} years old`);
}

greet({ name: "John Doe", age: 100 });

// Some more examples
type ID = number; 
type Name = string;
type Age = number | string;
type NaturalNumbers = number[];

type Body = {
  height: number;
  width: number;
  location?: string;
  readonly name: string; // This property cannot be re-assigned.
}

We can use type aliases to create function type expressions.

type func = (a: string) => void; // function type expression

function greets(name: string, callback: func) {
  callback(name);
}

greets("John Doe", function (name) {
 console.log(`Hi ${name}`);
});

The above type func means a function with one parameter of type string and returns nothing.

Interfaces

Interfaces are another way to name an object type. They are similar to Type Aliases but have some distinctions which we'll talk about later.

Syntax

interface Book {
  title: string;
  author: string;
  readonly pageCount?: number;
}

const book: Book = {
  title: "The Great Gatsby",
  author: "F. Scott Fitzgerald",
};

interface AnotherInterface {
  name: string;
  func: (a: string) => void; // describe a function inside interface
  func2(a: string): void; // another way to describe a function
}

// This is function type, functions in JavaScript are objects which can be called, and we can also add properties to our functions.
interface MathOperation {
  (x: number, y: number): number;
}

const add: MathOperation = (x, y) => x + y;
const subtract: MathOperation = (x, y) => x - y;

// Its type aliases equivalent
type MathOperationType = (x: number, y: number) => number;

Some key differences between Types and Interfaces

Types aliases do not support declaration merging while interfaces do.

Declaration merging is adding new properties to an existing interface.

for example,

interface Object {
  a: number;
}

interface Object {
  b: number;
}

function printobj(o: Object) {
  console.log(o.a);
  console.log(o.b);
}

Both Interface and types can be extended but have different syntax.

You can read more about these distinctions here.

You can use whatever you like, I generally use interfaces for objects and types for everything else.

Generics

lets say you wanna create a function that accepts an argument and returns it.

function identity(arg: any) {
  return arg;
};

let num = identity(5);

This works fine but the issue with this is we lose all our type definitions for the return value of the function. If we pass in an argument of type number, the function returns the same argument but with type any.

By using generic this problem can be solved.

function identity<T>(arg: T): T {
  return arg;
}

// Two ways of consuming generic functions
let num0 = <number>identity(5); // explicitly passing the T parameter
let num = identity(5); // let the compiler infer it

The T in the angle bracket is called the Type Variable, you can name it whatever you like.

Generics are used to create reusable components that work with different types of data.

Let's say now we want to pass an array of different types and return it

function identity<T>(arg: T[]) {
  return arg;
}

Notice we don't have to specify the return type as the compiler can infer it.

If we want to have a generic type for types with a length property such as string and arrays. We can use something called a constraint.

function identity<T extends { length: number }>(arg: T){
  return arg.length;
}

In similar way we can create generic interfaces.

interface Box<T> {
  value: T;
};

type NumberBox = Box<number>;
type StringBox = Box<number>;

Tuples

Tuples are array but with a pre-defined length and types for each index.

Syntax

type FirstTuple = [number, string];
type SecondTuple = [number, string, boolean];

const firstTuple: FirstTuple = [1, '2'];
const secondTuple: SecondTuple = [1, '2', true];

FirstTuple is an array of fixed length 2 with index 0 being a number and index 1 being a string. if we try access element past index 1, TypeScript will throw error.

never

Type when function never returns a value, it is similar to void but it is used when function throws an exception or if a function enters an infinite loop.

function throwError(message: string): never {
  throw new Error(message);
}

function infiniteLoop(): never {
  while (true) {
    // ...
  }
}

Non-null Assertion Operator (Postfix !)

It is used to tell the compiler to assume that a value is not null or undefined, even if typescript thinks it could be nullable.

function func(arg?: number) {
  console.log(arg!++);
}

Type Assertions

Type Assertions are way to override the type inference and explicitly set the type.

For Example

const btn = document.getElementById("my_button") as HTMLButtonElement;

TypeScript thinks that getElementById will return some kind of HTMLElement, but you can override this by using the as operator.

Thanks for reading, I tried to condense as much as examples possible and tried cover most frequently used types.

DEV Community: Harsh

GSoC 2025 – Week 11 with CircuitVerse 🚀

🏠 Landing Page Revamp – Merged and Live

🔎 Sorting PR – Final Changes

🎛 Filters – In Progress

📌 Next Steps (Week 12 Plan)

GSoC 2025 – Week 10 with CircuitVerse 🎯

🔢 Sorting PR – Finalized & Ready

🎛 Filters – Ready for PR

Projects Search Filters

Users Search Filters

📌 Next Week’s Focus (Week 11 Plan)

GSoC 2025 – Week 9 with CircuitVerse ⚙️

🔢 Sorting PR: Backend & Frontend Integration

📦 Stimulus Controller for Sorting UI

📌 What's Next (Week 10 Plan)

GSoC 2025 – Week 8 with CircuitVerse 🔍

✅ User Card Revamp UI Merged

🏠 Landing Page Revamp – Footer Discussion Pending

🔍 Search Page: Sorting & Filtering (Backend)

Next up (Week 9)

GSoC 2025 – Week 6 with CircuitVerse 🚀

🏠 Landing Page Revamp PR Created

👤 Final Touches on User Card PR

GSoC 2025 – Week 5 with CircuitVerse 💡

✅ Merged: Project Card & Search Bar UI Revamp

👤 User Card UI Revamp PR Progress

🏠 Home Page Revamp (In Progress)

GSoC 2025 – Week 4 with CircuitVerse 🧩

GSoC 2025 – Week 4 with CircuitVerse 🧩

✅ Resolved Feedback & Directory Fixes

🚀 PRs Merged This Week

🎨 Project Card UI Revamp PR

🔍 Search Bar UI Enhancements

GSoC 2025 – Week 3 with CircuitVerse 🔄

🧩 More UI Elements Migrated to ViewComponent

🔍 Header Refactor & Search Bar Revamp

🛠️ Cleanup: Removing Deprecated current_user Usage

GSoC 2025 – Week 2 with CircuitVerse 🚀

🧱 Migrating the Header & RTL Support

📦 More ViewComponent Migrations

🔍 A Small Discovery

GSoC 2025 – Week 1 with CircuitVerse 🚀

🧩 Design Discussions

💻 Coding Contributions

Community Bonding with CircuitVerse - GSoC 2025

Getting Started 🚀

Mentor Meetings 💬

Looking Ahead 🔧

Just enough Typescript to build Projects.

What is the point of using TypeScript ?

TL;DR

Basic Types

Type Annotations and Inference

Functions in TypeScript

Type Aliases

Interfaces

Generics

Tuples

never

Non-null Assertion Operator (Postfix !)

Type Assertions

GSoC 2025 – Week 8 with CircuitVerse 🔍

Next up (Week 9)

🛠️ Cleanup: Removing Deprecated `current_user` Usage