Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
March 31, 2023 17:18
August 3, 2020 21:43
April 27, 2021 07:00
December 20, 2021 20:17
March 31, 2023 17:18 social banner's open-source codebase and curriculum 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

; Custom config dirs

; Used only when developing locally
  1. Run yarn dev:client. This will run only the FrontEnd locally and connect you to the development server.
  2. 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

; Custom config dirs


; DB




; Used only when developing locally

Then provision the DB (see next step) and run the local server using yarn dev. Get in touch with us for more details at

Provisioning (WIP)

If you wanna fully run the app on your local machine, you'll have to provision a MongoDB database yourself.

Have a look at the server/_provisioning folder. It's still work in progress, but you'll find there some scripts which will make it easier to insert data in bulk, for your local environment.

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.


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:

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).


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.


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

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

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

Twitter | Facebook