/UI-Assignment

This project is a frontend application aimed at replicating the user interface (UI) of ChatGPT, including a login page and a chat interface. It serves as an assessment of frontend development skills in HTML, CSS, and JavaScript, with framework React.

Primary LanguageJavaScript

ChatGPT UI Clone

Introduction

This project is a frontend application aimed at replicating the user interface (UI) of ChatGPT, including a login page and a chat interface. It serves as an assessment of frontend development skills in HTML, CSS, and JavaScript, with framework React.

Features

  1. Login Page:

    • Simple and clean design with a logo, email input field, password input field, and a submit button.
    • Responsive to different screen sizes.
    • Sign up link for new users. Screenshot 2024-04-22 031520

  2. Chat Interface: Screenshot 2024-04-22 031947

    • Header with logo and logout button.
    • Main chat area for messages.
    • Footer with text input field and send button.
    • Automatic reply from a model user after each user message.

  3. Functionality:

    • Front-end validation for login form.
    • Typing and sending messages.
    • Automatic scrolling to the latest message. Screenshot 2024-04-22 035017

  4. Tech Stack:

    • React.js
    • Chakra UI
    • react-icons

  5. Extra Features :

    • Form validation
      Screenshot 2024-04-22 032334 Screenshot 2024-04-22 032843
    • Sending messages with the "Enter" key.
    • Responsive design enhancements. Screenshot 2024-04-22 154052

Usage

  1. Clone the repository:

    git clone https://github.com/VishvendraTomar/UI-Assignment

  2. Navigate to the project directory:

    cd UI-Assignment

  3. Install dependencies using npm install.

  4. Start the development server using npm run dev.

Credits

This project was developed by [Vishvendra Tomar].