Skip to content

CLIENT_BACKEND_INTEGRATION.md

Latest commit

 

History

History
230 lines (182 loc) · 6.83 KB

CLIENT_BACKEND_INTEGRATION.md

File metadata and controls

230 lines (182 loc) · 6.83 KB

Client-Backend Integration Summary

This document summarizes the complete integration between the client and backend APIs.

What Was Implemented

Backend APIs Added

  1. Extended User Controllers (userControllers.extended.ts)

    • Complete profile retrieval with related data
    • Project CRUD operations
    • Experience CRUD operations
    • Achievement CRUD operations
    • Certification CRUD operations
    • Profile Links CRUD operations

  2. File Upload System (uploadRoutes.ts)

    • Single file upload endpoint
    • Multiple file upload endpoint
    • File deletion endpoint
    • Support for images, PDFs, and Word documents
    • 10MB file size limit

  3. Enhanced Routes (userRoutes.ts)

    • Added routes for all new CRUD operations
    • Proper authentication and validation
    • Rate limiting applied

Client-Side Integration

  1. Comprehensive API Hook (use-user-api.ts)

    • All backend API endpoints wrapped in React hooks
    • Proper error handling and loading states
    • Token-based authentication
    • File upload functionality

  2. Enhanced Profile Hook (use-profile.ts)

    • Backend integration for all profile operations
    • Fallback to mock data when backend unavailable
    • Real-time synchronization with backend
    • Optimistic updates with error recovery

  3. Authentication System (use-auth.tsx)

    • Complete auth context with backend integration
    • Token management and persistence
    • Profile completion workflow
    • Session management

  4. Client API Routes (Next.js API routes)

    • /api/user/profile/[userId]/complete - Get complete profile
    • /api/user/profile/[userId]/projects - Project operations
    • /api/user/projects/[projectId] - Individual project operations
    • Updated environment variable usage

Database Models Enhanced

  • User Model: Contains references to all related entities
  • Project Model: Linked to users with ownership
  • Experience Model: Professional experience tracking
  • Achievement Model: Achievement and award tracking
  • Certificate Model: Certification management
  • ProfileLink Model: Social/professional links

Dependencies Added

  • Server: multer for file uploads with TypeScript types
  • Client: Enhanced hooks and providers

API Endpoints Available

Authentication

  • POST /api/user/login - User login
  • GET /api/user/verify-token - Token verification
  • POST /api/user/complete-profile - Complete user profile

Profile Management

  • GET /api/user/profile/:userId - Get basic profile
  • GET /api/user/profile/:userId/complete - Get complete profile with relations
  • PUT /api/user/profile/:userId - Update profile

Projects

  • POST /api/user/profile/:userId/projects - Create project
  • GET /api/user/profile/:userId/projects - Get user projects
  • PUT /api/user/projects/:projectId - Update project
  • DELETE /api/user/projects/:projectId - Delete project

Experiences

  • POST /api/user/profile/:userId/experiences - Create experience
  • GET /api/user/profile/:userId/experiences - Get user experiences
  • PUT /api/user/experiences/:experienceId - Update experience
  • DELETE /api/user/experiences/:experienceId - Delete experience

Achievements

  • POST /api/user/profile/:userId/achievements - Create achievement
  • GET /api/user/profile/:userId/achievements - Get user achievements
  • PUT /api/user/achievements/:achievementId - Update achievement
  • DELETE /api/user/achievements/:achievementId - Delete achievement

Certifications

  • POST /api/user/profile/:userId/certifications - Create certification
  • GET /api/user/profile/:userId/certifications - Get user certifications
  • PUT /api/user/certifications/:certificationId - Update certification
  • DELETE /api/user/certifications/:certificationId - Delete certification

Profile Links

  • POST /api/user/profile/:userId/profile-links - Create profile link
  • GET /api/user/profile/:userId/profile-links - Get user profile links
  • PUT /api/user/profile-links/:profileLinkId - Update profile link
  • DELETE /api/user/profile-links/:profileLinkId - Delete profile link

File Upload

  • POST /api/upload/single - Upload single file
  • POST /api/upload/multiple - Upload multiple files
  • DELETE /api/upload/:filename - Delete file

Admin APIs (Already existing)

  • POST /api/admin/login - Admin login
  • POST /api/admin/create-user - Create user
  • POST /api/admin/create-bulk-users - Create multiple users
  • GET /api/admin/users - Get all users
  • POST /api/admin/resend-verification/:userId - Resend verification email
  • DELETE /api/admin/user/:userId - Delete user

Environment Variables

Client (.env)

NEXT_API_PUBLIC_URL='http://localhost:5000'
NEXT_PUBLIC_API_URL='http://localhost:5000/api'

Server (.env)

JWT_SECRET=your_jwt_secret
DB_CONNECTION_STRING=your_mongodb_connection
PORT=5000

Installation Steps

Backend Setup

  1. Install new dependencies:

    cd server
npm install multer
npm install --save-dev @types/multer

  2. Start the server:

    npm run dev

Client Setup

  1. The client hooks are ready to use
  2. Start the client: 
    cd client
npm run dev

Usage Examples

In React Components

import { useProfile } from '@/hooks/use-profile';
import { useAuth } from '@/hooks/use-auth';

function ProfileComponent() {
  const { user } = useAuth();
  const { 
    projects, 
    addProject, 
    updateProject, 
    deleteProject,
    uploadFile,
    isLoading 
  } = useProfile(user?.id);

  const handleAddProject = async (projectData) => {
    await addProject(projectData);
  };

  const handleFileUpload = async (file) => {
    const uploadResult = await uploadFile(file);
    console.log('File uploaded:', uploadResult.url);
  };

  // Component JSX...
}

Direct API Usage

import { useUserAPI } from '@/hooks/use-user-api';

function SomeComponent() {
  const userAPI = useUserAPI();

  const handleOperation = async () => {
    try {
      const projects = await userAPI.getUserProjects(userId);
      const newProject = await userAPI.createProject(userId, projectData);
      const uploadResult = await userAPI.uploadFile(file);
    } catch (error) {
      console.error('API Error:', error);
    }
  };
}

Security Features

  • JWT token authentication for all protected routes
  • File upload restrictions (type and size)
  • Rate limiting on API endpoints
  • Request validation using Joi schemas
  • Proper error handling and logging

Notes

  • All client hooks provide fallback to mock data when backend is unavailable
  • File uploads are stored in the server's uploads directory
  • Complete profile endpoint populates all related data in a single request
  • All CRUD operations maintain referential integrity in the database
  • Authentication state is persisted in localStorage

The integration is now complete and ready for production use!