A full-stack bookmark manager for collecting articles, research papers, videos, tools, and ideas inside clean, searchable workspaces. Explore the interactive public demo before creating an account.

---

The Idea

Bookmarks should be useful, not forgotten in a crowded browser folder. Smart Bookmark turns saved links into an organized knowledge system where each workspace has a purpose and every resource can be found again.

Highlights

	Feature	What it does
01	Smart workspaces	Group bookmarks by project, topic, or goal.
02	Instant search	Search titles, URLs, and notes with paginated results.
03	Secure accounts	Register and sign in with JWT access and refresh tokens.
04	Bookmark context	Save a title, URL, and note so every link stays meaningful.
05	Private collections	Workspace access is validated against the authenticated user.
06	Clean dashboard	See workspaces and recent bookmarks in one focused view.
07	Public interactive demo	Preview the product, comparison flow, and sample workspaces without signing up.
08	Personal profiles	Add a profile picture and bio, then update the bio from the dashboard.

Tech Stack

Frontend                         Backend
|- React 19                      |- FastAPI
|- React Router                  |- SQLAlchemy
|- Axios                         |- PostgreSQL
|- React Icons                   |- Static file uploads
|- Vite                          |- Alembic migrations
`- CSS                           `- JWT authentication

Architecture

flowchart LR
    U[User] --> R[React + Vite]
    R -->|Axios / REST| F[FastAPI]
    F --> A[JWT Authentication]
    F --> W[Workspace Service]
    F --> B[Bookmark Service]
    A --> D[(PostgreSQL)]
    W --> D
    B --> D

Loading

Project Structure

smart_bookmark/
|- frontend/
|  |- public/
|  `- src/
|     |- api/
|     |- assets/
|     |- components/
|     |- styles/
|     `- pages/
|- backend/
|  |- alembic/
|  |- uploads/
|  `- app/
|     |- core/
|     |- db/
|     |- middleware/
|     |- models/
|     `- modules/
|        |- auth/
|        |- bookmarks/
|        `- workspaces/
`- README.md

Getting Started

Prerequisites

• Node.js 20 or newer
• Python 3.11 or newer
• PostgreSQL

1. Clone the repository

git clone https://github.com/gowthamchoudhary/smart_bookmark.git
cd smart_bookmark

2. Configure the backend

cd backend
python -m venv .venv

Activate the virtual environment:

# Windows PowerShell
.\.venv\Scripts\Activate.ps1

# macOS / Linux
source .venv/bin/activate

Install the dependencies:

pip install -r requirements.txt
pip install alembic

Create backend/.env:

DATABASE_URL=postgresql://postgres:password@localhost:5432/smart_bookmark
SECRET_KEY=replace-this-with-a-long-random-secret
ALGORITHM=HS256
ACCESS_TOKEN_EXPIRE_MINUTES=30
REFRESH_TOKEN_EXPIRE_DAYS=7
CORS_ORIGINS=http://localhost:5173,http://127.0.0.1:5173
DATABASE_SSLMODE=require

For deployment, set CORS_ORIGINS to the comma-separated frontend URLs that may call the API. PostgreSQL connections outside localhost use DATABASE_SSLMODE=require by default.

Run the migrations and API:

alembic upgrade head
uvicorn app.main:app --reload

The API runs at http://127.0.0.1:8000. Interactive documentation is available at http://127.0.0.1:8000/docs.

3. Start the frontend

Open another terminal:

cd frontend
npm install
npm run dev

The frontend uses http://127.0.0.1:8000 by default. To use another API URL, create frontend/.env:

VITE_API_URL=http://127.0.0.1:8000

Open http://localhost:5173 in your browser.

Application Routes

Route	Access	Purpose
/	Public	Animated landing page
/demo	Public	Interactive product demo and sample workspaces
/auth	Public	Registration and login
/dashboard	Protected	Workspace, bookmark, search, and profile management
/workspace/:workspaceId	Protected	Paginated bookmarks for one workspace

API Overview

Method	Endpoint	Purpose
POST	/auth/register	Create an account with an optional bio and profile picture
POST	/auth/login	Get access and refresh tokens
GET	/auth/me	Read the current user
PATCH	/auth/me/bio	Update the current user's bio
POST	/auth/refresh	Rotate authentication tokens
POST	/auth/logout	Revoke a refresh token
GET/POST	/workspace/	List or create workspaces
GET/PATCH/DELETE	/workspace/{id}	Manage a workspace
GET	/bookmarks/	List bookmarks owned by the current user
POST	/bookmarks/{workspace_id}	Add a bookmark
GET	/bookmarks/{workspace_id}/search	Search a workspace
GET	/bookmarks/{workspace_id}/paginated	Browse bookmarks
PATCH/DELETE	/bookmarks/{workspace_id}/{bookmark_id}	Update or remove a bookmark

Roadmap

• JWT authentication with refresh-token rotation
• Workspace management and ownership validation
• Bookmark creation, editing, deletion, search, and pagination
• Profile pictures and editable user bios
• Responsive landing page, public demo, and dashboard
• Dashboard workspace and bookmark API integration
• Favorites and tags
• Browser extension for one-click saving
• Rich link previews and automatic metadata
• Deployment and automated test coverage

Useful Commands

Run these commands from frontend/:

npm run dev      # Start the Vite development server
npm run build    # Create a production build
npm run lint     # Run ESLint
npm run preview  # Preview the production build

Contributing

Contributions are welcome. Fork the repository, create a focused branch, and open a pull request with a clear description of the change.

git checkout -b feature/your-feature
git commit -m "Add your feature"
git push origin feature/your-feature

Keep the useful parts of the internet close.

Back to top