File Uploader

A full-stack Express + PostgreSQL file management application that allows users to upload, organize, edit, and delete files and folders. Includes authentication, metadata handling, pop-up interactions, and a modern, responsive UI built with EJS and Tailwind CSS.

Live Demo

Vercel: https://file-uploader-nine-umber.vercel.app/

Tech Stack & Tools

Main Page

Design

Icons:

High Fidelity Prototype

Design System

Features

• Add, edit and delete files and folders
• Download files
• Share files temporarily for the period of your choice
• Tree-based folder organization
• Metadata support: name, extension, size, time of creation
• Persistent login authentication

Database Layer

• PostgreSQL hosted on NeonDB
• Supabase for management of files

UI (Tailwind + EJS)

• Lucide Icons
• Tailwind CSS v4
• Modern, minimal, responsive UI
• Clean EJS templates

Tech Stack

Backend

• Node.js
• Express 5
• Passport.js (authentication)
• Express-Validator (data validation)
• Multer (image uploads)
• PostgreSQL (NeonDB and Prisma (ORM))
• Mime-Types

Frontend

• EJS
• Tailwind CSS 4
• Vanilla JavaScript
• Lucide Icons

Folder Structure

Folder Structure

books-inventory/
│
├─ app.js
├─ package.json
├─ prisma.config.js
├─ README.md
|
├─ generated/prisma
|
├─ prisma/
│   └─ schema.prisma
|
├─ db/
│   └─ prisma.js
│
├─ repository/
│   ├─ userRepository.js
│   ├─ fileRepository.js
│   └─ userRepository.js
|
├─ services/
│   ├─ fileService.js
│   ├─ folderService.js
│   ├─ supabaseService.js
│   └─ authService.js
|
├─ controllers/
│   ├─ authController.js
│   ├─ fileController.js
│   ├─ folderController.js
│   └─ fileManagerController.js
|
├─ lib/
│   ├─ supabase.js
│   └─ passport.js
|
├─ utils/
│   ├─ infoFormatting.js
│   └─ validator.js
|
├─ routes/
│   ├─ authRoute.js
│   ├─ errorRoute.js
│   └─ fileManagerRoute.js
│
├─ middlewares/
|   ├─ auth.js
│   └─ uploads.js
│
├─ public/
│   ├─ js/
|   |   ├─ popUps.css
|   |   ├─ fileDetails.css
|   |   ├─ fileUploader.css
|   |   ├─ sharePage.css
|   │   └─ dropDownActions.js
│   ├─ css/
|   |   ├─ custom.css
|   |   └─ style.css
|   └─ img/
|
└─ views/
    ├─ components/
    |    ├─ file-details.ejs
    |    ├─ folder.ejs
    |    ├─ file.ejs
    |    ├─ delete-account.ejs
    |    ├─ footer.ejs
    |    ├─ item-menu.ejs
    |    ├─ pop-up-delete.ejs
    |    ├─ pop-up-edit.ejs
    |    ├─ pop-up-file.ejs
    |    ├─ pop-up-folder.ejs
    |    └─ sidebar.ejs
    |
    ├─ file-manager.ejs
    ├─ error-page.ejs
    ├─ share-page.ejs
    ├─ sign-in.ejs
    └─ sign-up.ejs

Database Schema

https://dbdiagram.io/d

Setup & Installation

1. Clone the repository

git clone https://github.com/AliceSilva/File_Uploader.git
cd File_Uploader

2. Install dependencies

npm install

3. Create .env

PORT=8080
DATABASE_URL=your_neon_connection_string
SESSION_SECRET=your_secret_key_here
SUPABASE_KEY=your_supabase_key
SUPABASE_URL=your_supabase_url

4. Generate prisma client

npx prisma generate

Running the Project

Development mode (server + Tailwind watcher)

npm run dev

Build Tailwind for production

npm run css:build

License

MIT License — free to modify & share.