Educabile Website

Table of Contents

1. Overview
2. Versions
3. Linters
4. IDE
5. Installation and Setup
6. Environment variables
7. Testing
8. Commit Guidelines

---

Overview

This website is being built with React.js and React-Materialize.

---

Linters

To enforce a consistent style across the entire project we are using Prettier.

We are also using ESLint to catch bugs and syntax errors during development and stylelint for CSS linting.

We run Prettier,ESLint and stylelint before each commit thanks to Husky, so that you can focus on what matter the most : writing code.

We automatically generate WebP images and different size for each assets you add, thanks to sharp

You should not manually add references to WebP images in the CSS as we insert them during the build phase of the project.

Please, note that you will not be able to commit/push any changes you made if your code doesn't pass any of the linting stage described above.

In that case check your git-log and fix any problem reported there.

Also note that by default ESLint and stylelint will try to fix any problems they can fix by themseves.

They will bother you only for changes they can't fix.

All of the above assure us that our code base is always consistent with the rules we are using and bug free as much as possible.

---

Versions

• React: 16.5.2
• React Materialize: 2.4.5

---

IDE

We highly encourage you to use Visual Studio Code as your IDE.

If you use another IDE we provide you a .editorconfig file, please check your IDE compatibility here.

If you use Visual Studio Code you should download Settings Sync.

Please refer to Settings Sync documentantion and download the following settings: b5b90af7638c5e03fee4347f577bb6fb.

---

Installation and setup

Note: You first have to download and install yarn

Run this commands to download and install the required packages

   yarn

Start local development

   yarn start

---

Environment variables

This app requires you to create .env, .env.production and .env.staging files in the root directory of the project for it to properly works.

You can duplicate and rename .env.schema into .env and fill ALL the variables with the right values.

You should contact us for .env.production and .env.staging files and for .env values.

Override settings

It is possible to override any global settings by creating a file called .env.local and copy the configuration values from .env file.

---

Testing

We are using Jest and Enzyme to test our components.

We also adopt Storybook as our UI Development Environment.

---

Commit Guidelines

We follow the Angular Commit Guidelines.

Refer to their documentation for more information.

Note: If you DON'T follow the Angular Commit Guidelines you will not be able to commit your changes.