File Uploader

columk-file-uploader.up.railway.app

A cloud storage application built with Express using Prisma, Postgres, PassportJS and EJS. Hosted on Railway.

About The Project

This was a project assignment from The Odin Project's 2024 Node course update. The brief was to create a stripped down version of Google Drive using Express and the templating engine EJS.

Key Features

• Folder Management: Create, organize, and navigate folder structures with web components.
• Sorting: Sort items by name, size, or creation date in the main view.
• Folder Sharing: Share folders using a public access interface.
• Direct File Sharing: Generate direct download links for individual files.
• Access Control: Set expiration dates for shared folders and files.
• User Feedback: Use loading states and display popover alerts to provide clear feedback.
• Accessibility: An inclusive experience with support for assistive technologies and keyboard-only navigation.

Additional Features

• Authentication: Secure user sessions with PassportJS and Prisma Session Store.
• Cloud Storage Integration: Securely manage file uploads and downloads with Supabase Storage.
• Error Handling: Centralized error handling middleware.
• Performance Optimization: Caching, bundling and compression of static assets.
• Security: Protected against common vulnerabilities with Helmet.
• Form Validation: Real-time form validation providing live feedback in forms.
• Modular Architecture: Application structured by feature and split into layers for modularity and maintainability.
• Type Safety: All backend code written in Typescript.

Personal Note

I found the Express/EJS stack quite limiting in this project. Although the app worked great locally, when deployed, the UX of waiting for server responses during navigation events was pretty awful. (Like many of these hobby full-stack projects, it's deployed on a free-tier with slow response times and no choice over the server and database location.) Ultimately, I ended up hacking an event handler to display a spinner on all navigation to make up for this.

Express/EJS isn't an ideal stack for a highly interactive app unless you want to go completely overboard with client-side scripting and create a mini-SPA out of the main view template. The frontend wasn't the focus of this project, but if I could go back I would create a REST API with a separate React frontend. (HTMX would have worked well too.)

Getting Started

To get a local copy up and running follow these steps.

Prerequisites

1. Database Setup:

Set up a local PostgreSQL database using one of the following methods:

• Option A: Use psql to create the database manually.

• Option B: Use the included Docker Compose file:

  docker-compose up

2. Supabase Setup:

Create a project and set up a private storage bucket on Supabase.

Installation

1. Clone the repo

   git clone https://github.com/columk1/file-uploader.git

2. Install NPM packages

   npm install

3. Set up .env file

   PORT=
   DATABASE_URL=
   SESSION_SECRET=
   
   SUPABASE_URL=
   SUPABASE_SERVICE_ROLE_KEY=
   SUPABASE_BUCKET=
   

4. Migrate the database

   npx prisma db push

5. Bundle static assets

   npm run bundle

6. Start the development server

   npm run dev

Roadmap

• Create unit tests, integration tests and snapshots using Vitest

Contact

Email: [email protected]
Twitter: @ColumKelly3
Website: columkelly.com

Live Project Link: columk-file-uploader.up.railway.app