Propguard is a Codecademy-style webapp that lets you create and learn from interactive coding tutorials. Client-side only, no servers needed except for hosting instances.
Propguard is a web app built for Missouri S&T's Multirotor Robot Design Team meant to preserve the knowledge and experience of its past members. Propguard teaches new members how to start working on the team's flight code via a Codeacademy-like tutorial interface that includes a simple text editor and basic mock-output.
This app also includes a tutorial editor for creating and editing existing tutorials. In order to make this project client-side only, we use GatbyJS which lets us more easily manage tutorials as JSON files. In order to update tutorials on the live instance, we can just edit the JSON files in src/data
and update the repo.
Continue on if you want to run this locally. Otherwise go here for a quick demo.
For more info on how to use Propguard, reference our user guide.
- NodeJS
- Git
- Yarn
- Clone the repository to a folder of your choosing
git clone https://github.com/MissouriMRR/propguard.git
- Install the required packages for the project
yarn install
- Run the development version of Propguard
yarn start
- Now play around, code, and enjoy!
- Follow the get started section and get your project set up
- Create a new branch for your feature (
git checkout -b feature/my-feature
) - Commit your changes with (
git commit -m "Added my feature which does X"
) - Push the branch to the remote repo (
git push origin feature/my-feature
) - Open a pull request.
- Free feel to contact any member of the Missouri S&T Multirotor Design Team for help!
To deploy the live version/demo with the latest changes from the main branch, clone the repo, yarn install
, and then yarn deploy
.
See the Projects section for more tasks and feature improvements. Otherwise most functionality of Propguard is complete.
Visit here for more information about contributing your own Propguard tutorials.
We'll flesh this out more when we finish the editor!
type Tutorial {
name: String!
description: String!
instructions: [Instruction]
}
type Instruction {
title: String!
hint: String!
output: Output!
content: [InstructionContent]!
solution: String!
}
type InstructionContent {
type: String!
value: String!
}