https://github.com/itaditya/workshop-platform
A platform to have code workshops
https://github.com/itaditya/workshop-platform
Last synced: over 1 year ago
JSON representation
A platform to have code workshops
- Host: GitHub
- URL: https://github.com/itaditya/workshop-platform
- Owner: itaditya
- License: mit
- Created: 2020-11-10T14:08:41.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T16:10:41.000Z (over 3 years ago)
- Last Synced: 2025-02-28T09:21:01.734Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://workshop-platform.netlify.app/exercises/exercise-1
- Size: 1.87 MB
- Stars: 30
- Watchers: 1
- Forks: 6
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Workshop Platform
People understand new things when they "learn by doing". Its time our courses and **workshops** start reflecting that. Make exercises where you ask learners to build something. Then add helpful notes and your version so they try first and see what they missed.
## Quick Start
[](https://codesandbox.io/s/github/itaditya/workshop-platform?file=/src/pages/exercises/exercise-1/playground.js)
## Advanced Setup
Fork and clone this repo and then do the following-
1. Install dependencies-
```sh
yarn install
```
2. Start frontend & server in **separate terminals**.
```sh
# Tab 1
yarn dev
# Tab 2
yarn server
```
Open the project on `http://localhost:3000/exercises/exercise-1`.
### For learners
If you want to solve Exercise 1 then open `src/pages/exercises/exercise-1/playground.js`. When you edit the component it should update in the browser in real time.
In the browser you can see the notes on the right-hand side. You can see the tutor's solution by switching tabs. Their code will be present in the `challenge.js` alongside your file.
**Ask Assistant for help**
Running `yarn assistant` can inform you about the common issues in your `playground.js` code. If you use a modern editor like VS Code then it will show squiggly lines below the problematic code as well.
**Get your code evaluated**
Running `yarn evaluate` will test if your code satisfies all the requirements of the challenge. By running `yarn evaluate --watch` you can re-evaluate automatically as soon as you change some code in `playground.js`.
### For Tutors
Exercise lives in folder `src/pages/exercises/exercise-1`. For each exercise you need to add notes in `notes.mdx` and the challenge in `challenge.js`.
**Create new exercise with**
```sh
yarn create-exercise
```
**Create evaluator tests**
You can also add an evaluator for each exercise like we do in `src/exercise-tests` folder. Run it with `yarn test-challenges`.
**Use JSON APIs**
Many challenges go along the lines of - fetch list of blog posts from an API, show the data in UI. For that there is a ready-made API server with various collections. Run it with `yarn server`.
Under the hood it uses `json-server` package so you can GET requests with pagination, filter and relations support.
* [Example Request](https://workshop-platform.netlify.app/.netlify/functions/api/users?_limit=3)
* [Documentation on API parameters](https://github.com/typicode/json-server#routes)
Available resources
```
http://localhost:9191/gallery
http://localhost:9191/products
http://localhost:9191/users
http://localhost:9191/tweets
http://localhost:9191/posts
```
You can also do mutations like POST request which would keep the side-effects in memory till the server is running.
**Lint Code**
Lint your challenges with `yarn lint-challenges`