How to create a full stack Chat App using Next js & Nest js?

Comprehensive Documentation for a Chat Application

Introduction

• Purpose: Outline the purpose of the document.
• Scope: Define the scope of the chat application.
• Technologies Used: List Next.js, NestJS, TailwindCSS, REST API, WebSocket, MongoDB.

Project Structure

• Frontend: Overview of the Next.js project structure.
• Backend: Overview of the NestJS project structure.
• Database: Structure of MongoDB collections (User, Chat, Message).

Sections and Functionality

1. User Authentication

• User Registration:

  • Endpoint: /auth/register
  • Method: POST
  • Payload: { "username": "string", "password": "string" }
  • Description: Registers a new user.

• User Login:

  • Endpoint: /auth/login
  • Method: POST
  • Payload: { "username": "string", "password": "string" }
  • Description: Authenticates a user and returns a JWT token.

• User Logout:

  • Description: Logout mechanism (typically handled on the client side by destroying the JWT token).

2. User Management

• Profile Management:

  • Endpoint: /users/me
  • Method: GET
  • Description: Fetches the logged-in user's profile.

• Update Profile:

  • Endpoint: /users/me
  • Method: PUT
  • Payload: { "username": "string", "password": "string" }
  • Description: Updates the logged-in user's profile information.

3. Chat Management

• Create Chat:

  • Endpoint: /chats
  • Method: POST
  • Payload: { "participants": ["userId1", "userId2"] }
  • Description: Creates a new chat session between users.

• Fetch Chats:

  • Endpoint: /chats
  • Method: GET
  • Description: Fetches all chat sessions for the logged-in user.

• Fetch Chat Details:

  • Endpoint: /chats/:chatId
  • Method: GET
  • Description: Fetches messages in a specific chat session.

4. Messaging

• Send Message:

  • Endpoint: /chats/:chatId/messages
  • Method: POST
  • Payload: { "content": "string" }
  • Description: Sends a new message in a chat session.

• Receive Messages:

  • Description: Real-time message receiving using WebSocket.
  • WebSocket Event: receiveMessage

5. Real-time Communication

• WebSocket Setup:

  • Description: Initializing WebSocket connection on the client-side and handling events.

• WebSocket Events:

  • sendMessage: Event to send a message.
  • receiveMessage: Event to receive messages.

6. User Interface

• Login Page:

  • Description: UI for user login.
  • Components: Form, Input Fields, Submit Button.

• Registration Page:

  • Description: UI for user registration.
  • Components: Form, Input Fields, Submit Button.

• Chat List Page:

  • Description: UI for displaying the list of chat sessions.
  • Components: List of Chats, Search Bar.

• Chat Window:

  • Description: UI for displaying chat messages and sending new messages.
  • Components: Message List, Input Field, Send Button.

7. Notifications

• Real-time Notifications:
  • Description: Display real-time notifications for new messages.

8. File Sharing

• Upload File:

  • Endpoint: /chats/:chatId/files
  • Method: POST
  • Payload: { "file": "file object" }
  • Description: Uploads a file to a chat session.

• Download File:

  • Endpoint: /chats/:chatId/files/:fileId
  • Method: GET
  • Description: Downloads a file from a chat session.

9. Settings

• User Settings:
  • Description: Page for user settings (e.g., notification preferences, account management).

10. Deployment

• Frontend Deployment:

  • Description: Steps to deploy the Next.js app using Vercel.

• Backend Deployment:

  • Description: Steps to deploy the NestJS app using Heroku, DigitalOcean, or AWS.

11. Security

• JWT Authentication:

  • Description: Implementing JWT for user authentication.

• Data Encryption:

  • Description: Encrypting sensitive data (e.g., passwords).

12. Testing

• Unit Testing:

  • Description: Writing unit tests for both frontend and backend.

• Integration Testing:

  • Description: Writing integration tests to test API endpoints.

13. Performance Optimization

• Frontend Optimization:

  • Description: Techniques for optimizing the Next.js application (e.g., code splitting, lazy loading).

• Backend Optimization:

  • Description: Techniques for optimizing the NestJS application (e.g., caching, database indexing).

14. Documentation

• API Documentation:

  • Description: Detailed documentation of all API endpoints using tools like Swagger.

• User Guide:

  • Description: Guide for end-users on how to use the chat application.

15. Future Enhancements

• Voice and Video Calls:

  • Description: Adding support for voice and video calls.

• Group Chats:

  • Description: Adding support for group chat functionality.

• Status Indicators:

  • Description: Adding online/offline status indicators for users.

This comprehensive breakdown covers the essential sections and functionalities needed to create a chat application similar to WhatsApp or Telegram using Next.js, NestJS, and TailwindCSS.

Creating a chat application like WhatsApp or Telegram involves a comprehensive set of features and technologies. Below is a detailed breakdown to help you get started with building a chat app using Next.js for the frontend, NestJS for the backend, TailwindCSS for styling, and REST APIs for communication.

1. Project Setup

Frontend (Next.js)

• Initialize Next.js:

  npx create-next-app@latest chat-app
  cd chat-app

• Install TailwindCSS:

  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init -p

• Configure TailwindCSS: Update tailwind.config.js and globals.css.

  // tailwind.config.js
  module.exports = {
    content: [
      "./pages/**/*.{js,ts,jsx,tsx}",
      "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  };

  /* globals.css */
  @tailwind base;
  @tailwind components;
  @tailwind utilities;

Backend (NestJS)

• Initialize NestJS:

  npm i -g @nestjs/cli
  nest new chat-backend
  cd chat-backend

• Install Required Modules:

  npm install @nestjs/mongoose mongoose @nestjs/passport passport passport-local bcryptjs
  npm install --save-dev @types/passport-local

2. Database Schema and Models

• Define User and Chat Models: Use Mongoose for schema definition.

User Schema

import { Schema } from 'mongoose';

export const UserSchema = new Schema({
  username: { type: String, required: true, unique: true },
  password: { type: String, required: true },
});

Chat Schema

import { Schema } from 'mongoose';

export const ChatSchema = new Schema({
  participants: [{ type: Schema.Types.ObjectId, ref: 'User' }],
  messages: [
    {
      sender: { type: Schema.Types.ObjectId, ref: 'User' },
      content: { type: String, required: true },
      timestamp: { type: Date, default: Date.now },
    },
  ],
});

3. Authentication

• Local Strategy for Authentication: Use Passport.js for authentication.

Local Strategy

import { Strategy } from 'passport-local';
import { PassportStrategy } from '@nestjs/passport';
import { Injectable, UnauthorizedException } from '@nestjs/common';
import { AuthService } from './auth.service';

@Injectable()
export class LocalStrategy extends PassportStrategy(Strategy) {
  constructor(private authService: AuthService) {
    super();
  }

  async validate(username: string, password: string): Promise<any> {
    const user = await this.authService.validateUser(username, password);
    if (!user) {
      throw new UnauthorizedException();
    }
    return user;
  }
}

4. REST API Endpoints

• User Registration and Login: Implement endpoints for user registration and login.

Auth Controller

import { Controller, Request, Post, UseGuards } from '@nestjs/common';
import { AuthService } from './auth.service';
import { LocalAuthGuard } from './local-auth.guard';

@Controller('auth')
export class AuthController {
  constructor(private authService: AuthService) {}

  @Post('register')
  async register(@Request() req) {
    return this.authService.register(req.body);
  }

  @UseGuards(LocalAuthGuard)
  @Post('login')
  async login(@Request() req) {
    return this.authService.login(req.user);
  }
}

5. Chat Functionality

• Create and Fetch Chats: Implement endpoints for creating and fetching chats and messages.

Chat Controller

import { Controller, Post, Get, Param, Body } from '@nestjs/common';
import { ChatService } from './chat.service';

@Controller('chats')
export class ChatController {
  constructor(private chatService: ChatService) {}

  @Post()
  async createChat(@Body() createChatDto: CreateChatDto) {
    return this.chatService.createChat(createChatDto);
  }

  @Get(':chatId')
  async getChat(@Param('chatId') chatId: string) {
    return this.chatService.getChat(chatId);
  }

  @Post(':chatId/messages')
  async sendMessage(@Param('chatId') chatId: string, @Body() sendMessageDto: SendMessageDto) {
    return this.chatService.sendMessage(chatId, sendMessageDto);
  }
}

6. Real-time Communication

• WebSocket for Real-Time: Integrate WebSocket for real-time messaging.

Install Dependencies

npm install @nestjs/websockets @nestjs/platform-socket.io

WebSocket Gateway

import {
  SubscribeMessage,
  WebSocketGateway,
  OnGatewayInit,
  WebSocketServer,
  OnGatewayConnection,
  OnGatewayDisconnect,
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

@WebSocketGateway()
export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer() server: Server;

  handleConnection(client: Socket, ...args: any[]) {
    console.log(`Client connected: ${client.id}`);
  }

  handleDisconnect(client: Socket) {
    console.log(`Client disconnected: ${client.id}`);
  }

  @SubscribeMessage('sendMessage')
  handleMessage(client: Socket, payload: any): void {
    this.server.emit('receiveMessage', payload);
  }
}

7. Frontend Integration

• Real-Time Messaging with Socket.io: Use Socket.io on the frontend for real-time updates.

Install Socket.io Client

npm install socket.io-client

Frontend Integration

import { useEffect, useState } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:3000');

export default function Chat() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  useEffect(() => {
    socket.on('receiveMessage', (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });
  }, []);

  const sendMessage = () => {
    socket.emit('sendMessage', input);
    setInput('');
  };

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((msg, index) => (
          <div key={index}>{msg}</div>
        ))}
      </div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={(e) => (e.key === 'Enter' ? sendMessage() : null)}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

8. Styling with TailwindCSS

• TailwindCSS for UI: Style the chat interface using TailwindCSS.

Example Styles

// Example chat component with TailwindCSS classes
export default function Chat() {
  // ... (useState and useEffect hooks)

  return (
    <div className="flex flex-col h-screen">
      <div className="flex-1 overflow-y-auto p-4">
        {messages.map((msg, index) => (
          <div key={index} className="bg-gray-200 p-2 my-2 rounded">
            {msg}
          </div>
        ))}
      </div>
      <div className="p-4 border-t border-gray-300 flex">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          className="flex-1 p-2 border rounded"
          onKeyDown={(e) => (e.key === 'Enter' ? sendMessage() : null)}
        />
        <button
          onClick={sendMessage}
          className="ml-2 bg-blue-500 text-white p-2 rounded"
        >
          Send
        </button>
      </div>
    </div>
  );
}

9. Deployment and Hosting

• Frontend Deployment: Use Vercel for deploying the Next.js app.
• Backend Deployment: Use services like Heroku, DigitalOcean, or AWS for deploying the NestJS app.

By following this breakdown, you can build a comprehensive chat application with real-time messaging capabilities, user authentication, and a responsive UI. Adjust and expand upon these basics to include additional features like user profiles, file sharing, notifications, etc., as needed.

User Authentication: User Registration

Backend Code (NestJS)

1. Auth Module Setup:

   • Generate the Auth Module:

    nest generate module auth
    nest generate service auth
    nest generate controller auth
   

2. User Schema:

   • Create User Schema (src/schemas/user.schema.ts):

    import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose';
    import { Document } from 'mongoose';
   
    export type UserDocument = User & Document;
   
    @Schema()
    export class User {
      @Prop({ required: true, unique: true })
      username: string;
   
      @Prop({ required: true })
      password: string;
    }
   
    export const UserSchema = SchemaFactory.createForClass(User);
   

3. User DTO (Data Transfer Object):

   • Create DTO for User Registration (src/auth/dto/register-user.dto.ts):

    export class RegisterUserDto {
      username: string;
      password: string;
    }
   

4. Auth Service:

   • Update the Auth Service (src/auth/auth.service.ts):

    import { Injectable } from '@nestjs/common';
    import { InjectModel } from '@nestjs/mongoose';
    import { Model } from 'mongoose';
    import { User, UserDocument } from '../schemas/user.schema';
    import { RegisterUserDto } from './dto/register-user.dto';
    import * as bcrypt from 'bcrypt';
   
    @Injectable()
    export class AuthService {
      constructor(@InjectModel(User.name) private userModel: Model<UserDocument>) {}
   
      async register(registerUserDto: RegisterUserDto): Promise<User> {
        const { username, password } = registerUserDto;
   
        // Check if the user already exists
        const existingUser = await this.userModel.findOne({ username }).exec();
        if (existingUser) {
          throw new Error('User already exists');
        }
   
        // Hash the password
        const salt = await bcrypt.genSalt();
        const hashedPassword = await bcrypt.hash(password, salt);
   
        // Create a new user
        const newUser = new this.userModel({ username, password: hashedPassword });
        return newUser.save();
      }
    }
   

5. Auth Controller:

   • Update the Auth Controller (src/auth/auth.controller.ts):

    import { Controller, Post, Body } from '@nestjs/common';
    import { AuthService } from './auth.service';
    import { RegisterUserDto } from './dto/register-user.dto';
    import { User } from '../schemas/user.schema';
   
    @Controller('auth')
    export class AuthController {
      constructor(private readonly authService: AuthService) {}
   
      @Post('register')
      async register(@Body() registerUserDto: RegisterUserDto): Promise<User> {
        return this.authService.register(registerUserDto);
      }
    }
   

6. Mongoose Setup:

   • Configure Mongoose in App Module (src/app.module.ts):

    import { Module } from '@nestjs/common';
    import { MongooseModule } from '@nestjs/mongoose';
    import { AuthModule } from './auth/auth.module';
    import { User, UserSchema } from './schemas/user.schema';
   
    @Module({
      imports: [
        MongooseModule.forRoot('mongodb://localhost/chat-app'),
        MongooseModule.forFeature([{ name: User.name, schema: UserSchema }]),
        AuthModule,
      ],
    })
    export class AppModule {}
   

Frontend Code (Next.js)

1. API Call for Registration:

   • Create API Function (src/services/api.js):

    import axios from 'axios';
   
    const API_URL = 'http://localhost:3000/auth';
   
    export const register = async (username, password) => {
      try {
        const response = await axios.post(`${API_URL}/register`, { username, password });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   

2. Registration Form:

   • Create Registration Form Component (src/components/RegisterForm.js):

    import { useState } from 'react';
    import { register } from '../services/api';
   
    export default function RegisterForm() {
      const [username, setUsername] = useState('');
      const [password, setPassword] = useState('');
      const [message, setMessage] = useState('');
   
      const handleSubmit = async (e) => {
        e.preventDefault();
        try {
          const data = await register(username, password);
          setMessage('User registered successfully');
        } catch (error) {
          setMessage(`Error: ${error.message}`);
        }
      };
   
      return (
        <div className="max-w-md mx-auto mt-10">
          <h2 className="text-2xl font-bold mb-5">Register</h2>
          <form onSubmit={handleSubmit}>
            <div className="mb-4">
              <label className="block text-gray-700">Username</label>
              <input
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="w-full px-3 py-2 border rounded"
              />
            </div>
            <div className="mb-4">
              <label className="block text-gray-700">Password</label>
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full px-3 py-2 border rounded"
              />
            </div>
            <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">
              Register
            </button>
          </form>
          {message && <p className="mt-4">{message}</p>}
        </div>
      );
    }
   

Conclusion

This setup includes the backend implementation for user registration with NestJS and a simple frontend registration form with Next.js. It uses MongoDB for data storage and bcrypt for password hashing. Adjust and expand this as needed for your complete chat application.

User Authentication: User Login and Logout

Backend Code (NestJS)

1. Auth Module Setup (continued from the previous setup)

2. Login DTO (Data Transfer Object):

   • Create DTO for User Login (src/auth/dto/login-user.dto.ts):

    export class LoginUserDto {
      username: string;
      password: string;
    }
   

3. JWT Module Setup:

   • Install JWT Package:

    npm install @nestjs/jwt passport-jwt
    npm install --save-dev @types/passport-jwt
   

• Configure JWT in Auth Module (src/auth/auth.module.ts):
  

   import { Module } from '@nestjs/common';
   import { JwtModule } from '@nestjs/jwt';
   import { PassportModule } from '@nestjs/passport';
   import { AuthService } from './auth.service';
   import { AuthController } from './auth.controller';
   import { User, UserSchema } from '../schemas/user.schema';
   import { MongooseModule } from '@nestjs/mongoose';
   import { JwtStrategy } from './jwt.strategy';
  
   @Module({
     imports: [
       MongooseModule.forFeature([{ name: User.name, schema: UserSchema }]),
       PassportModule,
       JwtModule.register({
         secret: 'YOUR_SECRET_KEY', // Replace with a secure key
         signOptions: { expiresIn: '1h' },
       }),
     ],
     providers: [AuthService, JwtStrategy],
     controllers: [AuthController],
   })
   export class AuthModule {}
  

1. Auth Service (continued):

   • Update Auth Service to Handle Login and JWT Generation (src/auth/auth.service.ts):

    import { Injectable } from '@nestjs/common';
    import { InjectModel } from '@nestjs/mongoose';
    import { Model } from 'mongoose';
    import { JwtService } from '@nestjs/jwt';
    import { User, UserDocument } from '../schemas/user.schema';
    import { RegisterUserDto } from './dto/register-user.dto';
    import { LoginUserDto } from './dto/login-user.dto';
    import * as bcrypt from 'bcrypt';
   
    @Injectable()
    export class AuthService {
      constructor(
        @InjectModel(User.name) private userModel: Model<UserDocument>,
        private jwtService: JwtService,
      ) {}
   
      async register(registerUserDto: RegisterUserDto): Promise<User> {
        const { username, password } = registerUserDto;
   
        const existingUser = await this.userModel.findOne({ username }).exec();
        if (existingUser) {
          throw new Error('User already exists');
        }
   
        const salt = await bcrypt.genSalt();
        const hashedPassword = await bcrypt.hash(password, salt);
   
        const newUser = new this.userModel({ username, password: hashedPassword });
        return newUser.save();
      }
   
      async validateUser(username: string, password: string): Promise<User> {
        const user = await this.userModel.findOne({ username }).exec();
        if (!user) {
          return null;
        }
   
        const isPasswordValid = await bcrypt.compare(password, user.password);
        if (!isPasswordValid) {
          return null;
        }
   
        return user;
      }
   
      async login(loginUserDto: LoginUserDto): Promise<{ access_token: string }> {
        const { username, password } = loginUserDto;
        const user = await this.validateUser(username, password);
        if (!user) {
          throw new Error('Invalid credentials');
        }
   
        const payload = { username: user.username, sub: user._id };
        return {
          access_token: this.jwtService.sign(payload),
        };
      }
    }
   

2. Auth Controller (continued):

   • Update Auth Controller for Login (src/auth/auth.controller.ts):

    import { Controller, Post, Body } from '@nestjs/common';
    import { AuthService } from './auth.service';
    import { RegisterUserDto } from './dto/register-user.dto';
    import { LoginUserDto } from './dto/login-user.dto';
    import { User } from '../schemas/user.schema';
   
    @Controller('auth')
    export class AuthController {
      constructor(private readonly authService: AuthService) {}
   
      @Post('register')
      async register(@Body() registerUserDto: RegisterUserDto): Promise<User> {
        return this.authService.register(registerUserDto);
      }
   
      @Post('login')
      async login(@Body() loginUserDto: LoginUserDto): Promise<{ access_token: string }> {
        return this.authService.login(loginUserDto);
      }
    }
   

3. JWT Strategy:

   • Create JWT Strategy for Protecting Routes (src/auth/jwt.strategy.ts):

    import { Strategy, ExtractJwt } from 'passport-jwt';
    import { PassportStrategy } from '@nestjs/passport';
    import { Injectable } from '@nestjs/common';
    import { JwtPayload } from './jwt-payload.interface';
    import { AuthService } from './auth.service';
   
    @Injectable()
    export class JwtStrategy extends PassportStrategy(Strategy) {
      constructor(private authService: AuthService) {
        super({
          jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
          ignoreExpiration: false,
          secretOrKey: 'YOUR_SECRET_KEY', // Replace with a secure key
        });
      }
   
      async validate(payload: JwtPayload) {
        return { userId: payload.sub, username: payload.username };
      }
    }
   

4. JWT Payload Interface:

   • Create JWT Payload Interface (src/auth/jwt-payload.interface.ts):

    export interface JwtPayload {
      username: string;
      sub: string;
    }
   

Frontend Code (Next.js)

1. API Call for Login:

   • Update API Function (src/services/api.js):

    import axios from 'axios';
   
    const API_URL = 'http://localhost:3000/auth';
   
    export const register = async (username, password) => {
      try {
        const response = await axios.post(`${API_URL}/register`, { username, password });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const login = async (username, password) => {
      try {
        const response = await axios.post(`${API_URL}/login`, { username, password });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   

2. Login Form:

   • Create Login Form Component (src/components/LoginForm.js):

    import { useState } from 'react';
    import { login } from '../services/api';
   
    export default function LoginForm() {
      const [username, setUsername] = useState('');
      const [password, setPassword] = useState('');
      const [message, setMessage] = useState('');
   
      const handleSubmit = async (e) => {
        e.preventDefault();
        try {
          const data = await login(username, password);
          localStorage.setItem('token', data.access_token);
          setMessage('User logged in successfully');
        } catch (error) {
          setMessage(`Error: ${error.message}`);
        }
      };
   
      return (
        <div className="max-w-md mx-auto mt-10">
          <h2 className="text-2xl font-bold mb-5">Login</h2>
          <form onSubmit={handleSubmit}>
            <div className="mb-4">
              <label className="block text-gray-700">Username</label>
              <input
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="w-full px-3 py-2 border rounded"
              />
            </div>
            <div className="mb-4">
              <label className="block text-gray-700">Password</label>
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full px-3 py-2 border rounded"
              />
            </div>
            <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">
              Login
            </button>
          </form>
          {message && <p className="mt-4">{message}</p>}
        </div>
      );
    }
   

3. Logout Function:

   • Handle Logout on the Client Side:

    export const logout = () => {
      localStorage.removeItem('token');
      window.location.href = '/login'; // Redirect to login page
    };
   

• Example Logout Button:
  

   import { logout } from '../services/api';
  
   export default function LogoutButton() {
     return (
       <button onClick={logout} className="bg-red-500 text-white px-4 py-2 rounded">
         Logout
       </button>
     );
   }
  

Conclusion

This setup includes the backend implementation for user login with NestJS and a simple frontend login form with Next.js. The logout mechanism is handled on the client side by removing the JWT token from local storage. This setup provides the basic authentication flow for a chat application.

User Management: Profile Management

Backend Code (NestJS)

1. User Profile Endpoint

2. Create User Profile DTO:

   • Create DTO for User Profile (src/auth/dto/user-profile.dto.ts):

    export class UserProfileDto {
      username: string;
    }
   

3. User Service:

   • Update User Service to Handle Profile Fetching (src/auth/auth.service.ts):

    import { Injectable } from '@nestjs/common';
    import { InjectModel } from '@nestjs/mongoose';
    import { Model } from 'mongoose';
    import { JwtService } from '@nestjs/jwt';
    import { User, UserDocument } from '../schemas/user.schema';
    import { RegisterUserDto } from './dto/register-user.dto';
    import { LoginUserDto } from './dto/login-user.dto';
    import { UserProfileDto } from './dto/user-profile.dto';
    import * as bcrypt from 'bcrypt';
   
    @Injectable()
    export class AuthService {
      constructor(
        @InjectModel(User.name) private userModel: Model<UserDocument>,
        private jwtService: JwtService,
      ) {}
   
      // ... other methods
   
      async getUserProfile(userId: string): Promise<UserProfileDto> {
        const user = await this.userModel.findById(userId).exec();
        if (!user) {
          throw new Error('User not found');
        }
        return { username: user.username };
      }
    }
   

4. Auth Controller:

   • Update Auth Controller to Include Profile Fetching (src/auth/auth.controller.ts):

    import { Controller, Post, Get, Request, Body, UseGuards } from '@nestjs/common';
    import { AuthService } from './auth.service';
    import { RegisterUserDto } from './dto/register-user.dto';
    import { LoginUserDto } from './dto/login-user.dto';
    import { User } from '../schemas/user.schema';
    import { JwtAuthGuard } from './jwt-auth.guard';
   
    @Controller('auth')
    export class AuthController {
      constructor(private readonly authService: AuthService) {}
   
      @Post('register')
      async register(@Body() registerUserDto: RegisterUserDto): Promise<User> {
        return this.authService.register(registerUserDto);
      }
   
      @Post('login')
      async login(@Body() loginUserDto: LoginUserDto): Promise<{ access_token: string }> {
        return this.authService.login(loginUserDto);
      }
   
      @UseGuards(JwtAuthGuard)
      @Get('me')
      async getProfile(@Request() req): Promise<{ username: string }> {
        return this.authService.getUserProfile(req.user.userId);
      }
    }
   

5. JWT Auth Guard:

   • Create JWT Auth Guard (src/auth/jwt-auth.guard.ts):

    import { Injectable } from '@nestjs/common';
    import { AuthGuard } from '@nestjs/passport';
   
    @Injectable()
    export class JwtAuthGuard extends AuthGuard('jwt') {}
   

6. Update JWT Strategy:

   • Ensure Payload Includes User ID (src/auth/jwt.strategy.ts):

    import { Strategy, ExtractJwt } from 'passport-jwt';
    import { PassportStrategy } from '@nestjs/passport';
    import { Injectable } from '@nestjs/common';
    import { JwtPayload } from './jwt-payload.interface';
    import { AuthService } from './auth.service';
   
    @Injectable()
    export class JwtStrategy extends PassportStrategy(Strategy) {
      constructor(private authService: AuthService) {
        super({
          jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
          ignoreExpiration: false,
          secretOrKey: 'YOUR_SECRET_KEY', // Replace with a secure key
        });
      }
   
      async validate(payload: JwtPayload) {
        return { userId: payload.sub, username: payload.username };
      }
    }
   

Frontend Code (Next.js)

1. API Call for Fetching User Profile:

   • Create API Function for Fetching User Profile (src/services/api.js):

    import axios from 'axios';
   
    const API_URL = 'http://localhost:3000/auth';
   
    export const register = async (username, password) => {
      try {
        const response = await axios.post(`${API_URL}/register`, { username, password });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const login = async (username, password) => {
      try {
        const response = await axios.post(`${API_URL}/login`, { username, password });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const getProfile = async (token) => {
      try {
        const response = await axios.get(`${API_URL}/me`, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const logout = () => {
      localStorage.removeItem('token');
      window.location.href = '/login'; // Redirect to login page
    };
   

2. Profile Page:

   • Create Profile Page Component (src/pages/profile.js):

    import { useEffect, useState } from 'react';
    import { getProfile } from '../services/api';
   
    export default function Profile() {
      const [profile, setProfile] = useState(null);
      const [error, setError] = useState('');
   
      useEffect(() => {
        const fetchProfile = async () => {
          try {
            const token = localStorage.getItem('token');
            if (token) {
              const data = await getProfile(token);
              setProfile(data);
            } else {
              setError('No token found');
            }
          } catch (err) {
            setError(err.message);
          }
        };
   
        fetchProfile();
      }, []);
   
      if (error) {
        return <div className="text-red-500">{error}</div>;
      }
   
      return (
        <div className="max-w-md mx-auto mt-10">
          <h2 className="text-2xl font-bold mb-5">Profile</h2>
          {profile ? (
            <div>
              <p><strong>Username:</strong> {profile.username}</p>
            </div>
          ) : (
            <p>Loading...</p>
          )}
        </div>
      );
    }
   

Conclusion

This setup includes the backend implementation for fetching the logged-in user's profile with NestJS and a simple frontend profile page with Next.js. The profile endpoint is protected with JWT authentication, ensuring only authenticated users can access their profile information.

User Management: Update Profile

Backend Code (NestJS)

1. Update User Profile DTO:

   • Create DTO for Updating User Profile (src/auth/dto/update-user.dto.ts):

    export class UpdateUserDto {
      username?: string;
      password?: string;
    }
   

2. User Service:

   • Update User Service to Handle Profile Updating (src/auth/auth.service.ts):

    import { Injectable } from '@nestjs/common';
    import { InjectModel } from '@nestjs/mongoose';
    import { Model } from 'mongoose';
    import { JwtService } from '@nestjs/jwt';
    import { User, UserDocument } from '../schemas/user.schema';
    import { RegisterUserDto } from './dto/register-user.dto';
    import { LoginUserDto } from './dto/login-user.dto';
    import { UpdateUserDto } from './dto/update-user.dto';
    import * as bcrypt from 'bcrypt';
   
    @Injectable()
    export class AuthService {
      constructor(
        @InjectModel(User.name) private userModel: Model<UserDocument>,
        private jwtService: JwtService,
      ) {}
   
      // ... other methods
   
      async updateUserProfile(userId: string, updateUserDto: UpdateUserDto): Promise<User> {
        const user = await this.userModel.findById(userId).exec();
        if (!user) {
          throw new Error('User not found');
        }
   
        if (updateUserDto.username) {
          user.username = updateUserDto.username;
        }
   
        if (updateUserDto.password) {
          const salt = await bcrypt.genSalt();
          user.password = await bcrypt.hash(updateUserDto.password, salt);
        }
   
        return user.save();
      }
    }
   

3. Auth Controller:

   • Update Auth Controller to Include Profile Updating (src/auth/auth.controller.ts):

    import { Controller, Post, Get, Put, Request, Body, UseGuards } from '@nestjs/common';
    import { AuthService } from './auth.service';
    import { RegisterUserDto } from './dto/register-user.dto';
    import { LoginUserDto } from './dto/login-user.dto';
    import { UpdateUserDto } from './dto/update-user.dto';
    import { User } from '../schemas/user.schema';
    import { JwtAuthGuard } from './jwt-auth.guard';
   
    @Controller('auth')
    export class AuthController {
      constructor(private readonly authService: AuthService) {}
   
      @Post('register')
      async register(@Body() registerUserDto: RegisterUserDto): Promise<User> {
        return this.authService.register(registerUserDto);
      }
   
      @Post('login')
      async login(@Body() loginUserDto: LoginUserDto): Promise<{ access_token: string }> {
        return this.authService.login(loginUserDto);
      }
   
      @UseGuards(JwtAuthGuard)
      @Get('me')
      async getProfile(@Request() req): Promise<{ username: string }> {
        return this.authService.getUserProfile(req.user.userId);
      }
   
      @UseGuards(JwtAuthGuard)
      @Put('me')
      async updateProfile(@Request() req, @Body() updateUserDto: UpdateUserDto): Promise<User> {
        return this.authService.updateUserProfile(req.user.userId, updateUserDto);
      }
    }
   

4. JWT Auth Guard and Strategy (from previous steps).

Frontend Code (Next.js)

1. API Call for Updating User Profile:

   • Create API Function for Updating User Profile (src/services/api.js):

    import axios from 'axios';
   
    const API_URL = 'http://localhost:3000/auth';
   
    export const register = async (username, password) => {
      try {
        const response = await axios.post(`${API_URL}/register`, { username, password });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const login = async (username, password) => {
      try {
        const response = await axios.post(`${API_URL}/login`, { username, password });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const getProfile = async (token) => {
      try {
        const response = await axios.get(`${API_URL}/me`, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const updateProfile = async (token, userData) => {
      try {
        const response = await axios.put(`${API_URL}/me`, userData, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const logout = () => {
      localStorage.removeItem('token');
      window.location.href = '/login'; // Redirect to login page
    };
   

2. Update Profile Form:

   • Create Update Profile Form Component (src/components/UpdateProfileForm.js):

    import { useState, useEffect } from 'react';
    import { getProfile, updateProfile } from '../services/api';
   
    export default function UpdateProfileForm() {
      const [username, setUsername] = useState('');
      const [password, setPassword] = useState('');
      const [message, setMessage] = useState('');
   
      useEffect(() => {
        const fetchProfile = async () => {
          try {
            const token = localStorage.getItem('token');
            if (token) {
              const data = await getProfile(token);
              setUsername(data.username);
            }
          } catch (err) {
            setMessage(`Error: ${err.message}`);
          }
        };
   
        fetchProfile();
      }, []);
   
      const handleSubmit = async (e) => {
        e.preventDefault();
        try {
          const token = localStorage.getItem('token');
          const userData = { username, password: password || undefined };
          const data = await updateProfile(token, userData);
          setMessage('Profile updated successfully');
        } catch (error) {
          setMessage(`Error: ${error.message}`);
        }
      };
   
      return (
        <div className="max-w-md mx-auto mt-10">
          <h2 className="text-2xl font-bold mb-5">Update Profile</h2>
          <form onSubmit={handleSubmit}>
            <div className="mb-4">
              <label className="block text-gray-700">Username</label>
              <input
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="w-full px-3 py-2 border rounded"
              />
            </div>
            <div className="mb-4">
              <label className="block text-gray-700">Password</label>
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full px-3 py-2 border rounded"
                placeholder="Leave blank to keep the same"
              />
            </div>
            <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">
              Update
            </button>
          </form>
          {message && <p className="mt-4">{message}</p>}
        </div>
      );
    }
   

Conclusion

This setup includes the backend implementation for updating the logged-in user's profile with NestJS and a simple frontend update profile form with Next.js. The profile update endpoint is protected with JWT authentication, ensuring only authenticated users can update their profile information.

Chat Management: Create Chat

Backend Code (NestJS)

1. Chat Module Setup

   • Generate the Chat Module:

    nest generate module chat
    nest generate service chat
    nest generate controller chat
   

2. Chat Schema:

   • Create Chat Schema (src/schemas/chat.schema.ts):

    import { Schema, Prop, SchemaFactory } from '@nestjs/mongoose';
    import { Document, Types } from 'mongoose';
   
    export type ChatDocument = Chat & Document;
   
    @Schema()
    export class Chat {
      @Prop({ type: [{ type: Types.ObjectId, ref: 'User' }], required: true })
      participants: Types.ObjectId[];
   
      @Prop({ type: [{ type: Object }] })
      messages: { sender: Types.ObjectId; content: string; timestamp: Date }[];
    }
   
    export const ChatSchema = SchemaFactory.createForClass(Chat);
   

3. Create Chat DTO:

   • Create DTO for Creating Chat (src/chat/dto/create-chat.dto.ts):

    export class CreateChatDto {
      participants: string[];
    }
   

4. Chat Service:

   • Update Chat Service to Handle Chat Creation (src/chat/chat.service.ts):

    import { Injectable } from '@nestjs/common';
    import { InjectModel } from '@nestjs/mongoose';
    import { Model } from 'mongoose';
    import { Chat, ChatDocument } from '../schemas/chat.schema';
    import { CreateChatDto } from './dto/create-chat.dto';
   
    @Injectable()
    export class ChatService {
      constructor(@InjectModel(Chat.name) private chatModel: Model<ChatDocument>) {}
   
      async createChat(createChatDto: CreateChatDto): Promise<Chat> {
        const newChat = new this.chatModel({
          participants: createChatDto.participants,
          messages: [],
        });
        return newChat.save();
      }
    }
   

5. Chat Controller:

   • Update Chat Controller to Include Chat Creation (src/chat/chat.controller.ts):

    import { Controller, Post, Body, UseGuards } from '@nestjs/common';
    import { ChatService } from './chat.service';
    import { CreateChatDto } from './dto/create-chat.dto';
    import { JwtAuthGuard } from '../auth/jwt-auth.guard';
    import { Chat } from '../schemas/chat.schema';
   
    @Controller('chats')
    export class ChatController {
      constructor(private readonly chatService: ChatService) {}
   
      @UseGuards(JwtAuthGuard)
      @Post()
      async createChat(@Body() createChatDto: CreateChatDto): Promise<Chat> {
        return this.chatService.createChat(createChatDto);
      }
    }
   

6. JWT Auth Guard (from previous steps).

Frontend Code (Next.js)

1. API Call for Creating Chat:

   • Create API Function for Creating Chat (src/services/api.js):

    import axios from 'axios';
   
    const API_URL = 'http://localhost:3000';
   
    export const register = async (username, password) => {
      try {
        const response = await axios.post(`${API_URL}/auth/register`, { username, password });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const login = async (username, password) => {
      try {
        const response = await axios.post(`${API_URL}/auth/login`, { username, password });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const getProfile = async (token) => {
      try {
        const response = await axios.get(`${API_URL}/auth/me`, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const updateProfile = async (token, userData) => {
      try {
        const response = await axios.put(`${API_URL}/auth/me`, userData, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const createChat = async (token, participants) => {
      try {
        const response = await axios.post(`${API_URL}/chats`, { participants }, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const logout = () => {
      localStorage.removeItem('token');
      window.location.href = '/login'; // Redirect to login page
    };
   

2. Create Chat Form:

   • Create Chat Form Component (src/components/CreateChatForm.js):

    import { useState } from 'react';
    import { createChat } from '../services/api';
   
    export default function CreateChatForm() {
      const [participants, setParticipants] = useState('');
      const [message, setMessage] = useState('');
   
      const handleSubmit = async (e) => {
        e.preventDefault();
        try {
          const token = localStorage.getItem('token');
          const participantIds = participants.split(',').map(id => id.trim());
          const data = await createChat(token, participantIds);
          setMessage('Chat created successfully');
        } catch (error) {
          setMessage(`Error: ${error.message}`);
        }
      };
   
      return (
        <div className="max-w-md mx-auto mt-10">
          <h2 className="text-2xl font-bold mb-5">Create Chat</h2>
          <form onSubmit={handleSubmit}>
            <div className="mb-4">
              <label className="block text-gray-700">Participants</label>
              <input
                type="text"
                value={participants}
                onChange={(e) => setParticipants(e.target.value)}
                className="w-full px-3 py-2 border rounded"
                placeholder="Comma-separated user IDs"
              />
            </div>
            <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">
              Create Chat
            </button>
          </form>
          {message && <p className="mt-4">{message}</p>}
        </div>
      );
    }
   

Conclusion

This setup includes the backend implementation for creating a new chat session with NestJS and a simple frontend form for creating a chat with Next.js. The chat creation endpoint is protected with JWT authentication, ensuring only authenticated users can create new chat sessions.

Chat Management: Fetch Chats

Backend Code (NestJS)

1. Chat Service:

   • Update Chat Service to Handle Fetching Chats (src/chat/chat.service.ts):

    import { Injectable } from '@nestjs/common';
    import { InjectModel } from '@nestjs/mongoose';
    import { Model } from 'mongoose';
    import { Chat, ChatDocument } from '../schemas/chat.schema';
    import { User, UserDocument } from '../schemas/user.schema';
   
    @Injectable()
    export class ChatService {
      constructor(
        @InjectModel(Chat.name) private chatModel: Model<ChatDocument>,
        @InjectModel(User.name) private userModel: Model<UserDocument>,
      ) {}
   
      async createChat(participants: string[]): Promise<Chat> {
        const newChat = new this.chatModel({
          participants: participants,
          messages: [],
        });
        return newChat.save();
      }
   
      async getChats(userId: string): Promise<Chat[]> {
        return this.chatModel.find({ participants: userId }).populate('participants', 'username').exec();
      }
    }
   

2. Chat Controller:

   • Update Chat Controller to Include Fetching Chats (src/chat/chat.controller.ts):

    import { Controller, Post, Get, Body, UseGuards, Request } from '@nestjs/common';
    import { ChatService } from './chat.service';
    import { CreateChatDto } from './dto/create-chat.dto';
    import { JwtAuthGuard } from '../auth/jwt-auth.guard';
    import { Chat } from '../schemas/chat.schema';
   
    @Controller('chats')
    export class ChatController {
      constructor(private readonly chatService: ChatService) {}
   
      @UseGuards(JwtAuthGuard)
      @Post()
      async createChat(@Body() createChatDto: CreateChatDto): Promise<Chat> {
        return this.chatService.createChat(createChatDto.participants);
      }
   
      @UseGuards(JwtAuthGuard)
      @Get()
      async getChats(@Request() req): Promise<Chat[]> {
        return this.chatService.getChats(req.user.userId);
      }
    }
   

3. Ensure JWT Auth Guard is Applied:

   • Ensure that JwtAuthGuard is properly set up and imported as shown in previous examples.

Frontend Code (Next.js)

1. API Call for Fetching Chats:

   • Create API Function for Fetching Chats (src/services/api.js):

    import axios from 'axios';
   
    const API_URL = 'http://localhost:3000';
   
    export const register = async (username, password) => {
      try {
        const response = await axios.post(`${API_URL}/auth/register`, { username, password });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const login = async (username, password) => {
      try {
        const response = await axios.post(`${API_URL}/auth/login`, { username, password });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const getProfile = async (token) => {
      try {
        const response = await axios.get(`${API_URL}/auth/me`, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const updateProfile = async (token, userData) => {
      try {
        const response = await axios.put(`${API_URL}/auth/me`, userData, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const createChat = async (token, participants) => {
      try {
        const response = await axios.post(`${API_URL}/chats`, { participants }, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const getChats = async (token) => {
      try {
        const response = await axios.get(`${API_URL}/chats`, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        return response.data;
      } catch (error) {
        throw error.response.data;
      }
    };
   
    export const logout = () => {
      localStorage.removeItem('token');
      window.location.href = '/login'; // Redirect to login page
    };
   

2. Chat List Page:

   • Create Chat List Component (src/components/ChatList.js):

    import { useEffect, useState } from 'react';
    import { getChats } from '../services/api';
   
    export default function ChatList() {
      const [chats, setChats] = useState([]);
      const [error, setError] = useState('');
   
      useEffect(() => {
        const fetchChats = async () => {
          try {
            const token = localStorage.getItem('token');
            if (token) {
              const data = await getChats(token);
              setChats(data);
            } else {
              setError('No token found');
            }
          } catch (err) {
            setError(err.message);
          }
        };
   
        fetchChats();
      }, []);
   
      if (error) {
        return <div className="text-red-500">{error}</div>;
      }
   
      return (
        <div className="max-w-md mx-auto mt-10">
          <h2 className="text-2xl font-bold mb-5">Chats</h2>
          {chats.length > 0 ? (
            <ul>
              {chats.map((chat) => (
                <li key={chat._id} className="mb-2 p-2 border rounded">
                  {chat.participants.map((participant) => participant.username).join(', ')}
                </li>
              ))}
            </ul>
          ) : (
            <p>No chats available.</p>
          )}
        </div>
      );
    }
   

Conclusion

This setup includes the backend implementation for fetching all chat sessions for the logged-in user with NestJS and a simple frontend chat list component with Next.js. The chat fetching endpoint is protected with JWT authentication, ensuring only authenticated users can fetch their chat sessions.

Chat Management: Fetch Chat Details

Backend Code (NestJS)

1. Chat Service:

   • Update Chat Service to Handle Fetching Chat Details (src/chat/chat.service.ts):

    import { Injectable } from '@nestjs/common';
    import { InjectModel } from '@nestjs/mongoose';
    import { Model } from 'mongoose';
    import { Chat, ChatDocument } from '../schemas/chat.schema';
    import { User, UserDocument } from '../schemas/user.schema';
   
    @Injectable()
    export class ChatService {
      constructor(
        @InjectModel(Chat.name) private chatModel: Model<ChatDocument>,
        @InjectModel(User.name) private userModel: Model<UserDocument>,
      ) {}
   
      async createChat(participants: string[]): Promise<Chat> {
        const newChat = new this.chatModel({
          participants: participants,
          messages: [],
        });
        return newChat.save();
      }
   
      async getChats(userId: string): Promise<Chat[]> {
        return this.chatModel.find({ participants: userId }).populate('participants', 'username').exec();
      }
   
      async getChatDetails(chatId: string): Promise<Chat> {
        return this.chatModel.findById(chatId).populate('participants', 'username').populate('messages.sender', 'username').exec();
      }
    }
   

2. Chat Controller:

   • Update Chat Controller to Include Fetching Chat Details (src/chat/chat.controller.ts):

    import { Controller, Post, Get, Param, Body, UseGuards, Request } from '@nestjs/common';
    import { ChatService } from './chat.service';
    import { CreateChatDto } from './dto/create-chat.dto';
    import { JwtAuthGuard } from '../auth/jwt-auth.guard';
    import { Chat } from '../schemas/chat.schema';
   
    @Controller('chats')
    export class ChatController {
      constructor(private readonly chatService: ChatService) {}
   
      @UseGuards(JwtAuthGuard)
      @Post()
      async createChat(@Body() createChatDto: CreateChatDto): Promise<Chat> {
        return this.chatService.createChat(createChatDto.participants);
      }
   
      @UseGuards(JwtAuthGuard)
      @Get()
      async getChats(@Request() req): Promise<Chat[]> {
        return this.chatService.getChats(req.user.userId);
      }
   
      @UseGuards(JwtAuthGuard)
      @Get(':chatId')
      async getChatDetails(@Param('chatId') chatId: string): Promise<Chat> {
        return this.chatService.getChatDetails(chatId);
      }
    }
   

3. Ensure JWT Auth Guard is Applied:

   • Ensure that JwtAuthGuard is properly set up and imported as shown in previous examples.