daniel3830 / Capstone-Project

Application to Learn Chinese Characters

Capstone Project: AI Assisted Learning

Run the code

The application is entirely a frontend application, as such it requires being run on a computer with a web browser (Chrome or Firefox).

From there, cd into build folder from the terminal and run a simple http server

Python 2: python -m SimpleHTTPServer 8080

Python 3: python3 -m http.server

Then, open Chrome and go to localhost:8080.

Build the project

If instead you wish to build the code, you need the to install the following:

1. NodeJS
2. create-react-app
3. Run npm start from project root
4. If 3) doesn't work immediately, you may have to first run npm install to install the node packages

For 2) You can simply run: npm install -g create-react-app to install create-react-app

Running npm start will allow you to open http://localhost:3000 and see the app running there. You can build the HTML file with npm run build.

Code Structure

This project is written using ReactJS with the create-react-app tool. This tool creates a basic application skeleton, as well as a way to run and build a project immediately.

The main code for the project is found under the src directory. The main code of interest is under src/lib/chinese.js. This file contains the main functions that enable text-to-speech and speech-to-text.

The rest of the src folder is reserved for React components. A React UI component tends to have a .js file, the behavior, and a .css file, the styling. The application starts at index.js and just displays the main App component.

Note that files like registerServiceWorker.js are generated by create-react-app.