02 / PERSONAL · FULL STACK

Personal Projects

A collection of personal projects built to explore full-stack development, artificial intelligence, authentication systems, databases, modern UI/UX, animations, and interactive 3D experiences.

PROJECT SHOWCASE

← Swipe to explore both projects →

TECHNOLOGY

PROBLEM

These projects were built to solve different technical and learning challenges rather than simply recreate static interfaces. The main goal was to understand how modern web applications handle authentication, persistent data, AI integrations, document processing, stateful conversations, animations, and interactive 3D experiences in real applications.

WHAT I BUILT

The main project in this collection is LLaMA, a full-stack AI chat application built with Next.js, MongoDB, OpenRouter, and multiple authentication systems.

Users can create accounts, authenticate using email and password or Google OAuth, create multiple conversations, continue previous chats, and receive context-aware responses from an LLM.

I also implemented PDF-based conversations where users can upload documents, have their contents parsed and stored, and then ask questions about those documents through the AI system.

The second project is a recreation of Apple's MacBook Pro website. It focuses on frontend engineering, responsive UI, GSAP animations, scroll interactions, and interactive 3D models using Three.js and React Three Fiber.

LLaMA — AI CHAT PLATFORM

LLaMA is a production-oriented AI chat platform designed around persistent conversations and context-aware responses. MongoDB is used to store users, conversations, messages, and uploaded document information.

The application uses OpenRouter to communicate with LLaMA-based language models. Conversation history is selectively passed to the model to maintain context while controlling token usage and API costs.

• • Multiple persistent chat sessions
• • Context-aware AI responses
• • Streaming AI responses
• • Chat history and deletion support
• • PDF document question answering
• • Duplicate PDF detection
• • User-specific document storage
• • Daily PDF upload limits

AUTHENTICATION & SECURITY

The authentication system supports both traditional email/password authentication and Google OAuth. Passwords are securely hashed using bcrypt while OTP-based email verification is used during account verification.

• • JWT-based authentication
• • HTTP-only authentication cookies
• • OTP email verification
• • bcrypt password hashing
• • Google OAuth through NextAuth
• • Protected API routes
• • User-specific data isolation
• • Authentication middleware

CHALLENGES

• • Managing conversation context while keeping LLM token usage and API costs under control.
• • Designing MongoDB schemas for users, chats, messages, and uploaded documents.
• • Implementing authentication with both JWT sessions and OAuth.
• • Handling PDF parsing, storage, duplicate detection, and user-specific documents.
• • Working around serverless deployment limitations and file upload restrictions on Vercel.
• • Debugging production issues including large request payload errors and inconsistent API responses.
• • Building smooth scroll-based animations and interactive 3D experiences in the MacBook project.

ARCHITECTURE

LLaMA uses the Next.js App Router with API routes handling authentication, AI requests, chat sessions, and PDF processing. MongoDB provides persistent storage while Mongoose is used for database modeling.

The backend is separated into dedicated API routes for authentication, verification, chat AI requests, PDF uploads, and OAuth authentication.

/app
 ├── api
 │   ├── auth
 │   ├── verify
 │   ├── chatai
 │   ├── upload-pdf
 │   └── auth/[...nextauth]

MACBOOK PRO RECREATION

The MacBook Pro project was built as a frontend-focused recreation of Apple's product website. The project combines React and Vite with GSAP, ScrollTrigger, Three.js, and React Three Fiber.

I recreated the overall visual language of the interface, including the translucent navigation, responsive layouts, text reveals, scroll animations, and interactive 3D MacBook elements.

• • React + Vite application
• • GSAP and ScrollTrigger animations
• • Three.js 3D integration
• • React Three Fiber
• • Responsive Tailwind CSS layouts
• • Scroll-based text reveals
• • Interactive MacBook 3D experience
• • Apple-inspired translucent navigation

KEY FEATURES

• • Full-stack AI chat application
• • Persistent MongoDB conversations
• • Context-aware LLM responses
• • PDF document Q&A
• • Email/password authentication
• • OTP email verification
• • Google OAuth authentication
• • JWT and HTTP-only cookie security
• • OpenRouter LLM integration
• • Token-aware conversation history
• • Responsive modern UI
• • GSAP animations and interactions
• • Three.js and React Three Fiber
• • Interactive 3D product experience

WHAT I LEARNED

These projects helped me move beyond simple frontend applications and understand how production-oriented systems are designed. I gained practical experience with authentication, database modeling, AI APIs, document processing, stateful applications, serverless deployment, debugging, and performance considerations.

The MacBook project additionally helped strengthen my understanding of animation systems, scroll-driven interactions, WebGL, and integrating 3D content into modern React applications.

The LLaMA source code is available on GitHub. Some implementation details may continue to evolve as the project is developed further.