Research Paper Tracker

A modern, production-grade Research Paper Management SaaS

Track · Organize · Analyze · Improve Research Productivity

🚀 Live Demo  ·  🎨 Frontend Docs  ·  ⚙️ Backend Docs  ·  🐛 Report Bug  ·  💡 Request Feature

---

📋 Table of Contents

• Project Overview
• Live Architecture
• Module Documentation
  • 🎨 Frontend
  • ⚙️ Backend
• Full Project Structure
• Tech Stack
• Core Features
• Database Schema
• Quick Start
• Authentication Flow
• Screenshots
• Deployment
• Recruiter Summary
• Author
• Contributing
• License

---

📌 Project Overview

Research Paper Tracker is a full-stack SaaS application built for researchers, academics, and students who want a smart, centralized place to manage their reading library. It connects a polished React frontend to a secure Express REST API backed by PostgreSQL — following industry-level architecture, security, and scalability standards throughout.

Users can sign up, securely manage their own private research library, track reading progress, attach personal notes to papers, and visualize their progress through an analytics dashboard.

---

🌐 Live Architecture

┌─────────────────────────────────────────┐
│         Frontend — React + Vite         │
│  React · TypeScript · TailwindCSS       │
│         http://localhost:5173           │
└──────────────────┬──────────────────────┘
                   │
              HTTP / REST API
              (Axios + JWT Cookie)
                   │
┌──────────────────▼──────────────────────┐
│      Backend — Express + TypeScript     │
│   Node.js · Express · Prisma · JWT      │
│         http://localhost:5000           │
└──────────────────┬──────────────────────┘
                   │
              Prisma ORM
                   │
┌──────────────────▼──────────────────────┐
│         Database — PostgreSQL           │
│      Users · Papers · Relations         │
└─────────────────────────────────────────┘

---

📦 Module Documentation

This monorepo contains two fully independent, self-documented modules. Click below to jump directly into each module's detailed README:

Module	Description	README Link
🎨 Frontend	React SaaS Dashboard — UI, routing, auth, analytics	→ Open Frontend README
⚙️ Backend	Express REST API — auth, CRUD, database, security	→ Open Backend README

---

🎨 Frontend

📁 Location: /frontend  ·  📖 Full Docs: frontend/README.md

A modern, responsive SaaS dashboard built with React and TypeScript. Communicates with the backend API via Axios and manages global auth state via React Context.

Highlights:

• Authentication UI (Login / Signup)
• Protected dashboard with paper management
• Analytics charts via Recharts
• Fully responsive — mobile, tablet, desktop
• Smooth animations and clean SaaS design language

Core tech: React · TypeScript · Vite · TailwindCSS · shadcn/ui · Axios · React Router · Recharts · React Hook Form · Zod · Sonner

---

⚙️ Backend

📁 Location: /backend  ·  📖 Full Docs: backend/README.md

A secure, scalable REST API built with Node.js, Express, and TypeScript. Uses Prisma ORM to interact with PostgreSQL and enforces strict per-user data isolation throughout.

Highlights:

• JWT authentication via HTTP-only cookies (XSS safe)
• Full paper CRUD with user-scoped data isolation
• Analytics aggregation endpoint
• bcrypt password hashing
• Clean Controller → Service → Prisma layered architecture

Core tech: Node.js · Express · TypeScript · PostgreSQL · Prisma · JWT · bcrypt · cookie-parser · dotenv · CORS · Nodemon

---

📁 Full Project Structure

research-paper-tracker/
│
├── frontend/                      # React SaaS Frontend
│   ├── src/
│   │   ├── components/            # Reusable UI components
│   │   ├── pages/                 # Route-level page components
│   │   ├── services/              # Axios API layer
│   │   ├── context/               # Auth context provider
│   │   ├── hooks/                 # Custom React hooks
│   │   ├── types/                 # TypeScript interfaces
│   │   └── utils/                 # Helper utilities
│   ├── public/
│   ├── .env                       # VITE_API_BASE_URL
│   ├── package.json
│   ├── tailwind.config.js
│   ├── vite.config.ts
│   └── README.md                  # → Frontend documentation
│
├── backend/                       # Express REST API Backend
│   ├── prisma/
│   │   ├── schema.prisma          # DB models & relations
│   │   └── migrations/
│   ├── src/
│   │   ├── controllers/           # Request handlers
│   │   ├── routes/                # API route definitions
│   │   ├── middleware/            # Auth guard, error handler
│   │   ├── services/              # Business logic
│   │   ├── utils/                 # JWT & bcrypt helpers
│   │   ├── config/                # Prisma client, env config
│   │   ├── types/                 # Shared TypeScript types
│   │   └── server.ts              # Entry point
│   ├── .env                       # DB URL, JWT secret, port
│   ├── package.json
│   ├── tsconfig.json
│   └── README.md                  # → Backend documentation
│
├── screenshots/                   # App screenshots
└── README.md                      # ← You are here

---

🛠 Tech Stack

🎨 Frontend

Technology	Purpose	Repository
	UI Framework	github.com/facebook/react
	Type Safety	github.com/microsoft/TypeScript
	Build Tool	github.com/vitejs/vite
	Styling	github.com/tailwindlabs/tailwindcss
	Component Library	github.com/shadcn-ui/ui
	HTTP Client	github.com/axios/axios
	Routing	github.com/remix-run/react-router
	Analytics Charts	github.com/recharts/recharts
	Form Handling	github.com/react-hook-form/react-hook-form
	Schema Validation	github.com/colinhacks/zod
	Notifications	github.com/emilkowalski/sonner
	Icons	github.com/lucide-icons/lucide

⚙️ Backend

Technology	Purpose	Repository
	Runtime	github.com/nodejs/node
	Backend Framework	github.com/expressjs/express
	Type Safety	github.com/microsoft/TypeScript
	Relational Database	github.com/postgres/postgres
	ORM	github.com/prisma/prisma
	Auth Tokens	github.com/auth0/node-jsonwebtoken
	Password Hashing	github.com/kelektiv/node.bcrypt.js
	Environment Config	github.com/motdotla/dotenv
	Cross-Origin Security	github.com/expressjs/cors
	Dev Auto-Reload	github.com/remy/nodemon

---

✅ Core Features

Feature	Description
🔐 Secure Authentication	JWT via HTTP-only cookies, bcrypt password hashing
📄 Paper Management	Add, edit, delete, and organize research papers
📊 Analytics Dashboard	Visual progress tracking with interactive charts
🎨 Modern SaaS UI	Responsive, animated, mobile-first design
🏗️ REST API Architecture	Clean Controller → Service → Prisma layering
👤 User Data Isolation	Every query is strictly scoped to the authenticated user

---

🧱 Database Schema

┌─────────────┐          ┌──────────────────┐
│    User     │          │      Paper       │
├─────────────┤          ├──────────────────┤
│ id (uuid)   │──────────│ id (uuid)        │
│ name        │  1 : N   │ title            │
│ email       │          │ authors          │
│ password    │          │ url              │
│ createdAt   │          │ status           │
└─────────────┘          │ notes            │
                         │ progress         │
                         │ userId (FK)      │
                         │ createdAt        │
                         └──────────────────┘

One User can have many Papers — all data is fully isolated per account.

---

🚀 Quick Start

Prerequisites

• Node.js v18+
• PostgreSQL v14+
• npm

1. Clone the repository

git clone https://github.com/sankha1545/research-paper-tracker.git
cd research-paper-tracker

2. Start the Backend

cd backend
npm install

Create backend/.env:

PORT=5000
NODE_ENV="development"
DATABASE_URL="postgresql://postgres:password@localhost:5432/research_tracker"
JWT_SECRET="your_super_secret_key"
CLIENT_URL="http://localhost:5173"

npx prisma generate
npx prisma migrate dev --name init
npm run dev

✅ Backend running at http://localhost:5000

3. Start the Frontend

Open a new terminal:

cd frontend
npm install

Create frontend/.env:

VITE_API_BASE_URL=http://localhost:5000/api

npm run dev

✅ Frontend running at http://localhost:5173

---

🔐 Authentication Flow

User submits Login / Register form
              │
              ▼
   Backend validates credentials
              │
              ▼
  bcrypt verifies hashed password
              │
              ▼
    JWT token generated & signed
              │
              ▼
  Token stored in HTTP-only cookie
    (invisible to JavaScript → XSS safe)
              │
              ▼
  Protected API routes now accessible
              │
              ▼
   Dashboard loads user's papers

---

📸 Screenshots

Dashboard	Paper Management	Analytics

📁 Add your screenshots to the /screenshots directory.

---

🚀 Deployment

Layer	Recommended Platforms
🎨 Frontend	Vercel · Netlify
⚙️ Backend	Railway · Render · AWS EC2
🗄️ Database	Supabase · Neon · AWS RDS

---

🧑‍💼 Recruiter Summary

This project demonstrates a comprehensive full-stack engineering skillset:

Skill Area	What's Demonstrated
Frontend Engineering	React 18, TypeScript, component architecture, state management, responsive design
Backend Engineering	REST API design, layered architecture, middleware patterns, error handling
Database Design	Relational schema, Prisma ORM, migrations, data integrity
Authentication & Security	JWT, HTTP-only cookies, bcrypt, CORS, per-user data isolation
Production Practices	Environment config, clean project structure, scalable codebase layout
Developer Experience	TypeScript across the full stack, consistent code organization, documented API

---

🤝 Contributing

Contributions are always welcome!

1. Fork the repository
2. Create your feature branch: git checkout -b feature/AmazingFeature
3. Commit your changes: git commit -m 'Add AmazingFeature'
4. Push to your branch: git push origin feature/AmazingFeature
5. Open a Pull Request

---

🧑‍💻 Author

Sankha Subhra Das — Full Stack Developer

---

📜 License

Distributed under the MIT License. See LICENSE for full details.

---

If this project helped you or impressed you, please consider giving it a ⭐

Made with ❤️ by Sankha Subhra Das

🎨 Frontend README  ·  ⚙️ Backend README  ·  🔝 Back to Top