🔖 Smart Marks (MERN Bookmark App)

A Premium, Real-time bookmark manager built with the MERN stack. Organize your digital life with a stunning glassmorphism UI and instant synchronization across devices.

✨ Key Features

• 🔐 Secure Authentication: Seamless sign-in with Google OAuth 2.0 via Passport.js.
• ⚡ Real-time Sync: Bookmarks update instantly across all tabs and devices using Socket.io.
• 🎨 Premium UI: A modern interface featuring Glassmorphism, animated mesh gradients, and smooth micro-interactions.
• 📱 Fully Responsive: Optimized grid layout that looks perfect on mobile, tablet, and desktop.
• 🔒 Privacy Focused: User-specific data isolation ensuring your bookmarks remain private.

---

🛠️ Technology Stack

• Frontend: React (Vite), Tailwind CSS, Framer Motion (Transitions), Socket.io Client
• Backend: Node.js, Express.js, Passport.js, Socket.io
• Database: MongoDB Atlas (Mongoose ODM)

---

🚀 Getting Started

Prerequisites

• Node.js (v14+)
• MongoDB Atlas Account
• Google Cloud Console Project (for OAuth)

1. clone the repository

git clone https://github.com/yourusername/smart-marks.git
cd smart-marks

2. Backend Setup

Navigate to the server directory and install dependencies:

cd server
npm install

Create a .env file in the server directory:

PORT=5000
MONGO_URI=your_mongodb_connection_string
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_CALLBACK_URL=http://localhost:5000/api/auth/google/callback
COOKIE_KEY=your_secret_cookie_key
CLIENT_URL=http://localhost:5173

3. Frontend Setup

Navigate to the client directory and install dependencies:

cd ../client
npm install

Create a .env file in the client directory:

VITE_API_URL=http://localhost:5000

4. Run the Application

Start the backend server:

# In server directory
npm start

Start the frontend development server:

# In client directory
npm run dev

Visit http://localhost:5173 in your browser!

---

📁 Project Structure

mern-bookmark-app/
├── client/                 # React Frontend
│   ├── src/
│   │   ├── components/     # UI Components (Dashboard, Login, etc.)
│   │   ├── context/        # React Context (Auth)
│   │   └── index.css       # Tailwind & Global Styles
│   └── ...
└── server/                 # Node.js Backend
    ├── config/             # Passport & DB Config
    ├── models/             # Mongoose Models (User, Bookmark)
    ├── routes/             # API Routes (Auth, Bookmarks)
    └── index.js            # Entry Point

---

🤝 Contributing

Contributions are welcome! Please fork the repository and submit a pull request for any enhancements.