Project Description:
A feature-rich web chat application designed for seamless AI communication and mental health support with real-time chat through WebSockets, ensuring instant updates and interactions. The app leverages advanced APIs such as OpenAI for custom AI chat functionality and Stripe for secure payment and subscription handling. Built with HTML, CSS, JavaScript, React, Node.js, Express.js, JWT for robust authentication, MySQL for structured data handling, and MongoDB for efficient chat history storage.
Video ▼
Architecture Overview ▼
Code Snippets ▼
This section will show key snippets of code relating to APIs, UI, authentication, databases, and features.
Frontend Snippets ▼
1. User Registration Form
Shows the form where users can create a new account, including fields for email and password.
2. User Login Form
Displays the form for user login, highlighting the password visibility toggle feature and authentication logic.
3. Chat Interface for Guest Users
Demonstrates the chat interface for guest users, including the welcome message and chat rendering logic.
4. Chat Interface for Premium Users
Shows the chat interface for premium users, with similar logic.
5. Ad Overlay Component
Displays the component for showing ads to guest users before they can start a new session.
6. Settings and Subscription Management
Highlights the settings interface where users can manage their subscriptions, including canceling and updating their plans.
Backend Snippets ▼
1. User Authentication and JWT Handling
Shows the authentication logic, including JWT token generation, storage, and validation.
2. Stripe Webhook Handling
Demonstrates how the application handles Stripe webhooks for events such as subscription creation, update, and deletion.
3. Database Interaction (MySQL)
Highlights how the backend interacts with the MySQL database for operations such as retrieving user information and managing subscriptions.
4. Database Interaction (MongoDB)
Highlights how the backend interacts with MongoDB for chat CRUD operations.
5. OpenAI API Integration
Shows the logic for integrating with the OpenAI API to generate responses in the chat application.
6. WebSocket Setup and Usage
Demonstrates the setup and usage of WebSockets for real-time communication between the client and server, ensuring live updates in the chat interface.
7. Session Management
Highlights how user sessions are managed, including handling session expiration and renewing sessions after ad views.
Database Snippets ▼
1. MySQL Users Table Schema
Shows the schema for the users table, highlighting columns such as email, password, and stripe_customer_id.
2. MySQL Payments Table Schema
Displays the schema for the payments table, showing columns like payment_id, user_id, status, created_at, and amount.
3. MySQL Subscriptions Table Schema
Shows the schema for the subscriptions table, highlighting columns such as user_id, status, started_at, ended_at, and subscription_id.
4. MongoDB CRUD Schema
Shows the schema for chat history CRUD operations, highlighting message storage management for users and AI.
Future Improvements ▼