Run ClassTranscribe Frontend (Frontend Only, No Docker)

If you only want to work on the Frontend and have a low powered laptop (or don't want to use Docker), you can develop the frontend website just using Node.js and yarn.

Coding Environment

Visual Studio Code is highly recommended for beginners to write Javascript and execute git commands. (Working with Javascript, Working with Git) After downloading the VS Code, go to the Extension Tab on the sidebar. You can install many useful extensions for frontend development:

• Docker - The Docker extension makes it easy to build, manage and deploy containerized applications from Visual Studio Code.
• React/Redux/GraphQL/React-Native snippets - This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.
• HTML Snippets - This extension adds rich language support for the HTML Markup to VS Code.
• GitLens - GitLens supercharges the Git capabilities built into Visual Studio Code.

Installation

Please go through each of the following steps to set up the front-end locally.

1. Install Node Version manager Here's some instructions installation on Windows,Linux and OSX].

2. Use nvm to select node version 14

nvm install 14
nvm use 14
node -v

3. Install yarn.

4. Clone FrontEnd to your machine, and enter the repo

$ git clone https://github.com/classtranscribe/FrontEnd.git && cd FrontEnd

5. Use yarn to install Node.js dependencies.

$ yarn install

6. Change the backend address (Optional). Type yarn backend -h for help.

$ yarn backend --dev

7. Run the app at localhost:3000 This will take a while (a minute or so) initially but is much faster when you make a change

$ yarn start

Next steps

Now as you edit the frontend code it will automatically rebuild and reload the app in your browser. In the development server you can use the test user to login.

For more details about the existing frontend structure and components, see Front-End Structure