This AI chatbot was built with three main goals in mind:

✅Showcase my skills in building scalable frontend applications.

✅Boost productivity by creating a tool that saves time.

✅Extend our business (Dimasc) with a smart chatbot feature under a subdomain.

✨ Although this is the MVC version, the application has much bigger potential. We're planning to integrate a custom V0 API, Supabase, and GitHub templates to create components, boilerplates, and configurations that allow us to start new projects with a solid base—skipping boring boilerplate code and jumping straight into the core functionality.

🏗️ Development Insights:

👨‍💻 Frontend (by Alexandru Geroc):

✅Built using Next.js, TypeScript, and Tailwind CSS 4.0.

✅Focused heavily on code quality, performance, and scalability.

✅I adopted an architecture that's suitable for large-scale SaaS apps, even if this chatbot is just one small part of Dimasc.

💡 Technical Decisions:

✅React Query for data fetching — reduces boilerplate, improves speed, and keeps the code clean.

✅Zustand for state management — lightweight, scalable, and easy to set up.

✅React Hook Form for form validation — highly structured and easy to read.

✅Next.js Route Groups (like (foldername)) used to isolate layouts and keep layout.tsx files clean and purpose-specific.

📁 Folder Structure:

- The project uses the src directory to keep everything organized:

- src/

├── app/

├── components/

├── context/

├── data/

├── hooks/

├── lib/

├── stores/

├── types/

- Each part of the codebase has a clear responsibility—for example, separate files for mutations, queries, contexts, and stores. This structure helps developers understand and navigate the project quickly.

✨ Features:

✅Authentication:

-Sign-In (MFA (Multi-Factor Authentication))

-Sign-Up (3-Step Process)

-Forgot Password (Multi-Step Recovery)

✅Chat Interface:

-Dynamic Chat Rendering

-Search Functionality

-Edit Chat Title

-Delete Chat

-Create New Chat

-Auto-generated Chat Titles

✅User Settings:

-Change Email (with MFA)

-Change Password

-Theme Selector

✅Other:

-Log Out

-Secured Routes via Middleware

💻 Technologies:

✅Next.js

✅React

✅TypeScript

✅Tailwind CSS 4.0

✅Vercel

✅React Query

🤝 Collaborators:

👨‍💻 Frontend (by Alexandru Geroc)

👨‍💻 Backend (by Sebastian Flavius)