Your language model by Viniski

🚀 Live Demo:
https://your-language-model-sfn4.vercel.app/
Experience the app in action here!

Test profile:
E-mail: xajefad682@sfxeur.com
Password: CGEVo8sVWeHzLIN

This application is a chat platform powered by OpenAI's gpt-4o-mini language model, offering conversational features. It includes user authentication and profile management through Supabase, allowing login, registration, and easy updates to personal details, password, and email address.

📃 Features

• Real-time Chat with GPT-4o-Mini Model: Interactive chat with the GPT-4o-Mini language model in real-time.
• Chat History Persistence: Chats are saved when navigating between pages.
• Create New Chat: Users can initiate new chats at any time.
• Multi-language Support: Supports two languages: Polish and English, auto-adapting to the browser’s language or the user’s selected language in profile settings.
• Email Registration with Verification: User registration with email verification, powered by Supabase.
• Login: Secure login functionality through Supabase authentication.
• Forgotten Password Reset: Password reset process managed by Supabase with email instructions.
• User Details Editing: Ability to update user details.
• Password and Email Change: Logged-in users can change their password and email with email verification.
• YouTube Videos: Display a YouTube video on writing better prompts in both language versions.
• Fully Responsive Mobile Version: A fully optimized mobile version for seamless usage across devices.

🔧 Technical Overview

Technologies & Libraries Used:

Frontend:

• React: A JavaScript library for building user interfaces.
• TypeScript: For static typing and improved code quality.
• React Router DOM: For handling routing and navigation between pages.
• Material UI: A React component library for building UI with pre-designed components.
• Tailwind CSS: A utility-first CSS framework for custom styling.
• React Query: A data-fetching library used to handle the API calls and cache management.
• React Hook Form: A form handling library to manage form data and validation.
• React Intl: For internationalization and localization support.
• Zustand: A lightweight and flexible state management library for React applications.
• Notistack: A notification library for displaying messages (success, error, info) to the user.

Backend & API Integration:

• Supabase: Used for user authentication, registration, login, as well as password and email management. It also handles the database to store and edit user profiles.
• OpenAI API: Integration with OpenAI's gpt-4o-mini language model to generate chat responses.

Development & Build Tools:

• Vite: A fast and lightweight build tool for modern web projects.
• ESLint & Prettier: For linting and formatting code to maintain code quality and consistency.
• Vitest: A fast unit testing framework for testing React components and APIs.
• Husky & Lint-staged: For running linters and formatters on staged files before commits.
• Tailwind Merge: A utility for merging conflicting Tailwind CSS class names.
• Zod: A TypeScript-first schema declaration and validation library.

💻 Screenshot

Dashboard - chat

Login

Register

Profile

Email

Dashboard - youtube

Dashboard chat (mobile)

Nav (mobile)

Profile (mobile)

If you want running on your computer:

npm install
npm run dev

📃 License

This project is licensed under the MIT License. All photos and images are the property of Pinterest.com.