ResourceHub 📚

Never lose your precious resources again! A centralized resource link management platform that helps you organize, secure, and share your valuable links and knowledge with ease.

🌟 Features

🔐 Smart Resource Management

Fast Create Flow: Add a resource with only a name and link; ownership comes from auth
Private by Default: New resources are always created as private
Edit Enrichment: Add description, tags, visibility, and update the URL on the edit page
Intelligent Tagging: Organize resources with custom tags and predefined suggestions (on edit)
Advanced Search: Find resources by name, description, or tags instantly
Category Filtering: Browse resources by categories with visual icons
Resource Editing: Full edit form prefilled with existing resource values

🎨 Modern User Experience

Responsive Design: Beautiful, mobile-first interface with Tailwind CSS v4
Live Preview: See how your resource will look while creating it
Dual View Modes: Switch between grid and list views
Smooth Animations: Engaging micro-interactions and transitions
Loading States: Elegant loading screens and progress indicators
Toast Notifications: Beautiful, non-intrusive user feedback

🔒 Secure Authentication

Google OAuth Integration: Seamless login with your Google account
Protected Routes: Secure access to private features with custom HOC
Session Management: Cookie-based persistent authentication across browser sessions
User Profile Management: Display user information and avatars

🌐 Community Features

Public Resource Discovery: Browse amazing resources shared by the community
Resource Sharing: Make your resources public to help others learn
Public Collections: Explore and share curated, ordered resource lists
Collection Workflows: Optional per-item status labels (e.g. todo, done) on collections
User Profiles: Track resource ownership and contributions via collection URLs (/collections/:username/:slug)

📱 Progressive Web App

Installable: Add ResourceHub to your home screen (Android/desktop; iOS via Share → Add to Home Screen)
Offline shell: Service worker caches static assets; dedicated /offline fallback page
Offline-aware writes: Mutations blocked with a clear toast when the network is unavailable
Install prompt: In-app prompt for supported browsers

⚡ Performance & Development

Code Splitting: Lazy loading of components for optimal performance
React Query: Server-state caching for collections and documents
Hot Module Replacement: Fast development with Vite HMR
ESLint Integration: Code quality assurance and formatting
Docker Support: Containerized deployment ready

🚀 Quick Start

Prerequisites

Node.js 18.0 or higher (Docker image uses Node 24)
npm or yarn package manager
Backend API server running (see resourceManager-backend)
Auth service for Google OAuth (VITE_AUTH_URL — external to this repo)
Docker (optional, for containerized deployment)

Installation

Clone the repository

git clone https://github.com/lakshay2425/resourceManager-frontend
cd resourceManager-frontend

Install dependencies
```
npm install
# or
yarn install
```
Set up environment variables

Create a .env file in the root directory (not committed — see .gitignore):
```
VITE_BACKEND_URL=http://localhost:3000/api
VITE_AUTH_URL=http://localhost:5000/api
VITE_FRONTEND_URL=http://localhost:5173
VITE_GOOGLE_CLIENT_ID=your_google_oauth_client_id.apps.googleusercontent.com
VITE_DEV_MODE=true
```
There is no Vite dev proxy — the app calls these absolute URLs directly, so the backend must be reachable at VITE_BACKEND_URL.
Start the development server
```
npm run dev
# or
yarn dev
```
Open your browser Navigate to http://localhost:5173 to see the application.

🐳 Docker Deployment

ResourceHub comes with a complete Docker setup for easy deployment:

Build Docker Image

# Build the Docker image
docker build -f Docker/Dockerfile -t resourcehub-frontend .

Run with Docker

# Run the container
docker run -p 3000:3000 resourcehub-frontend

Multi-stage Build

The Dockerfile uses a multi-stage build process:

Builder Stage: Installs dependencies and builds the application
Production Stage: Creates a lightweight production container with serve

Docker Configuration

Base Image: Node.js 24 Alpine (lightweight)
Security: Runs as non-root user
Port: Exposes port 3000
Serve: Uses serve package to serve static files

🏗️ Tech Stack

Frontend Framework

React 19.1: Latest React with hooks and concurrent features
Vite 7.0: Lightning-fast build tool and development server
React Router DOM v7: Client-side routing and navigation

Styling & UI

Tailwind CSS v4: Latest utility-first CSS framework with new features
Lucide React: Beautiful, customizable SVG icons
Custom Animations: Smooth transitions and micro-interactions
Glassmorphism Design: Modern aesthetic with backdrop blur effects

State Management

React Context API: Global state for authentication, loading, and online status
TanStack React Query: Server state for collections and documents
React Hook Form: Efficient form handling and validation
Custom Hooks: OAuth, local storage, navigation, loading, SEO, offline guard, collections

Authentication & API

Google OAuth (@react-oauth/google): Secure authentication flow
Axios: HTTP client for API requests with interceptors
Protected Routes: Route-level security implementation
Cookie-based Sessions: Persistent authentication

Developer Experience

React Hot Toast: Beautiful toast notifications
ESLint v9: Latest code linting and formatting
Lazy Loading: Code-splitting with offline chunk fallback
Suspense: React Suspense for loading states
vite-plugin-pwa: Service worker and web app manifest

📁 Project Structure

src/
├── api/                    # API client modules
│   ├── collectionsApi.js   # Collections CRUD and item mutations
│   ├── documentApi.js      # Document / MinIO upload APIs
│   └── usersApi.js         # User profile helpers
├── components/             # Reusable UI components
│   ├── collections/        # Collection cards, modals, item rows
│   ├── HomePage/           # Landing page sections
│   ├── BookmarkCard.jsx
│   ├── Footer.jsx
│   ├── InstallPrompt.jsx   # PWA install prompt
│   ├── LoadingBar.jsx
│   ├── LoadingScreen.jsx
│   ├── Navbar.jsx
│   ├── OfflineBanner.jsx
│   ├── ResourceCard.jsx
│   └── RouteErrorBoundary.jsx
├── context/
│   ├── AuthContext.jsx
│   ├── LoadingContext.jsx
│   └── OnlineStatusContext.jsx
├── hooks/
│   ├── useCollections.js   # React Query hooks for collections
│   ├── useDocuments.js
│   ├── useGoogleOAuth.js
│   ├── useLocalStorage.js
│   ├── useLoading.js
│   ├── useNavigation.js
│   ├── useOfflineGuard.js
│   └── usePageSeo.js       # Per-route SEO meta tags
├── pages/
│   ├── Home.jsx
│   ├── Resources.jsx
│   ├── publicResources.jsx
│   ├── CreateResource.jsx
│   ├── EditResource.jsx
│   ├── BookmarkResources.jsx
│   ├── DocumentManagement.jsx
│   ├── MyCollections.jsx
│   ├── PublicCollections.jsx
│   ├── CreateCollection.jsx
│   ├── CollectionDetail.jsx
│   ├── Offline.jsx
│   └── NotFound.jsx
├── utilis/
│   ├── Axios.jsx           # Axios instance + offline write guard
│   ├── seo.js              # Meta tags, JSON-LD, canonical URLs
│   ├── collectionErrors.js # Collection API error messages
│   ├── resourceErrors.js   # Duplicate resource (409) helpers
│   ├── networkStatus.js
│   ├── idempotency.js
│   ├── lazyWithOfflineFallback.js
│   └── renderProtectedRoute.jsx
├── App.jsx
├── main.jsx
└── index.css

public/
├── resourceManagerLogo.png
├── health                  # Docker / load-balancer health check (JSON)
├── llm.txt                 # LLM / AI crawler site summary
├── robots.txt              # Search engine crawl rules
├── sitemap.xml             # Static public URL sitemap
└── offline.html            # PWA offline fallback

Docker/
└── Dockerfile

🛠️ Key Components

AuthContext

Manages global authentication state and user session with cookie verification:

const { isAuthenticated, gmail, setIsAuthenticated, isLoading } = useContext(AuthContext);

LoadingContext

Manages application loading states:

const { isLoading, setIsLoading } = useContext(LoadingContext);

Protected Routes

Secure routes that require authentication with custom protection logic:

<Route
  path="/resources"
  element={
    <RenderProtectedRoute
      condition={isAuthenticated === true}
      renderPage={<Resources />}
      fallback="/"
      errorMessage="You need to login to access this page"
    />
  }
/>

Resource Management

Create and edit use separate page components (not one shared form):

Page	Route	Component	Fields
Create	`/createResource`	`CreateResource.jsx`	`name`, `link` only
Edit	`/edit/:id`	`EditResource.jsx`	name, description, tags, status, `sourceLink` (prefilled)

Create: POST /resources with { name, link } — no email in body (owner from auth cookie); server always creates as private
Edit: PATCH /resources/:id with { updatedFields: { ... } } — use sourceLink (not link) for URL updates
Delete resources with confirmation modals
Filter and search (handles missing description / empty tags)
Tag-based organization on the edit flow

Create vs Edit API shapes

// CREATE — CreateResource.jsx
// POST /api/resources
{ name: string /* min 5 */, link: string /* valid URL → stored as sourceLink */ }

// UPDATE — EditResource.jsx
// PATCH /api/resources/:id
{
  updatedFields: {
    name?: string,          // min 5
    description?: string,   // min 10 when present
    tags?: string[],
    status?: "public" | "private",
    sourceLink?: string     // valid URL
  }
}

Field name trap: create uses link; GET responses and PATCH use sourceLink.

Duplicate resource handling (HTTP 409)

The backend rejects duplicate resources for the same user with the same name + URL. Affected flows:

Flow	Endpoint	UX on 409
Create	`POST /resources`	Inline banner on form; no error toast
Edit	`PATCH /resources/:id`	Inline banner; loading toast dismissed
Collection create-and-add	`POST .../items/create-and-add`	Inline banner in modal

Shared helpers live in src/utilis/resourceErrors.js. Other error statuses keep existing toast/inline behavior.

Routes overview

Route	Auth	Description
`/`	Public	Landing page
`/publicResources`	Public	Community resources
`/collections/public`	Public	Browse public collections
`/collections/:username/:slug`	Public*	Collection detail (*private collections get `noindex`)
`/resources`	Required	My resources
`/createResource`	Required	Create resource (name + link)
`/edit/:id`	Required	Edit resource
`/bookmarks`	Required	Saved bookmarks
`/documents`	Required	Document management
`/collections`	Required	My collections
`/collections/new`	Required	Create collection
`/offline`	Public	PWA offline fallback

Google OAuth Integration

Seamless authentication flow with error handling:

const { handleGoogleLogin } = useGoogleAuth();

🎨 Styling Philosophy

ResourceHub uses a modern, glassmorphism-inspired design with:

Color Palette: Purple and blue gradients with clean whites and glass effects
Typography: Bold headings with readable body text using system fonts
Spacing: Generous whitespace and consistent padding following 8px grid
Animations: Subtle hover effects, smooth transitions, and micro-interactions
Responsive: Mobile-first design with breakpoint optimization
Accessibility: Focus states and keyboard navigation support

🔍 SEO & Discoverability

ResourceHub ships with first-class SEO for public pages and blocks indexing of authenticated areas.

Public indexable routes

Route	Page	Meta tags
`/`	Landing	Title, description, Open Graph, Twitter Card, WebSite JSON-LD
`/publicResources`	Community resources	Per-page title & description
`/collections/public`	Public collections browse	Per-page title & description
`/collections/:username/:slug`	Public collection detail	Dynamic title, description, CollectionPage JSON-LD; `noindex` when private

Per-route metadata is applied at runtime via usePageSeo (src/hooks/usePageSeo.js) and src/utilis/seo.js.

Set VITE_FRONTEND_URL in .env so runtime canonical URLs, Open Graph links, and JSON-LD match your deployment domain. Static files in public/ (sitemap.xml, robots.txt, llm.txt) ship with the production domain https://resources.lakshaymahajan.com — update them when deploying to a different hostname.

Static SEO files (`public/`)

File	URL	Purpose
`sitemap.xml`	`/sitemap.xml`	Static sitemap for public landing pages
`robots.txt`	`/robots.txt`	Crawl rules; links sitemap and `llm.txt`
`llm.txt`	`/llm.txt`	Machine-readable site summary for LLM crawlers (llmstxt.org)
`health`	`/health`	JSON health check for Docker / probes
`offline.html`	`/offline.html`	PWA offline fallback (precached by service worker)

Crawl rules (`robots.txt`)

Allowed: /, /publicResources, /collections/public, /collections/*/* (public collection detail)
Disallowed: /resources, /bookmarks, /createResource, /edit/, /documents, /collections/new, /collections (owner list), /offline
LLM crawlers: GPTBot, ChatGPT-User, and Claude-Web may read /llm.txt and public indexable routes
Sitemap: declared at bottom of robots.txt

Dynamic public collection URLs are discoverable via on-page links and client-side meta tags; add them to sitemap.xml manually or via a build-time script if you need full sitemap coverage.

Notes for SPAs

Search engines that execute JavaScript will read updated <title>, meta, and JSON-LD after navigation. The base tags in index.html provide a fallback for the home page before hydration.

🔧 Configuration

Environment Variables

Variable	Description	Example (local dev)
`VITE_BACKEND_URL`	Backend API base URL	`http://localhost:3000/api`
`VITE_AUTH_URL`	Authentication service URL	`http://localhost:5000/api`
`VITE_FRONTEND_URL`	Frontend URL (SEO, canonical)	`http://localhost:5173`
`VITE_GOOGLE_CLIENT_ID`	Google OAuth client ID	`your-client-id.apps.googleusercontent.com`
`VITE_DEV_MODE`	Development mode flag	`true`

Build Configuration

The project uses Vite with optimized settings for:

Fast HMR: Hot Module Replacement for instant updates
Code Splitting: Automatic chunking for optimal loading
Production Builds: Minification and optimization
Modern Syntax: ES2020+ with modern browser support
Tailwind Integration: Built-in Tailwind CSS plugin

ESLint Configuration

Modern ESLint: Uses flat config format
React Rules: React hooks and refresh plugins
Custom Rules: Unused vars handling with pattern matching
Browser Globals: Configured for browser environment

📱 Features in Detail

Resource Creation (`CreateResource.jsx`)

Dedicated create form — not the edit form reused with empty values:

Fields: Resource name + URL (link) only
Validation: Name ≥ 5 characters; link must be a valid URL
Privacy: Always created as private (no visibility picker on create)
Ownership: Taken from the auth cookie — do not send email in the body
Live Preview: Shows name/link preview marked as private
Success State: Navigate to My Resources or create another
Enrich later: Description, tags, and public/private are set on the edit page

Resource Editing (`EditResource.jsx`)

Separate full form, opened with existing resource values via router state:

Prefills name, description, tags, status, and sourceLink
Client validation aligned with backend PATCH rules
Maps the URL field to sourceLink in the PATCH body
Optional description (min 10 characters when provided)
Visibility toggle and tag management

Collections

My Collections (/collections): List and manage your collections
Create Collection (/collections/new): Name, slug, visibility, optional status labels
Public browse (/collections/public): Discover community collections
Collection detail (/collections/:username/:slug): Ordered items, drag reorder (owner), add existing or create-and-add resources
Idempotency: Collection mutations use idempotency keys to safely retry writes

Resource Discovery

Smart Search: Search across names, descriptions, and tags (safe when description/tags are missing)
Category Filtering: Filter by resource categories with visual indicators
Sorting Options: Sort by date, alphabetically, or relevance
View Modes: Toggle between grid and list views with animations
Empty-field resilience: Placeholders when description is missing; empty tags treated as []

User Experience

Responsive Design: Optimized for mobile, tablet, and desktop
Loading States: Skeleton screens and elegant loading animations
Error Handling: Friendly error messages with recovery options; duplicate resources (409) shown inline on forms
Toast Notifications: Non-intrusive feedback for success and non-form errors
Keyboard Navigation: Full keyboard accessibility support

Performance Optimizations

Lazy Loading: Components loaded on demand
Image Optimization: Optimized images and lazy loading
Bundle Splitting: Automatic code splitting by routes
Caching: HTTP caching for API requests

🚀 Deployment Options

Build for Production

npm run build
# or
yarn build

Preview Production Build

npm run preview
# or
yarn preview

Deploy to Vercel

npm install -g vercel
vercel --prod

Deploy to Netlify

npm install -g netlify-cli
npm run build
netlify deploy --prod --dir=dist

Docker Deployment

# Build and run with Docker
docker build -f Docker/Dockerfile -t resourcehub-frontend .
docker run -p 3000:3000 resourcehub-frontend

Production Environment Setup

For production deployment, ensure:

Environment Variables: Set all required production URLs
SSL/HTTPS: Configure HTTPS for secure authentication
CORS: Configure backend CORS for your domain
OAuth: Update Google OAuth settings with production domains

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Guidelines

Follow the existing code style and conventions
Write meaningful commit messages following conventional commits
Test your changes thoroughly across different devices
Update documentation when needed
Run npm run lint before submitting (note: some pre-existing lint warnings may remain)

Code Style

Use functional components with hooks
Prefer named exports over default exports
Use descriptive variable and function names
Keep components small and focused
Extract reusable logic into custom hooks

📜 Available Scripts

Script	Description
`npm run dev`	Start development server
`npm run build`	Build for production
`npm run preview`	Preview production build
`npm run lint`	Run ESLint

🐛 Troubleshooting

Common Issues

OAuth not working:

Check if VITE_GOOGLE_CLIENT_ID is correctly set
Ensure OAuth is configured in Google Console with correct redirect URIs
The auth service at VITE_AUTH_URL is external to this repo — local login may not complete without it
Verify that you're using HTTPS in production
Check browser console for OAuth errors

API requests failing:

Verify backend server is running and accessible
Check if VITE_BACKEND_URL and VITE_AUTH_URL point to correct endpoints
Look for CORS errors in browser console
Ensure cookies are being sent with withCredentials: true

Build errors:

Clear node_modules and reinstall dependencies
Ensure all environment variables are set correctly
Check for any TypeScript errors if using TypeScript
Verify that all imports are correct

Docker issues:

Ensure Docker is running
Check if port 3000 is available
Verify the Dockerfile path is correct
Check Docker logs for specific error messages

Loading/Authentication issues:

Clear browser cookies and local storage
Check network requests for authentication endpoints
Verify backend authentication service is running
Ensure proper session cookie configuration

🔒 Security Features

Route Protection: HOC-based route protection
Session Validation: Server-side session verification
CSRF Protection: Cookie-based session security
Input Validation: Form validation on both client and server
Context Menu Disabled: Right-click and key shortcuts disabled in production

📊 Performance Metrics

Lighthouse Score: 90+ across all metrics
First Contentful Paint: < 1.5s
Time to Interactive: < 3s
Bundle Size: Optimized chunks under 500KB
Core Web Vitals: Meets Google's recommended thresholds

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with ❤️ for the developer community
Icons by Lucide
Styled with Tailwind CSS
Powered by React and Vite
Authentication via Google OAuth
Deployed with Docker

ResourceHub - Your centralized resource management platform! 🚀

For questions, support, or contributions, please:

📧 Email: lakshay12290@gmail.com
🐛 Issues: Open an issue on GitHub
💬 Discussion: Start a GitHub Discussion

Never lose your precious resources again!

Name		Name	Last commit message	Last commit date
Docker		Docker
public		public
src		src
.dockerignore		.dockerignore
.gitignore		.gitignore
AGENTS.md		AGENTS.md
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
offline.md		offline.md
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Latest commit

History

Folders and files

Repository files navigation