The project aims to create a standalone frontend chatbot app and connect it to a Python Flask backend via REST API for users to interact with the chatbot. The frontend will use Vite, React, HTML, CSS, and Tailwind CSS technologies. Users can ask questions and receive responses asynchronously without the need for page refresh. Additional features can be added to the chatbot based on needs. The backend of this project utilizes Python Flask to create a REST API endpoint, which can be found in this repository.
The live site can be accessed here
Clone the project
git clone https://github.com/ndrvndr/chatbot-app.git
Go to the project directory
cd chatbot-app
code .
Install dependencies
npm install
Start the server
npm run dev
To run this project, you will need to add the following environment variables to your .env file.
VITE_ENDPOINT
is obtained after running the flask app with the python app.py command
To obtain these environment variables, you will need to create a Firebase project and obtain the necessary credentials.
VITE_API_KEY
VITE_AUTH_DOMAIN
VITE_APP_DATABASE_URL
VITE_PROJECT_ID
VITE_STORAGE_BUCKET
VITE_MESSAGING_SENDER_ID
VITE_APP_ID
VITE_MEASUREMENT_ID
Those environment variables are part of the Firebase configuration.
Client: Vite+React, TailwindCSS
Server: Python, Flask
The typing status component was built using code from https://github.com/hitchcliff/front-end-chatjs to get the typing animation effect.
Send button and forms use components from uiverse.io | Send Button | Forms
Dialog components created using headlessui.com and design inspired by Aether Design System. See the repository here
Disclosure components created using headlessui.com
If you have any feedback, please contact me at [email protected]