Mad Devs develops enterprise-level custom software solutions & mobile apps for finance, transportation, logistics, security, edtech, cloudtech & advertising industries.

• ⚡️ Quick start
• ⚙️ Project overview
• 💼️ Environment variables
• ✍️ Code review
• 🚀 Deploy
• 🚓 Testing
• ✨ Linting
• 🐺 Snyk
• 😎 AWS S3
• 🏳️ Feature Flags
• 🔥 SEO-Analyzer
• 🗄 Prismic
• 👐 Additional docs

To start the project you need to do the following steps:

1. Install dependencies

$ npm install

2. Run the project in development mode

$ npm run dev

3. The application is available on localhost:3000

For detailed explanation on how things work, checkout the Nuxt.js docs.

A list of main technologies that we use for build our application

A list of additional tools that we use for make our codebase better

.
├── README.md
├── Procfile - heroku config file
├── package-lock.json
├── package.json
├── nuxt.config.js - nuxt config
├── nodemon.json - nodemon config
├── jsconfig.json
├── Dockerfile
├── cypress.json - cypress config
├── babel.config.js - babel config
├── .snyk - snyk policy file
├── .sass-lint.yml - sass-lint config
├── .gitignore
├── .eslintrc - eslint config
├── .eslintignore
├── .env.example
├── .editorconfig
├── .dockerignore
├── utils - core utils
├── tests - all unit-tests
├── server - server code
├── SEOAnalyzer - app for analytze SEO errors
├── jest - jest configurations
├── docs - additional docs
├── client - main source folder
│   ├── api - api requests
│   ├── app - ?
│   ├── assets
│   ├── components
│   ├── data - static data
│   ├── directives
│   ├── featureFlags - featureFlags logic
│   ├── helpers
│   ├── layouts
│   ├── locales
│   ├── mixins
│   ├── pages
│   ├── plugins
│   ├── prismicSlices - libraries of shared slices for prismic dashboard
│   ├── static
│   ├── store - vuex

A list of environment variables that needed to start the project(required)

All of these variables must be added to the Heroku hosting or an any others

Without these variables the application will not work correctly

We're have a special "Code Review Regulation" document that help us to review our code more better and professional. Before start working with our team you need to read the document.

• "Code review regulation"- english version
• "Code review regulation"- russian version

To send changes to the staging server, you should merge your branch to the staging branch

To send changes to the staging server, you should merge staging branch into master branch

We're using some tools for linting our code - ESLint, Sass-Lint

Snyk is a tool for find and fix security vulnerabilities

Amazon S3 is used to store video files and pictures of the site.

Official Documentation

You may install awscli using apt or brew

sudo apt install awscli

or download zip bundle

curl "https://s3.amazonaws.com/aws-cli/awscli-bundle.zip" -o "awscli-bundle.zip" \&& unzip awscli-bundle.zip \&& sudo ./awscli-bundle/install -i /usr/local/aws -b /usr/local/bin/aws \&& rm -rf awscli-bundle*

The result should be

aws --version
aws-cli/2.3.6

The current AWS Access Key ID and AWS Secret Access Key can be requested from the team.

aws configure

AWS will ask for the keys to specify the settings

AWS Access Key ID: Key
AWS Secret Access Key: Key
Default region name: us-west-1
Default output format: json

Or just export the keys, in which case the access will only be in the terminal where the export is made.

export AWS_ACCESS_KEY_ID="key"

export AWS_SECRET_ACCESS_KEY="key"

It remains to update the environment variable and run the site.

In the root of the project should be a file .env, where you insert the variable NODE_S3_PUBLIC_URL

This variable must contain the url, which will be used to access s3 files.

The link through which we will get pictures and videos https://d6xkme6dcvajw.cloudfront.net/

We're used feature-flags for display/hide some features on different environments.

For create a new feature flag, you need to open @/featureFlags/config.js file and add your flag into config with the following syntax:

export const config = {
  myFeatureFlag: ["development", "staging"]
};

The name of your feature flag should be key in the config. Environments where your flag should return true should be value of your flag. It's an array of environments. At the moment we have 3 available environments:

• development - for local development
• staging - for staging(maddevs.co)
• production - for production(maddevs.io)

The better option. You can simple use your feature-flag in the templates using globally registered component. Example:

<Feature flag="myFeatureFlag">Some content</Feature>

Also you can use global method in your template:

<div v-if="featureFlag('myFeatureFlag')">Some content</div>

or in the component's code:

export default {
  methods: {
    send() {
      if (featureFlag("myFeatureFlag")) {
        // ...do something
      }
    }
  }
};

For create a new feature flag for pages, you need to open router.config.js file and add your flag into config with the following syntax:

export const routerConfig = [
  {
    path: "/",
    development: true,
    staging: true,
    production: false
  }
];

Then, if a page is unavailable in one of the environments, the page will be removed from the sitemap and a redirect to page 404 will be configured for it.

BEM (Block, Element, Modifier) is a component-based approach to web development.

For BEM, I advise you to use the following:

1. "block" - for naming blocks (A functionally independent page component that can be reused. In HTML, blocks are represented by the class attribute. Features:

The block name describes its purpose ("What is it?" — menu or button), not its state ("What does it look like?" — red or big).

Example

<!-- Correct. The `error` block is semantically meaningful -->
<div class="error"></div>

<!-- Incorrect. It describes the appearance -->
<div class="red-text"></div>

The block shouldn't influence its environment, meaning you shouldn't set the external geometry (margin) or positioning for the block. You also shouldn't use CSS tag or ID selectors when using BEM.

2. "block**element" - ** for naming elements A composite part of a block that can't be used separately from it.

Features:

The element name describes its purpose ("What is this?" — item, text, etc.), not its state ("What type, or what does it look like?" — red, big, etc.).

The structure of an element's full name is block-nameelement-name. The element name is separated from the block name with a double underscore ().

Example

<!-- `search-form` block -->
<form class="search-form">
    <!-- `input` element in the `search-form` block -->
    <input class="search-form__input"/>

    <!-- `button` element in the `search-form` block -->
    <button class="search-form__button">Search</button>
</form>

3. "block block - modifier" - --modifier for naming modifiers, while the main class of the block/element must be An entity that defines the appearance, state, or behavior of a block or element.

Features:

The modifier name describes its appearance ("What size?" or "Which theme?" and so on — size_s or theme_islands), its state ("How is it different from the others?" — disabled, focused, etc.) and its behavior ("How does it behave?" or "How does it respond to the user?" — such as directions_left-top).

The modifier name is separated from the block or element name by a single underscore (_).

Let's not use:

• "h2" or "> p" tag selectors
• minimum nesting through "/deep/"
• incorrect BEM naming conventions: "block_element" or "block_modifier"

For a detailed study of BEM, visit the website: https://en.bem.info/

Github action for checks for errors in the html DOM

To run an analyzer you need to execute the following command:

npm run seo-analyze

If you have some problems with SEO you will be notified about that in the console:

████████████████████████████████████████ 100% | ETA: 0s | 233/233

File: dist/clients/case-studies/namba-food/index.html
SEO defects found:
There are 1 <img> tag without alt attribute

Otherwise, you should get success result:

 ████████████████████████████████████████ 100% | ETA: 0s | 233/233

 No any SEO defect found.

Slice machine dev tools are used to develop and push slices to prismic dashboard.

• Configuration of the slice machine dev tools in the project

The main folder for developing slices is located in the following path - client/prismicSlices.
Slices can be divided into categories(libraries) by creating different folders for them inside the client/prismicSlices folder and adding the path to this folders to the sm.json config file.

To develop slices you need to install globally the prismic-cli

npm install -g prismic-cli

After installation you need login to prismic

prismic login

After login you need to run the slices builder dashboard: localhost:9999

npm run slicemachine

or

prismic sm --develop

Also you need to run the storybook dashboard in other terminal: localhost:3003

npm run storybook

Create a new slice in the slices builder dashboard

Edit code of created slice in the project filesystem

Push created slice to prismic from slices builder dashboard

How to remove link from sitemap.xml