Messaging App with Sendbird and PostgreSQL

A real-time messaging application built with Next.js, Sendbird UIKit, and PostgreSQL. This application provides a complete chat solution with user profile management and database persistence.

Features

• Real-time Messaging: Powered by Sendbird UIKit for React
• User Profile Management: Edit nickname and profile image with validation
• Database Persistence: PostgreSQL integration for user and channel data
• Event Tracking: Automatic synchronization between Sendbird and database
• Input Validation: Comprehensive validation for user inputs
• Responsive Design: Modern UI with Tailwind CSS

Prerequisites

• Node.js 18+
• PostgreSQL database
• Sendbird account and App ID

Environment Setup

1. Frontend Environment Variables

Create .env.local in the project root:

# Sendbird Configuration for Frontend
NEXT_PUBLIC_SENDBIRD_APP_ID=your_sendbird_app_id_here
NEXT_PUBLIC_SENDBIRD_USER_ID=your_user_id_here

2. Backend Environment Variables

Create .env in the project root:

# PostgreSQL Database Configuration
DB_HOST=localhost
DB_USER=dev_applicant
DB_PASSWORD=bfEJGCBRYfW1NOiWeGEA
DB_PORT=5432
DB_NAME=FSD_surname

# Sendbird Configuration for Backend
SENDBIRD_APP_ID=your_sendbird_app_id_here

Note: Replace FSD_surname with FSD_ followed by your actual surname.

Installation

2. **Install dependencies**
```bash
npm install

3. Configure environment variables (see Environment Setup above)

4. Set up PostgreSQL database

   • Ensure PostgreSQL is running
   • Create database with name FSD_<surname>
   • The application will automatically create required tables on first run

Getting Started

1. Start the development server

   npm run dev

2. Open the application

   • Navigate to http://localhost:3000 (or the port shown in terminal)
   • If environment variables are configured, the app will auto-start with those credentials
   • Otherwise, enter your Sendbird App ID and User ID manually
   • Start chatting!

Sendbird Provider Implementation

This application properly implements the SendbirdProvider to avoid the "No sendbird state value available" error:

• Provider Wrapper: SendbirdProvider from @sendbird/uikit-react/SendbirdProvider wraps the entire chat application
• Context Access: All components that use useSendbirdStateContext() are within the provider tree
• Dynamic Loading: Sendbird components are dynamically imported with SSR disabled to prevent window/document issues
• Environment Integration: Automatic configuration using NEXT_PUBLIC_SENDBIRD_APP_ID and NEXT_PUBLIC_SENDBIRD_USER_ID

Database Schema

The application automatically creates the following tables:

Users Table

CREATE TABLE users (
  user_id VARCHAR(255) PRIMARY KEY,
  nickname VARCHAR(255) NOT NULL,
  profile_url TEXT,
  deleted_flag BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Channels Table

CREATE TABLE channels (
  channel_url VARCHAR(255) PRIMARY KEY,
  created_by VARCHAR(255) NOT NULL,
  chatmate_id VARCHAR(255),
  deleted_flag BOOLEAN DEFAULT FALSE,
  message_count INTEGER DEFAULT 0,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (created_by) REFERENCES users(user_id),
  FOREIGN KEY (chatmate_id) REFERENCES users(user_id)
);

API Endpoints

Users

POST /api/users

Create a new user in the database.

Request Body:

{
  "user_id": "string",
  "nickname": "string",
  "profile_url": "string (optional)"
}

PATCH /api/users/[userId]

Update user information.

Request Body:

{
  "nickname": "string (optional)",
  "profile_url": "string (optional)"
}

Channels

POST /api/channels

Create a new channel in the database.

Request Body:

{
  "channel_url": "string",
  "created_by": "string",
  "chatmate_id": "string (optional)"
}

GET /api/channels?userId=string

Get all channels for a specific user.

Database Initialization

POST /api/init-db

Initialize database tables (automatically called on app startup).

Input Validation and Constraints

Nickname Constraints

• Required: Yes
• Minimum Length: 1 character
• Maximum Length: 30 characters
• Invalid Characters: < > " ' &

Profile Image URL Constraints

• Required: No (optional)
• Format: Valid HTTP/HTTPS URL
• Supported Extensions: jpg, jpeg, png, gif, webp, svg (when extension is present)

User ID Constraints

• Required: Yes
• Maximum Length: 255 characters
• Allowed Characters: Letters, numbers, dots, underscores, hyphens

Application Flow

1. User Opens Application

   • User enters Sendbird App ID and User ID
   • Application initializes database tables
   • User is automatically created in database

2. Profile Management

   • Click "Edit Profile" in channel list header
   • Update nickname and/or profile image URL
   • Changes are validated and saved to both Sendbird and database

3. Channel Creation

   • Create 1-1 channels through Sendbird UI
   • Channel information is automatically saved to database
   • Message count defaults to 0

4. Event Synchronization

   • All Sendbird events are tracked and synchronized with database
   • User creation, updates, and channel creation are persisted

Testing

To test the application:

1. User Creation Test

   • Open the application with a new User ID
   • Verify user is created in database

2. Profile Update Test

   • Edit user profile through the UI
   • Verify changes are reflected in both Sendbird and database

3. Channel Creation Test

   • Create a 1-1 channel
   • Verify channel data is stored in database with correct information

Troubleshooting

Database Connection Issues

• Verify PostgreSQL is running
• Check database credentials in .env
• Ensure database FSD_<surname> exists

Sendbird Connection Issues

• Verify App ID is correct in environment variables
• Check Sendbird dashboard for app status
• Ensure User ID follows Sendbird naming conventions

Build Issues

• Clear node_modules and reinstall: rm -rf node_modules && npm install
• Check for TypeScript errors: npm run build

Project Structure

messaging-app/
├── src/
│   ├── app/
│   │   ├── api/           # API routes
│   │   ├── globals.css    # Global styles
│   │   ├── layout.tsx     # Root layout
│   │   └── page.tsx       # Main page
│   ├── components/        # React components
│   ├── hooks/            # Custom hooks
│   ├── lib/              # Utilities and database
│   └── utils/            # Validation utilities
├── .env                  # Backend environment variables
├── .env.local           # Frontend environment variables
└── README.md

Technologies Used

• Frontend: Next.js 15, React 19, TypeScript, Tailwind CSS
• Chat: Sendbird UIKit for React
• Database: PostgreSQL with pg client
• Validation: Custom validation utilities
• Styling: Tailwind CSS

License

This project is for educational/development purposes.