xsarahyu/gemini-AI-chatbot

🤖💬 Gemini AI Chatbot

👋 Introduction

Welcome to the Gemini AI Chatbot! This application allows users to interact with an AI chatbot using natural language. Built with React, Node, Express, and Gemini (Google's Generative AI), it offers a seamless experience for engaging in conversations with an intelligent virtual assistant.

⭐ Features

🔐 User Authentication: Users can create an account or log in securely using a Google account. Please note that only Google login works currently.
💬 Real-time Messaging: Users can engage in real-time conversations with the AI chatbot, receiving instant responses to their queries.
🤖 AI-powered Responses: The chatbot utilizes Google's Generative AI technology to generate intelligent responses based on user input.
🔒 Secure Communication: All user interactions are encrypted to ensure privacy and security.
🌐 Multi-platform Compatibility: The application is compatible across various platforms, including web browsers and mobile devices.
⚙️ Customizable Settings: Users can personalize their chat experience by adjusting settings such as language preferences and conversation themes.

🖼️ Preview

Landing page

Login page

Messaging page

🚀 Getting Started

Clone the repository: git clone https://github.com/xsarahyu/gemini-AI-chatbot.git
Navigate to the backend directory: cd backend

Create an .env file with your Gemini API information:

clientID={your clientID}
clientSecret={your clientSecret}
secret={your secret}
PORT=8420
geminiKey={your geminiKey}

Install backend dependencies: npm install
Run the backend: node server
Navigate to the frontend directory (in a new terminal): cd app
Install frontend dependencies: npm install
Run the frontend: npm run dev
The app is now live at http://localhost:5173!

🗂️ File Structure

app/src
├── components
│   ├── Footer.jsx
│   ├── LandingPage.jsx
│   ├── LoginPage.jsx
│   ├── MessagesComponent.jsx
│   └── NavBar.jsx
├── App.css
├── App.jsx
├── index.css
└── main.jsx
backend
└── server.js

🧪 Testing

Unit Tests — Using Jest

To run Jest tests locally:

Navigate to the frotnend directory: cd app
Install frontend dependencies: npm install
Run the tests: npm test
You should now see test coverage in your terminal.

👉 Footer component

Test #1: Ensures that the Footer component renders with the text "Resilient Coders".

gemini-AI-chatbot/app/src/components/Footer.test.jsx

Lines 5 to 11 in c8ca1ae

    
           describe('Footer component', () => { 
        
             test('Renders Footer content', () => { 
        
               render(<Footer />) 
        
               const footerContent = screen.getByText(/Resilient Coders/) 
        
               expect(footerContent).toBeInTheDocument() 
        
             }) 
        
           })

👉 LandingPage component

Test #1: Verifies that the LandingPage component renders with the welcome message.

gemini-AI-chatbot/app/src/components/LandingPage.test.jsx

Lines 5 to 11 in c8ca1ae

    
           describe('LandingPage component', () => { 
        
             test('Renders LandingPage content', () => { 
        
               render(<LandingPage />) 
        
               const welcomeContent = screen.getByText(/Welcome to the Resilient Coders AI ChatBot!/i) 
        
               expect(welcomeContent).toBeInTheDocument() 
        
             }) 
        
           })

👉 LoginPage component

Test #1: Ensures that the LoginPage component renders with the username input field.

gemini-AI-chatbot/app/src/components/LoginPage.test.jsx

Lines 17 to 21 in fb21df6

    
           test('Renders username input', () => { 
        
             const { getByTestId } = renderedComponent; 
        
             const username = getByTestId('username'); 
        
             expect(username).toBeInTheDocument(); 
        
           });

Test #2: LoginPage renders with the password input field.

gemini-AI-chatbot/app/src/components/LoginPage.test.jsx

Lines 23 to 27 in fb21df6

    
           test('Renders password input', () => { 
        
             const { getByTestId } = renderedComponent; 
        
             const password = getByTestId('password'); 
        
             expect(password).toBeInTheDocument(); 
        
           });

Test #3: LoginPage renders with the regular login button.

gemini-AI-chatbot/app/src/components/LoginPage.test.jsx

Lines 29 to 33 in fb21df6

    
           test('Renders login button', () => { 
        
             const { getByTestId } = renderedComponent; 
        
             const loginButton = getByTestId('loginButton'); 
        
             expect(loginButton).toBeInTheDocument(); 
        
           });

Test #4: LoginPage renders with the Google login button.

gemini-AI-chatbot/app/src/components/LoginPage.test.jsx

Lines 35 to 39 in fb21df6

    
           test('Renders Google login button', () => { 
        
             const { getByTestId } = renderedComponent; 
        
             const googleLoginButton = getByTestId('googleLoginButton'); 
        
             expect(googleLoginButton).toBeInTheDocument(); 
        
           });

👉 MessagesComponent

Test #1: Simulates entering text into the message input field, clicking the send button, and then verifies that the entered message renders.

gemini-AI-chatbot/app/src/components/MessagesComponent.test.jsx

Lines 7 to 18 in c8ca1ae

    
           test('Renders Message content', () => { 
        
             const { getByTestId, getByText } = render(<MessagesComponent />) 
        
             const inputField = getByTestId('messageInput') 
        
             fireEvent.change(inputField, { target: { value: 'hello' } }) 
        
             const sendButton = getByTestId('submitMessageButton') 
        
             fireEvent.click(sendButton) 
        
             const messageContent = getByText("hello") 
        
             expect(messageContent).toBeInTheDocument() 
        
           }),

Test #2: Ensures that the message input field exists.

gemini-AI-chatbot/app/src/components/MessagesComponent.test.jsx

Lines 20 to 25 in c8ca1ae

    
           test('Message input exists', () => { 
        
             const { getByPlaceholderText } = render(<MessagesComponent />) 
        
             const inputPlaceholder = getByPlaceholderText('Type your message here...') 
        
             expect(inputPlaceholder).toBeInTheDocument() 
        
           }),

Test #3: Confirms the existence of the button to send a message.

gemini-AI-chatbot/app/src/components/MessagesComponent.test.jsx

Lines 27 to 32 in c8ca1ae

    
           test('Button to send message exists', () => { 
        
             const { getByTestId } = render(<MessagesComponent />) 
        
             const submitBtn = getByTestId('submitMessageButton') 
        
             expect(submitBtn).toBeInTheDocument() 
        
           })

👉 NavBar component

Test #1: Verifies that the NavBar renders with the "Home" and "Login" links.

gemini-AI-chatbot/app/src/components/NavBar.test.jsx

Lines 6 to 17 in c8ca1ae

    
           describe('NavBar component', () => { 
        
             test('Renders NavBar', () => { 
        
               const { getByTestId } = render( 
        
                 <BrowserRouter> 
        
                   <NavBar /> 
        
                 </BrowserRouter> 
        
               ) 
        
               const homeLink = getByTestId('homeNavBarButton') 
        
               expect(homeLink).toBeInTheDocument() 
        
             }) 
        
           })

End-to-End Tests — Using Cypress

Make sure that the frontend and backend are running, with all dependencies installed.
Open the Cypress test runner (in a new terminal): cd app ➡️ npx cypress open

The following steps occur in the Cypress test runner:

In the test runner, select "E2E Testing."
You'll be prompted to choose a browser to run the tests in; any is fine.
Cypress will open a new window containing a list of all the end-to-end tests.
Click on a test file to run it.
The selected test will begin execution. You'll see each step being performed in real-time within the Cypress GUI.
If the test passes, the screen will turn green. If it fails, the screen will turn red, indicating which step failed.
To run other test files, navigate back to the main page by selecting the "Specs" label in the sidebar.
From the main page, you can select and run other test files one by one.

👉 login_page

This test suite ensures that the login page can be accessed from the homepage, and checks for the presence of username and password input fields on the login page.

gemini-AI-chatbot/app/cypress/e2e/loginpage.cy.js

Lines 1 to 10 in c8ca1ae

    
           describe('Login Page', () => { 
        
             it('login page can be opened', () => { 
        
               cy.visit('http://localhost:5173') 
        
               cy.contains('Login') 
        
               cy.get('[data-testid=loginNavBarButton]').click() 
        
               cy.url().should('eq', 'http://localhost:5173/login') 
        
               cy.contains('Username').should('exist') 
        
               cy.contains('Password').should('exist') 
        
             }) 
        
           })

👉 messages_page

This test suite ensures that users can navigate to the messages page and post a message. It also verifies that the posted message is displayed on the page.

gemini-AI-chatbot/app/cypress/e2e/messagesPage.cy.js

Lines 1 to 12 in c8ca1ae

    
           describe('Messages Page', () => { 
        
             it('Message page can be opened and a message can be posted', () => { 
        
               const message = 'Test message' 
        
               cy.visit('http://localhost:5173') 
        
               cy.get('[data-testid=loginNavBarButton]').click() 
        
               cy.get('[data-testid=loginButton]').click() 
        
               cy.url().should('eq', 'http://localhost:5173/messages') 
        
               cy.get('[data-testid="messageInput"]').type(message) 
        
               cy.get('[data-testid="submitMessageButton"]').click() 
        
               cy.contains('#postedMessage', message).should('be.visible') 
        
             }) 
        
           })

	describe('Footer component', () => {
	test('Renders Footer content', () => {
	render(<Footer />)
	const footerContent = screen.getByText(/Resilient Coders/)
	expect(footerContent).toBeInTheDocument()
	})
	})

	describe('LandingPage component', () => {
	test('Renders LandingPage content', () => {
	render(<LandingPage />)
	const welcomeContent = screen.getByText(/Welcome to the Resilient Coders AI ChatBot!/i)
	expect(welcomeContent).toBeInTheDocument()
	})
	})

	test('Renders username input', () => {
	const { getByTestId } = renderedComponent;
	const username = getByTestId('username');
	expect(username).toBeInTheDocument();
	});

	test('Renders password input', () => {
	const { getByTestId } = renderedComponent;
	const password = getByTestId('password');
	expect(password).toBeInTheDocument();
	});

	test('Renders login button', () => {
	const { getByTestId } = renderedComponent;
	const loginButton = getByTestId('loginButton');
	expect(loginButton).toBeInTheDocument();
	});

	test('Renders Google login button', () => {
	const { getByTestId } = renderedComponent;
	const googleLoginButton = getByTestId('googleLoginButton');
	expect(googleLoginButton).toBeInTheDocument();
	});

	test('Renders Message content', () => {
	const { getByTestId, getByText } = render(<MessagesComponent />)

	const inputField = getByTestId('messageInput')
	fireEvent.change(inputField, { target: { value: 'hello' } })

	const sendButton = getByTestId('submitMessageButton')
	fireEvent.click(sendButton)

	const messageContent = getByText("hello")
	expect(messageContent).toBeInTheDocument()
	}),

	test('Message input exists', () => {
	const { getByPlaceholderText } = render(<MessagesComponent />)

	const inputPlaceholder = getByPlaceholderText('Type your message here...')
	expect(inputPlaceholder).toBeInTheDocument()
	}),

	test('Button to send message exists', () => {
	const { getByTestId } = render(<MessagesComponent />)

	const submitBtn = getByTestId('submitMessageButton')
	expect(submitBtn).toBeInTheDocument()
	})

	describe('NavBar component', () => {
	test('Renders NavBar', () => {
	const { getByTestId } = render(
	<BrowserRouter>
	<NavBar />
	</BrowserRouter>
	)

	const homeLink = getByTestId('homeNavBarButton')
	expect(homeLink).toBeInTheDocument()
	})
	})

	describe('Login Page', () => {
	it('login page can be opened', () => {
	cy.visit('http://localhost:5173')
	cy.contains('Login')
	cy.get('[data-testid=loginNavBarButton]').click()
	cy.url().should('eq', 'http://localhost:5173/login')
	cy.contains('Username').should('exist')
	cy.contains('Password').should('exist')
	})
	})

	describe('Messages Page', () => {
	it('Message page can be opened and a message can be posted', () => {
	const message = 'Test message'
	cy.visit('http://localhost:5173')
	cy.get('[data-testid=loginNavBarButton]').click()
	cy.get('[data-testid=loginButton]').click()
	cy.url().should('eq', 'http://localhost:5173/messages')
	cy.get('[data-testid="messageInput"]').type(message)
	cy.get('[data-testid="submitMessageButton"]').click()
	cy.contains('#postedMessage', message).should('be.visible')
	})
	})