297 words
1 minute
Chatbot App with NextJS

Try it out#

lacser
/
illico
Waiting for api.github.com...
00K
0K
0K
Waiting...

An online deployment is available at https://illico.nuvraine.com/ AI functions are unavailable in this deployment due to security considerations.

Highlights#

Account & Cloud Sync#

Implemented secure account management, cloud-synchronized chat histories, and third-party LLM API proxying using MongoDB and Next.js server-side capabilities.

Polished UI/UX Design#

Built an intuitive and visually consistent interface following Google Material Design principles, featuring global color management, dark-mode support, responsive layouts, and thoughtful details across animations, colors, and shadows.

Continuous Deployment#

Achieved seamless CI/CD using GitHub Actions and Vercel multi-environment deployments, enabling automated builds, continuous delivery, and zero-downtime maintenance.

My learnings#

  • Backend & Database Development: As my first full-stack application, this project taught me how to build backend API endpoints with Node.js, securely connect to a database, validate functionality using Postman, and integrate the frontend, backend, and database through Next.js.

  • UI Design: Gained experience in managing global UI colors and design tokens within index.css, strengthened my ability to create unified, visually appealing, theme-switchable, and maintainable user interfaces.

Areas for Improvement#

  • Backend Architecture & Data Flow: The current backend logic has several structural issues. For example, after receiving a response from the LLM, the frontend sends an additional HTTP request to store the message in the cloud. A more robust design would delegate the entire persistence flow to the backend, ensuring cleaner separation of concerns and reducing client-side complexity.

  • Security: Although the application includes basic account management, it lacks production-critical safeguards such as email/phone verification to prevent mass malicious registrations, as well as rate limits or user quota controls for chat usage. These features are essential for a secure, production-ready system.

  • Functionality: Due to time constraints, several important features remain unimplemented, including chat history search, answer regeneration, and branching conversations.

App Screenshot#

Dark Mode Support#

Demo image for dark mode support

Streamed Responses#

Demo image for streamed responses

Responsive Design#

Demo image for responsive design

Message Edit#

Demo image for message edit

Registration Page#

Demo image for registration