DEV Community

Cover image for Revisiting My First Semester Project with My Own Open-Source Library
PRANAV THAWAIT
PRANAV THAWAIT

Posted on

Revisiting My First Semester Project with My Own Open-Source Library

#ai #react #programming #product

📸 Revisiting My First Semester Project with My Own Open-Source Library

There's something special about looking back at your old projects.

They remind you how much you've learned—not just in writing code, but in thinking like an engineer.

Recently, I decided to revisit PhotoTrance, a project I built during my first semester of college.

This time, instead of just fixing bugs or redesigning the UI, I upgraded it using something I built myself: DriveLoader.

What is PhotoTrance?

PhotoTrance isn't an AI project or a portfolio template.

It's simply a collection of photographs I've captured over time.

Photography has always been one of my favourite hobbies, and I wanted a clean website where I could showcase the moments I had captured through my lens.

🌐 Live Website:
https://photo-trance.vercel.app/

💻 Repository:
https://github.com/Pranav00076/PhotoTrance

Although the project was simple, it had one problem.

The Original Approach

Every photograph was stored inside the project itself.

The repository looked something like this:

/public
    images/
        photo1.jpg
        photo2.jpg
        photo3.jpg
        ...
Enter fullscreen mode Exit fullscreen mode

Every time I clicked new photos and wanted to update my gallery, I had to:

  • Copy the images into the project
  • Commit the changes
  • Push them to GitHub
  • Wait for Vercel to redeploy

It worked.

But it wasn't a great workflow.

The repository kept growing, deployments became larger, and updating the gallery meant touching the codebase even though I was only adding media.

I knew there had to be a better way.

That's When DriveLoader Came In

A few weeks ago, I built DriveLoader, an open-source React library that makes Google Drive work like a media source for React applications.

Instead of manually converting Google Drive links or worrying about broken URLs, DriveLoader handles everything automatically.

Installing it is simple:

npm install @driveloader/react
Enter fullscreen mode Exit fullscreen mode

Instead of storing images locally, I uploaded my photographs to a public Google Drive folder and updated PhotoTrance to load them dynamically.

Now the project no longer depends on local image assets.

What Changed?

The improvement was bigger than I expected.

Before

✅ Images stored inside the repository

❌ Every gallery update required a Git commit

❌ Every new photo required a redeploy

❌ Repository size kept increasing

After

✅ Photos hosted on Google Drive

✅ Smaller repository

✅ Cleaner project structure

✅ Easier image management

✅ Dynamic media loading

Now, when I want to add another photograph to my collection, I don't need to touch the project's assets anymore.

Why I Built DriveLoader

DriveLoader started because I kept facing the same problem.

Google Drive is an excellent place to store files, but using those files directly in React isn't straightforward.

Developers usually end up:

  • Converting share links manually
  • Trying different Drive endpoints
  • Writing helper functions
  • Debugging broken images

After solving the same problem several times, I decided to package the solution into an open-source library.

Today, DriveLoader provides:

  • 🖼️ Google Drive image support
  • 🎥 Google Drive video support
  • 📁 Public folder loading
  • ⚡ Smart URL resolution
  • 💾 Built-in caching
  • 🔄 Automatic retries
  • ⚛️ React components & hooks
  • 🔷 Full TypeScript support

The goal is simple:

Paste your Google Drive link and let DriveLoader handle everything else.

One of the Best Ways to Test Software

I strongly believe that one of the best ways to validate a developer tool is to use it in your own projects.

It's easy to build features.

It's much harder to rely on them every day.

Upgrading PhotoTrance with DriveLoader helped me identify areas for improvement, simplify the API, and make the library more practical for real-world use.

There's something satisfying about seeing your own open-source project solve a problem you genuinely had.

Try It Yourself

If you have a React project that uses Google Drive for storing images or videos, you can get started in seconds.

Install 

npm install @driveloader/react
Enter fullscreen mode Exit fullscreen mode

DriveLoader

⭐ GitHub

https://github.com/Pranav00076/driveLoader

📦 npm

https://www.npmjs.com/package/@driveloader/react

Product Hunt

https://www.producthunt.com/products/npm/driveloader/launch-day

Explore PhotoTrance

If you'd like to see DriveLoader in action, check out PhotoTrance.

🌐 Live Website

https://photo-trance.vercel.app/

💻 GitHub Repository

https://github.com/Pranav00076/PhotoTrance

Final Thoughts

Revisiting old projects is something every developer should do.

You'll often find opportunities to simplify code, improve architecture, and apply everything you've learned since you first built them.

For me, upgrading PhotoTrance wasn't just about replacing local images with Google Drive.

It was proof that a tool I built to solve my own problem could also make one of my earliest projects cleaner, easier to maintain, and more enjoyable to work on.

Sometimes, the best showcase for an open-source project isn't a demo application—it's your own work.

If you try DriveLoader in one of your projects, I'd love to hear how you're using it and what features you'd like to see next. 🚀

Top comments (0)