improving loading response of free tier backend

Author: andrenormanlang

apps/api/package.json

@@ -39,16 +39,19 @@
     "@nestjs/typeorm": "^10.0.2",
     "@nestjs/websockets": "^10.4.6",
     "@sendgrid/mail": "^8.1.3",
+    "@types/compression": "^1.7.5",
     "bcrypt": "^5.1.1",
     "body-parser": "^1.20.3",
     "cache-manager": "^5.7.6",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",
     "cloudinary": "^1.41.3",
+    "compression": "^1.8.0",
     "dotenv": "^16.4.5",
     "firebase": "^11.5.0",
     "lodash": "^4.17.21",
     "multer-storage-cloudinary": "^4.0.0",
+    "node-cache": "^5.1.2",
     "nodemailer": "^6.9.15",
     "passport": "^0.7.0",
     "passport-jwt": "^4.0.1",

apps/api/src/app.controller.ts

@@ -9,4 +9,9 @@ export class AppController {
   getHello(): string {
     return this.appService.getHello();
   }
+
+  @Get('keep-alive')
+  keepAlive(): string {
+    return 'OK';
+  }
 }

apps/api/src/app.module.ts

@@ -9,13 +9,14 @@ import { AppService } from './app.service';
 import { SkillsModule } from './skills/skills.module';
 import { CacheModule } from '@nestjs/cache-manager';
 import { ThrottlerModule, ThrottlerGuard } from '@nestjs/throttler';
-import { APP_GUARD } from '@nestjs/core';
+import { APP_GUARD, APP_INTERCEPTOR } from '@nestjs/core';
 import { SendGridModule } from './sendgrid/sendgrid.module';
 import { ChatGateway } from './chat/chat.gateway';
 import { ChatModule } from './chat/chat.module';
 import { RoomsModule } from './chat/rooms.module';
 import { FirebaseModule } from './firebase/firebase.module';
 import firebaseConfig from './config/firebase.config';
+import { HttpCacheInterceptor } from './common/interceptors/cache.interceptor';
 
 @Module({
   imports: [
@@ -56,6 +57,10 @@ import firebaseConfig from './config/firebase.config';
       provide: APP_GUARD,
       useClass: ThrottlerGuard, // Apply throttling globally
     },
+    {
+      provide: APP_INTERCEPTOR,
+      useClass: HttpCacheInterceptor,
+    },
   ],
 })
 export class AppModule {}

apps/api/src/chat/chat.service.ts

@@ -8,9 +8,12 @@ import { Equal, FindOptionsWhere, Repository } from 'typeorm';
 import { User } from '../users/entities/user.entity';
 import { ChatMessage } from './entities/chat-message.entity';
 import { Room } from './entities/room.entity';
+import * as NodeCache from 'node-cache';
 
 @Injectable()
 export class ChatService {
+  private cache: NodeCache;
+
   constructor(
     @InjectRepository(ChatMessage)
     private chatRepository: Repository<ChatMessage>,
@@ -20,13 +23,23 @@ export class ChatService {
 
     @InjectRepository(Room)
     private roomRepository: Repository<Room>
-  ) {}
+  ) {
+    // Initialize cache with 5 minute TTL
+    this.cache = new NodeCache({ stdTTL: 300 });
+  }
 
   async getUserById(id: string): Promise<User> {
+    // Try to get from cache first
+    const cachedUser = this.cache.get<User>(`user:${id}`);
+    if (cachedUser) return cachedUser;
+
     const user = await this.userRepository.findOne({ where: { id } });
     if (!user) {
       throw new NotFoundException(`User with ID ${id} not found`);
     }
+
+    // Store in cache
+    this.cache.set(`user:${id}`, user);
     return user;
   }
 
@@ -134,12 +147,20 @@ export class ChatService {
   }
 
   async findRoomBetweenUsers(user1: User, user2: User): Promise<Room | null> {
+    const cacheKey = `room:${user1.id}:${user2.id}`;
+    const cachedRoom = this.cache.get<Room>(cacheKey);
+    if (cachedRoom) return cachedRoom;
+
     const room = await this.roomRepository.findOne({
       where: [
         { employer: Equal(user1.id), freelancer: Equal(user2.id) },
         { employer: Equal(user2.id), freelancer: Equal(user1.id) },
       ],
     });
+
+    if (room) {
+      this.cache.set(cacheKey, room);
+    }
     return room || null;
   }
 

apps/api/src/common/interceptors/cache.interceptor.ts

@@ -0,0 +1,35 @@
+import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
+import { Observable, of } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import * as NodeCache from 'node-cache';
+
+@Injectable()
+export class HttpCacheInterceptor implements NestInterceptor {
+  private cache: NodeCache;
+
+  constructor() {
+    // Cache with 5 minute TTL
+    this.cache = new NodeCache({ stdTTL: 300 });
+  }
+
+  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
+    const request = context.switchToHttp().getRequest();
+    const cacheKey = `${request.method}-${request.url}`;
+
+    // Check if we have a cached response
+    const cachedResponse = this.cache.get(cacheKey);
+    if (cachedResponse) {
+      return of(cachedResponse);
+    }
+
+    // If not cached, call handler and cache response
+    return next.handle().pipe(
+      tap(response => {
+        // Only cache GET requests
+        if (request.method === 'GET') {
+          this.cache.set(cacheKey, response);
+        }
+      }),
+    );
+  }
+}

apps/api/src/main.ts

@@ -3,12 +3,26 @@ import { AppModule } from './app.module';
 import { ValidationPipe, Logger } from '@nestjs/common';
 import * as bodyParser from 'body-parser';
 import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
+import * as compression from 'compression';
+import { Request, Response, NextFunction } from 'express';
 
 async function bootstrap() {
   const logger = new Logger('Bootstrap');
 
   const app = await NestFactory.create(AppModule);
 
+  // Enable compression
+  app.use(compression());
+
+  // Add cache-control headers for static assets
+  app.use((req: Request, res: Response, next: NextFunction) => {
+    const staticExtensions = ['.js', '.css', '.png', '.jpg', '.jpeg', '.gif', '.ico', '.svg'];
+    if (staticExtensions.some(ext => req.path.endsWith(ext))) {
+      res.set('Cache-Control', 'public, max-age=31536000'); // 1 year
+    }
+    next();
+  });
+
   // Set a global prefix for all routes
   app.setGlobalPrefix('api');
 

apps/client/src/App.tsx

@@ -1,7 +1,7 @@
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Navbar from "./components/NavBar";
 import Footer from "./components/Footer";
-import React, { Suspense } from "react";
+import React, { Suspense, useEffect } from "react";
 import LoadingSpinner from "./helpers/LoadingSpinner";
 import { UserProvider } from "./contexts/UserContext";
 import { GradientProvider } from "./contexts/GradientContext";
@@ -11,10 +11,20 @@ import ResetPasswordPage from "./pages/ResetPasswordPage";
 import EmailVerificationPage from "./pages/EmailVerificationPage";
 import { SocketProvider } from "./contexts/SocketContext";
 import { Provider as JotaiProvider } from "jotai";
+import { startKeepAlive, stopKeepAlive } from "./services/keepAlive";
 
 const HomePage = React.lazy(() => import("./pages/HomePage")); // Lazy load the HomePage
 
 function App() {
+  useEffect(() => {
+    // Start the keep-alive ping when the app loads
+    const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:3000';
+    startKeepAlive(apiUrl);
+
+    // Clean up when the app unmounts
+    return () => stopKeepAlive();
+  }, []);
+
   return (
     <>
       <Toaster />

apps/client/src/services/keepAlive.ts

@@ -0,0 +1,23 @@
+let keepAliveInterval: NodeJS.Timeout;
+
+export const startKeepAlive = (apiUrl: string) => {
+  // Clear any existing interval
+  if (keepAliveInterval) {
+    clearInterval(keepAliveInterval);
+  }
+
+  // Ping the server every 4 minutes
+  keepAliveInterval = setInterval(async () => {
+    try {
+      await fetch(`${apiUrl}/keep-alive`);
+    } catch (error) {
+      console.error('Keep-alive ping failed:', error);
+    }
+  }, 240000); // 4 minutes
+};
+
+export const stopKeepAlive = () => {
+  if (keepAliveInterval) {
+    clearInterval(keepAliveInterval);
+  }
+};