RepoSift

Better repository indexing and searching.

Device mockup of RepoSift

This is the successor of GitInspire, a project I've made recently. RepoSift aims to pave a way for expanding the feature set of GitInspire through a revision of the database models to allow for additional providers such as GitLab and Bitbucket. Compared to GitInspire, RepoSift is built entirely with Next.js, instead of using a separate back-end through Flask.

The main advantage of building the app entirely around Next.js for me was primarily the easier hosting of the application. Previously, I used Render to host the Flask back-end along with the PostgreSQL database. However, I faced challenges with using the free tier, most notably:

  1. The database only lasts for 90 days, requiring data migration every 3 months.
  2. The cold starts with the back-end provided a suboptimal experience.

With the application built entirely with Next.js, I can simply host the application on Vercel and know that all features will be available once the user accesses the site.

Features

The current functionality of RepoSift if the same as GitInspire, which it:

  1. Provides a simple interface to find "random" repositories on our supported providers (currently just GitHub).
  2. Provides a database of indexed repositories which is created by the contribution of developers who use RepoSift.
  3. Allow users to contribute to RepoSift by creating new labels and by indexing repositories.

Planning and Implementation

With this application, I wanted a neubrutalism look, and I ended up creating a Figma design to base my application off of. After creating the design, I needed to decide on the tech-stack to build my application. I decided to use the following:

At the time, Auth.js did not have a Drizzle ORM adapter (they recently added one), however, the current adapter structure did not suit all my needs. I wanted to provide a way for users to manually link accounts, which potentially may not have the same email address. This required creating a custom adapter and some hacking-around with the implementation and global Auth.js types to get it in a place I was satisfied with.

PlanetScale and Drizzle ORM are pretty new technologies for me and took a bit of a learning curve to get used to it. PlanetScale had some caveats not seen with a regular MySQL database, such as not allowing foreign keys, however, there were some work arounds to this with using Drizzle ORM. Drizzle ORM had the issue of being a pretty "new" technology, with a feature set not fully developed. Compared to using PostgreSQL, MySQL does not have arrays, so it made implementing "Indexed Search" a bit more difficult. However, it was easy to get the hang of interacting with the database.

Since I am using Next.js' new App Router, I decided to take advantage of its features by utilizing server-actions instead of API routes along with fetching data within the server components. I found server-actions to be useful as it truly limits "routes" to the host site, instead of allowing third party applications such as Postman access. With server components, this adds a new dynamic with creating pages as we can pre-fetch the data on the server rather than the client, reducing the need for a visual loading cue.