FrontEnd.ro's open-source codebase and curriculum

FrontEnd.ro is an open-source & community driven initiative to teach FrontEnd development. Read more on the website and please share the news ^^^

---

Install & Run

1. Install all the dependencies by running yarn in the root folder.
2. Create a .env file in root and fill in the following content

; Environment based config
NODE_CONFIG_ENV=local-client

; Custom config dirs
NODE_CONFIG_DIR=server/config

; Used only when developing locally
NODE_ENV=development

3. Run yarn dev:client. This will run only the FrontEnd locally and connect you to the development server.
4. If you want to do server-side work you're gonna need to run the server and MongoDB on your local machine as well. For this to happen you're gonna need to add the following variables inside .env:

; Environment based config
NODE_CONFIG_ENV=local-both

; Custom config dirs
NODE_CONFIG_DIR=server/config

; AUTH
TOKEN_SECRET=

; DB
DB_CONNECT=

; AWS
AWS_BUCKET=

; EMAIL
EMAIL_TOKEN=

; GITHUB
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

; Used only when developing locally
NODE_ENV=development

Then run the local server using yarn dev. Get in touch with us for more details.

Database Dump, Restore and Backup

To reduce costs we're currently doing manual dumps and backup of our MongoDB database.

Dump & Restore

We're using the MongoDB Database Tools, specifically mongodump and mongorestore.

We have 2 NPM scripts

yarn mongodump
yarn mongorestore

that we use for dump/restore. We "hook" into the same .env file to get the DB_CONNECT string and the MONGODB_DUMP_DIR.

Both of them assume that MongoDB Tools is already installed. Have a look here for instructions depending on your OS.

Backup

For backup we're storing the dumps on AWS S3 by using the AWS Cli v2.

We have an NPM script that reads from .env and calls a specific cli command.

yarn upload-mongodump-s3

This doesn't work unless you're authenticated into AWS Cli with a pair Access key ID / Secret access key that has Write permission to our S3 bucket.

Monaco Editor

NextJS is incompatible with the default way of loading monaco-editor (via Webpack and monaco-editor-webpack-plugin). It fails when monaco tries to load it's CSS from node_modules: https://nextjs.org/docs/messages/css-npm.

All solutions to this meant adding very custom code to our Webpack Config, which we worry it might break in the future or negatively interact with other packages.

Thus, the solution we went for is to load monaco-editor from a CDN (cloudfront) with the <script> tag. We feel this "old-school" way is less error-prone than custom modifications to the webpack config. And, to get minimize manual work we created the monacoEditorCDN.yml GitHub action which will upload the files on every push (if they are not there).

License

This project has a dual-licence split between the source code of the UI components used and the curriculum content.

The source code of the UI components is licensed under MIT.

The curriculum belongs to our contributors and is licensed under Attribution-ShareAlike 4.0 International. You're free to use it if you're teaching these topics as long as you provide attribution to the writer/owner.

Contributors

This project wouldn't be possible without our awesome contributors. Thank you >:D<

Alexandru Păvăloi	Diana Toma	Cătălin Popușoi	Marian Morosac
Cristian Gațu	Sebastian Latkolic	Nicolae Matieș	Daniel Huțanu
Swarup Kumar Das	Ira Melnic	Narcis Lazar

If you wanna lend a helping hand, get in touch with us and let's build this together!

---

Twitter | Facebook