Cadet Frontend

The Source Academy is a gamified platform designed to teach students coding while having fun! This repository in particular houses the source code for the frontend written in ReactJS with Redux.

Features

• Playground to write and test programs
• Built-in Debugger and Visualiser to interact with your programs
• Missions/Quests/Contests to solve challenging problems while learning about programming fundamentals
• Sessions for collaborative programming
• Grading System to test your programs and marking

Getting Started

Installation

1. Install a stable version of NodeJS (tested: Node 10.15.0).
2. Clone this repository and navigate to it using "cd" in your command line or shell tool.
3. Run npm install to install dependencies.
4. Copy the .env.example file as .env and set the necessary variables (refer below for more information)
5. Run npm start to start the server at localhost:8075.

Setting up your environment

The project requires some environment variables to be set to work properly. In the .env file a few things need to be set-up:

1. REACT_APP_LUMINUS_CLIENT_ID : This is needed for the login to work at the moment. Contact the team to obtain one!
2. REACT_APP_USE_BACKEND: Set to false if not running together with the backend. Take note that CORs has to be handled if running with the backend
3. REACT_APP_CHATKIT_INSTANCE_LOCATOR: Set this up if running with chatkit. Its documentation can be found here.

Running the tests

Before pushing to Github, ensure that your code is formatted and your tests are passing. These two commands should help with that:

• npm run format : formats your code
• npm run test: runs the tests and prints the output

Contribution Guidelines

Refer to our issue tracker and contribute to any open issues you are able to spot there. If you have any new issues, please do post there as well. We welcome any form of contribution and are open to any new ideas you may have for the project!

To start contributing, create a fork from our repo and send a PR. Refer to this article for more information.

Application Structure

1. actions contains action creators, one file per reducer, combined in index.
2. assets contains static assets.
3. components contains all react components.
4. containers contains HOC that inject react components with Redux state.
5. mocks contains mock data structures for testing
6. reducers contains all Redux reducers and their state, combined in index.
7. sagas contains all Redux sagas, combined in index.
8. slang contains the source interpreter.
9. styles contains all SCSS styles.
10. utils contains utility modules.

TypeScript Coding Conventions

We reference this guide.

Projects

For more info on specific frontend projects, please consult our wiki.