React_Deliverable.md

React Deliverable

Overview

This deliverable involved using JavaScript and React to build the application's frontend, implementing functionality for a single user, and setting placeholders for future features.

Key Components

• Bundled and Transpiled: Completed using Webpack and Babel to bundle and transpile the React application.
• Components: Created components for login, language selection, exercise display, and feedback to modularize the application.
• Login: Managed transitions to the main learning interface upon successful login using state management.
• Database Integration: Displayed user progress from local storage as a placeholder, with plans to integrate MongoDB.
• WebSocket Simulation: Used setInterval to simulate real-time feedback, mimicking future WebSocket functionality.
• Dynamic Updates: Application logic dynamically updates exercise content based on user selections and performance.
• Router: Implemented React Router for navigation between the login, main interface, and progress report components.
• Hooks: Utilized React hooks for managing state within functional components.

Process

1. Setup: Configured the React environment with Webpack and Babel.
2. Component Creation: Built reusable components for various sections of the app.
3. State Management: Employed hooks like useState and useEffect for state and lifecycle management.
4. Routing: Set up React Router to manage in-app navigation.
5. Simulating Real-Time Updates: Used JavaScript intervals to simulate WebSocket updates until the backend is fully integrated.