Mohosin

SmartGPT - Designing a Secure, Full-Stack AI Chatbot and Image Generation Platform

📝 Overview

SmartGPT is a full-stack AI chatbot and image generation platform built with the MERN stack. It integrates OpenAI, Google Gemini, and ImageKit to provide intelligent, context-aware responses. Users can securely generate and store AI-powered chats and images, with authentication handled via JWT and bcrypt. The frontend uses React and TailwindCSS for a modern UI, while the backend leverages Node.js, Express, and MongoDB for scalability. The platform also offers a well-documented RESTful API with Swagger for easy integration.

🧩 Approach

Technology Selection

  • 🔹 Choose the MERN stack, OpenAI & Google Gemini, and ImageKit for secure storage and AI integration.

System Architecture Design

  • 🔹 Plan frontend, backend, database, and API structure for scalability and maintainability.

Implementation

  • 🔹 Build authentication, AI chat, image generation, chat management, and API endpoints.

Documentation & Deployment

  • 🔹 Provide Swagger API docs, live demo, and proper environment setup.

✨ Features

Secure Authentication

  • 🔹 Register and log in using email and password.
  • 🔹 Passwords are encrypted with bcrypt for security.
  • 🔹 JSON Web Token (JWT) is used for authentication.
  • 🔹 Without login, no user can access any feature.

AI Chatbot

  • 🔹 Generate AI-powered responses for any text prompt.
  • 🔹 Works like ChatGPT, giving intelligent answers instead of simple messaging.
  • 🔹 Each conversation is saved securely in the user’s account.

AI Image Generation

  • 🔹 Generate unique images from your own prompts.
  • 🔹 Images are uploaded and stored using ImageKit.

Chat Management

  • 🔹 Search Chats – Find specific conversations quickly.
  • 🔹 Delete Chats – Remove unwanted chats individually.
  • 🔹 Chat History – Access your past prompts and responses anytime.

Backend API with Swagger

  • 🔹 RESTful API designed using Express.js and MongoDB.
  • 🔹 Fully documented with Swagger UI.
  • 🔹 Organized structure for scalability and easy integration.

🛠️ Tech Stack

JavaScript
React
Redux Toolkit
Tailwind CSS
shadcn/ui
React Router DOM
Express.js
MongoDB
JWT
Swagger UI
OpenAI
Google Gemini AI
ImageKit
React Markdown
PrismJS
React Hot Toast
React Icons
Axios
Prop-Types

⚡ Challenges & Solutions

Issue 01: Next.js 15 Typed Routes Bug

Challenge:While upgrading my full-stack AI Resume Builder to Next.js 15 (App Router), I encountered a critical TypeScript issue during production builds. Despite correctly typing dynamic route parameters and trying recommended fixes—like adjusting typed routes, using generateStaticParams, and refactoring async/await—the build kept failing. The root cause was Next.js 15’s experimental typed routes feature, which enforced overly strict type checking and mistakenly treated parameters as Promises, leading to persistent build failures.

Solution:To resolve the issue, I downgraded from Next.js 15 to 14.2.x for better stability and made a few minor adjustments in the configuration, including updates to next.config.js and font imports. After these changes, the production builds finally ran without errors, and the application now works flawlessly.

Issue 02: Mobile Print Styles Showing Instead of Desktop Styles

Challenge:After making the resume responsive for mobile, printing the resume caused it to use mobile-optimized styles (stacked layouts, centered text) instead of the cleaner desktop layout. This resulted in unprofessional print output, as desktop styles (side-by-side sections, proper alignment) are much better for printed resumes.

Solution:Leveraged Tailwind CSS’s print: modifier to enforce desktop-specific styles during printing.

Issue 03: Managing Reusable Styles in Tailwind CSS

Challenge:While building the app’s design, I felt exhausted from repeatedly writing the same Tailwind utility classes across multiple components. This repetition made the JSX messy and harder to maintain.

Solution:Implemented a global reusable style system using Tailwind’s @apply directive.

🧪 Test Code Journey

  • 🔹 Initially, I attempted to set up a test environment twice but quit due to recurring errors.
  • 🔹 Every fix seemed to trigger a new error, leading to frustration.
  • 🔹 trying a third time, I revised my test knowledge, re-learned testing classes, and analyzed error patterns.
  • 🔹 On my third attempt, I successfully configured the test environment, wrote meaningful test cases, and understood the purpose of each test.
  • 🔹 This experience taught me the importance of perseverance, structured learning, and error analysis when working with testing frameworks.

📖 Lessons Learned

  • 🔹 Centralized global styles improved consistency and maintainability.
  • 🔹 AI integration requires patience and iterative tuning.
  • 🔹 Reusable components simplified development and maintenance.
  • 🔹 Performance optimization improved UX (lazy loading, optimized rendering).
  • 🔹 Debugging mindset is critical for solving complex framework issues.