Chatbot Project Report
Information Technology
Mandakh Amarbold, 21b1num0606
1. Introduction
This report summarizes the work completed within the scope of the project. A chatbot web
application was developed using React, with integration and testing of a MongoDB-based database.
The frontend, backend, and database solutions were successfully implemented throughout the
project.
2. Project Objectives
1. Develop a dynamic, responsive user interface (UI) using React and standard CSS.
2. Create RESTful APIs using Node.js and Express.
3. Store chat history (conversation history) using MongoDB, with testing and implementation in both
local and cloud (MongoDB Atlas) environments.
4. Ensure reliable data transmission and integration.
3. Technological Stack
- Frontend: React, JavaScript, HTML5, CSS3
- Backend: Node.js, Express
- Database: MongoDB (local), MongoDB Atlas (cloud)
- Libraries: Axios (HTTP requests), Mongoose (ODM)
- Others: CORS, dotenv
4. Architecture Overview
[Browser] <--> [React UI (ChatBox, Navbar, Hero, ...)]
<--> [Express API]
<--> [MongoDB: locally & Atlas]
User actions are sent via React components to the API as POST/GET requests, storing and
retrieving data accordingly.
5. Implementation
5.1. Frontend
- ChatBox.js component: Reads user messages, sends them to the server, displays responses.
- Axios usage: Data is retrieved/sent using GET /api/conversations and POST /api/conversations.
- CSS styling: Standard .css files used (responsive).
5.2. Backend
- server.js: Express server setup, JSON parsing, CORS config, environment variable loading (.env).
- Conversation model: Mongoose schema with fields: userMessage, botResponse, timestamp.
- Routes:
- POST /api/conversations: Stores user and bot messages to MongoDB.
- GET /api/conversations: Returns all stored messages.
5.3. Database Integration
- Local MongoDB: Tested with mongod daemon via mongodb://localhost:27017/chatbot_db.
- MongoDB Atlas: Created a cloud cluster, connected via .env file. Verified consistent data handling
in both environments.
6. Testing & Results
- Integration test: Upon sending a message with the "Send" button, the data is stored in the
database (local and Atlas) and retrieved successfully.
8. Future Work
1. AI integration: Use OpenAI or another AI model to generate actual responses.
2. UI enhancements: Improve message flow visuals and add animations.
9. Conclusion
This project successfully integrated React UI, Express API, and MongoDB database architectures. It
was tested and confirmed to work reliably both locally and in the cloud (MongoDB Atlas). The
system is now ready for further developments like AI API integration, user management, and more.
Prepared by: Mandakh Amarbold
Date: 2025-05-07