CodeMom

Overview

CodeMom is a comprehensive web application developed during HackRU, designed to provide personalized assistance and resources to beginners in coding and computer science. By leveraging natural language processing (NLP) models, the application offers an interactive chatbot that responds to user queries, making learning more accessible and engaging. The project integrates React for a dynamic user interface, Python for backend chatbot logic, and various HTML files to create a holistic educational platform.

Technical Features

• Natural Language Processing: Utilizes NLP models to understand and respond to user queries in a conversational manner.
• React Framework: Implements a dynamic and responsive user interface using React components and state management.
• Backend Integration: Incorporates Python scripts for the chatbot backend, ensuring efficient data processing and accurate responses.
• HTML and CSS Styling: Combines HTML for structuring the web content and CSS for styling to ensure a user-friendly experience.
• Unit Testing: Employs Jest and React Testing Library for rigorous unit testing of React components.
• Performance Measurement: Integrates web-vitals to monitor and improve application performance.
• Progressive Web App (PWA) Support: Includes a web app manifest and service worker setup for offline capabilities and better user experience.

Purpose

The primary goal of CodeMom is to aid beginners in navigating the vast field of coding and computer science. The application serves as a virtual mentor, providing curated resources, interactive tutorials, coding challenges, and personalized career assessments. By simplifying access to valuable information and offering interactive support, CodeMom aims to make learning more approachable and enjoyable for newcomers.

File Structure

• public/: Contains static files such as index.html, favicon.ico, and images.
• src/: Contains the main source code for the React application.
  • App.css: Styles for the App component.
  • App.js: Main App component.
  • App.test.js: Test file for the App component.
  • index.css: Global CSS styles.
  • index.js: Entry point of the React application.
  • logo.svg: React logo used in the App component.
  • reportWebVitals.js: Performance measurement setup.
  • setupTests.js: Jest setup file for custom matchers.
  • chatbot.py: Python script for chatbot functionality.
  • training.py: Python script for training the NLP models used by the chatbot.
  • manifest.json: Metadata for Progressive Web App configuration.
  • robots.txt: Configuration file for web crawlers.
  • Coding.html: HTML file for coding resources.
  • Learning.html: HTML file for learning resources.
  • Survey.html: HTML file for user surveys.
  • index.html: Main HTML template for the web application.