Folio

Folio is a full-stack reading curriculum web app. It lets you build themed reading plans (curricula) made up of books and articles, track your progress through each item's status, and maintain a personal backlog of things you want to read — with the ability to push backlog items straight into an active curriculum.

Features

• Curriculum Builder — view your active reading plan, track progress with a live progress bar, and cycle each item's status through Not started → In progress → Completed
• All Curricula — browse every reading plan you've created, activate one, archive old ones, or delete them
• Create Curriculum — spin up a new themed plan with a title, subtitle, and date range
• Reading Backlog — a personal library of saved books and articles, searchable and filterable by type, with tags and notes
• Add / Edit Item modal — a single reusable form for adding or editing books and articles, shared across the Curriculum and Backlog views
• Shareable curriculum links — each curriculum has its own URL (/curriculum/:id) so a specific plan can be bookmarked or shared
• Persistent data — all data is stored in MongoDB, so it survives refreshes and is available from anywhere the app is deployed

Local setup

cp .env.example .env # frontend: API base URL
cp server/.env.example server/.env # backend: Mongo connection + port
npm install && npm run dev # frontend on :5173cd server && npm install && npm run dev # API on :3000

Neither .env is committed. In production the values are supplied by the host rather than by a file — see .env.example for which is which.

Tech stack

Frontend

• Vue 3 (Composition API, <script setup>)
• Vue Router
• Vite
• Lucide icons (lucide-vue-next)

Backend

• Node.js
• Express
• Mongoose

Database

• MongoDB (hosted on MongoDB Atlas)

Deployment

• Coolify (on Strettch Cloud)

Project structure

Folio/
├── src/ # Vue frontend
│ ├── components/ # Views and shared components
│ ├── store.js # Shared reactive state + API calls
│ ├── router.js # Vue Router routes
│ └── App.vue # Root component
└── server/ # Express backend
├── models/ # Mongoose schemas (Curriculum, BacklogItem)
├── routes/ # REST API routes
└── server.js # Express app entry point

Running locally

Backend

cd server
npm install
npm run dev

Frontend

npm install
npm run dev

Requires a .env file inside server/ with:

MONGO_URI=your-mongodb-atlas-connection-string
PORT=3000