DataDrive95

DataDrive95's login menu

Description

A file uploader service that allows users to sign-up, login, upload files, download files and view details related to their files. Additionally users can create folders to store their files in.

DataDrive95's user dashboard showing folders and uploaded files DataDrive95's file uploader modal showing a file ready to be uploaded

Objective

My mission here was to create a file uploader service similar to Google Drive. Users would be able to create an account and securely upload their files via the browser to a Supabase-based cloud storage bucket.
Files could then be downloaded or inspected to show their details including file type, date uploaded and file size.

After clicking on the file icon users can view file details such as name, size, type and date added. Options to download or delete the file are also available.

Tech used

Supabase was the natural choice for cloud-based file storage. It's signed URLs meant I could add an additional layer of protection when it came to supplying download paths.
Cloudinary was a runner up. Implementing Supabase was more straightforward and I didn't require the additional image capabilities of Cloudinary.


Passport was important for user authentication, as well as creating and persisting user sessions for up to 30 days. I wanted users to be able to come back and still be logged in for faster access to their files.

DataDrive95's folder menu modal for creating, updating or deleting folders
Being able to create, update and delete folders helps users organise their files. This menu is dynamic, meaning that if there aren't any folders to delete or update, the delete and update menus won't display.

Challenges

Using cloud-based file storage changed the way I thought about architecting the database.
Initially I'd hoped I could store files on the database itself. But, it was a paradigm shift to think of the database as only holding meta-data related to the files and not the files themselves! 🤯

Additionally, I had a friend run penetration tests on the site. I love it when someone can break my sites! And... break it he did! Which I was thankful for. The tests revealed that user's files could be accessed by anyone simply by replacing the file's index number in the URL parameteres... Oops.
After this I implemented middleware that checks the file ID's against the user's ID to ensure only people who own the files are able to download them.
This was a great learning experience!

Let's Keep in Touch

If you're after a developer for your next project, have something you'd like to ask or just want to stay in touch, feel free to reach out.

ruuksine@gmail.com