A monorepo containing exercises, challenges, demos and starters for the neue fische web bootcamps. All of the exercises are designed to work locally as well as on CodeSandbox.
- web exercises
A session is a collection of exercises that are used in a specific bootcamp session.
An exercise is any form of exercise, challenge, demo or starter that is used in the web bootcamps.
The folder structure is as follows:
sessions/<session-name>/<exercise-name>
Warning
Avoid nesting exercises in folders below this level. It makes it harder to discover exercises and to update them using tooling.
A template is a folder from which a new exercise can be created but than can also be used as a starter for a new project outside of this repository.
The folder structure is as follows:
templates/<template-name>
Warning
Never edit templates directly. They are created from recipes.
A recipe is used to create (cook) templates. It contains instructions and files that are used by the cook script. If you want to change a template, you have to change its recipe instead.
The folder structure is as follows:
recipes/<recipe-name>
Read more about recipes to learn how to create and edit them.
The branches in this repository follow the following naming convention:
<session-name>_<exercise-name>
Note
You can do multiple exercises in one branch (e.g.demo-startanddemo-end) if it makes sense. Pick a unique branch like<session-name>_demo. Note that thecreatescript will not be able to automatically detect the correct exercise name in that case.
To create a new exercise run the following command:
npm run create
Note
Make sure to run this command from the root of the repository and to runnpm ibefore.
This will ask you for the session name, exercise name and exercise type.
Note
If you follow the branch naming convention (session-name_exercise-name), the create script will automatically detect the session and exercise name from the branch name.
This repository contains templates for most types of exercises.
To make it less cumbersome to create a PR for a new exercise once you're done, you can use the following command that copies all the necessary information to your clipboard. (You have to select the session and exercise folder.)
npm run get-pr
You can obtain a copyable markdown snippet for an exercise by running the following command:
npm run get
Note
You usally don't need this command as the markdown for the curriculum is already included in the PR markdown.
The following types of templates are available.
created via recipes/empty
A template that does not contain any code.
📝 Create a new exercise inside this repository
npm run create → Select type Empty
→ Use this template as a starter
created via recipes/html-css-js
A template that contains HTML, CSS and JavaScript files with jest support. CodeSandbox bundles the code and runs the tests automatically. Locally you can run the tests with npm run test.
📝 Create a new exercise inside this repository
npm run create → Select type HTML, CSS and JavaScript (with Jest support)
→ Use this template as a starter
created via recipes/html-css
A template that contains HTML and CSS files.
📝 Create a new exercise inside this repository
npm run create → Select type HTML and CSS
→ Use this template as a starter
created via recipes/js
A template that contains only JavaScript files with jest support. CodeSandbox bundles the code and runs the tests automatically. Locally you can run the tests with npm run test.
📝 Create a new exercise inside this repository
npm run create → Select type JavaScript (with Jest support)
→ Use this template as a starter
created via recipes/react-minimal
A template that contains a minimal React app. It uses react-scripts but only contains the bare minimum files from Create React App.
📝 Create a new exercise inside this repository
npm run create → Select type Minimal React
→ Use this template as a starter
created via recipes/react
A template from executing create-react-app to create a new React app.1
📝 Create a new exercise inside this repository
npm run create → Select type Create React App
→ Use this template as a starter
created via recipes/next
A template from executing npx create-next-app to create a new Next.js app. Our variant also includes Styled Components, Jest and SVGR.
📝 Create a new exercise inside this repository
npm run create → Select type Next.js (incl. Styled Components and Jest)
→ Use this template as a starter
created via recipes/node-server
A template that contains a Node.js server with Jest support. CodeSandbox runs the tests automatically. Locally you can run the tests with npm run test.
📝 Create a new exercise inside this repository
npm run create → Select type Node.js Server (with Jest support)
→ Use this template as a starter
All exercises must at least contain:
- A
README.mdfile with title and a description how to solve the exercise - A
package.jsonfile with thenamefield that follows the naming convention (session-name_exercise-name)
All exercises must be reviewed before they are merged into the main branch. Create a pull request on GitHub and add the needs review label.
Exercises must be reviewed by at least one neue fische web coach.
Note
Exercises deliberately do not have to have passing tests to be merged. It is also fine to merge exercises with linting errors. Failing tests and linting errors can be part of the exercise itself.
There a two ways to access the exercises or templates:
Open the the folder of the exercise on GitHub. Change the URL from github.com to codesandbox.io/p/sandbox/github. This will open the exercise in CodeSandbox. Select the README.md file and copy the URL directly to this file.
- https://github.com/neuefische/web-exercises/tree/main/sessions/js-array-methods/map
+ https://codesandbox.io/p/sandbox/github/neuefische/web-exercises/tree/main/sessions/js-array-methods/mapThe shareable link you need to copy looks like this:
https://codesandbox.io/p/sandbox/github/neuefische/web-exercises/tree/main/sessions/js-array-methods/map?file=/README.md
Note
While reviewing an exercise, you can share the link pointing to the respective branch. This way exercises can be reviewed on CodeSandbox before they are merged into the main branch.
We are using ghcd (GitHub Clone Directory) which is a tool that "clones" (or rather downloads) a subdirectory of a GitHub repository. You can share the command containing the URL to the exercise folder on GitHub.
npx ghcd@latest neuefische/web-exercises/tree/main/sessions/js-array-methods/map
Note
While reviewing an exercise, you can share the command pointing to the respective branch. This way exercises can be reviewed locally before they are merged into the main branch.
Warning
ghcddoes not support branch names containing slashes.
You can append the -i flag to the command to let ghcd initialize a new git repository in the "cloned" folder. This is recommended for all exercises in from the curriculum after git has been introduced.
To run commands in a workspace of the monorepo (an exercise folder) on your local machine:
- make sure you have run
npm iin the root of this repository cdinto the folder (cd sessions/session-name/exercise-name)- run the script of you choice (
npm run test)
Footnotes
-
An exercise based on
create-react-appmight not be able to build in CodeSandbox. Thecreate-react-appsetup includes the packageweb-vitals. The adblocker browser extension uBlock Origin might block requests to load this package. Please make sure to add the domaincodesandbox.ioand the pattern/.*csb.app.*/to the trusted sites ("Ausnahmeregeln") in the uBlock Origin settings. ↩