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
- ✨ Linting
- 🐺 Snyk
- 😎 AWS S3
- 🗄 Prismic
To start the project you need to do the following steps:
- Install dependencies
$ npm install- Run the project in development mode
$ npm run dev- Run the project in production mode
$ npm run build- After build you need to launch the project
$ npm run start- The application is available on localhost:3000
6To improve the application's performance, it is better to run it from the local domain
maddevs.devtest:3000. From this domain forms' requests work.
For detailed explanation on how things work, checkout the Nuxt 3 docs.
A list of main technologies that we use for build our application
| Technology | Version | Description |
|---|---|---|
| Node | 18.x | For the correct launch of the project, use this version of the node |
| Vue | ^3.3.8 | Progressive framework for building a modern user interfaces |
| Nuxt | ^3.10.1 | Server-side rendering framework for VueJS |
| Axios | ^1.6.5 | Promise based HTTP client for the browser and node.js |
| Nitro | ^2.9.3 | Web-framework for nodeJS |
| Prismic | ^3.1.0 | Content-Management system |
| slice-machine-ui | ^1.25.0 | Slice Machine transforms the way you code reusable components and lets you deliver them directly to marketers in a custom page builder using Prismic. |
| Lottie-web | ^5.12.2 | The mobile library for Web animations |
| AWS S3 SDK | ^3.511.0 | AWS SDK for JavaScript S3 Client for Node.js, Browser and React Native. |
| Pinia | ^2.1.7 | Intuitive, type safe and flexible Store for Vue |
| mitt | ^3.0.1 | Tiny 200b functional event emitter / pubsub. |
| sendpulse-api | ^1.1.6 | A simple SendPulse REST client library and example for Node.js. API Documentation |
| nuxt-swiper | ^1.2.2 | Swiper component for Nuxt.js |
| vue-recaptcha | ^2.0.3 | A simple Vue.js component for easy integration with Google reCAPTCHA v2 and v3. |
A list of additional tools that we use for make our codebase better
| Technology | Version | Description |
|---|---|---|
| ESLint | ^8.56.0 | Pluggable JavaScript linter |
| Sentry | ^7.106.1 | Application monitoring and error tracking |
| Snyk | ^1.1283.1 | Tool for find and fix security vulnerabilities |
A list of tools that we use for users' tracking and analytics
| Technology | Version | Description |
|---|---|---|
| Smartlook | Smartlook is a qualitative analytics solution for web and mobile apps | |
| GA4 | Google Analytics 4 |
.
├── README.md
├── package-lock.json
├── package.json
├── nuxt.config.ts - nuxt config
├── tsconfig.json
├── Dockerfile
├── .snyk - snyk policy file
├── .sass-lint.yml - sass-lint config
├── .gitignore
├── .eslintrc - eslint config
├── .eslintignore
├── .editorconfig
├── .dockerignore
├── utils - core utils
├── server - server code
├── assets - app media data
├── components - components, widgets, shared and etc.
├── pages - app pages
├── plugins - app plugins
├── prismicSlices - libraries of shared slices for prismic dashboard
├── public - public static app media data
├── store - Pinia
├── composables - reusable functions
├── interfaces - global shared interfaces
├── SEO - SEO data
A list of environment variables that needed to start the project(required)
| NAME | DESCRIPTION |
|---|---|
| NODE_SENDPULSE_API_USER_ID | Sendpulse api user id |
| NODE_SENDPULSE_API_KEY | Sendpulse api key |
| NODE_SENDPULSE__FEEDBACK_TEMPLAT | Sendpulse feedback template id for form on rumor managment page |
| NODE_SENDPULSE_ADDRESSBOOKS_ID | Sendpulse address book id |
| NODE_EMAIL_HR | Email to send messages(cv) to HR department |
| NODE_EMAIL_CONTACT | Email to send messages(from leads) to DM department |
| NODE_EMAIL_MARKETING | Email to send messages to Marketing department |
| NODE_EMAIL_CV | Email to send messages to CV department |
| NODE_PRISMIC_API | Prismic api key |
| NODE_ATLASSIAN_TOKEN | Jira auth token |
| NODE_ATLASSIAN_EMAIL | Jira auth email |
| NODE_ATLASSIAN_PROJECT_KEY | Jira auth project key |
| NODE_ATLASSIAN_API_URL | Jira api url |
| NODE_NODE_ATLASSIAN_EBOOK_PROJECT_KEY | Jira Ebook key dashboard |
| NODE_ATLASSIAN_SUBSCRIBERS_PROJECT_KEY | Jira Subscribers key dashboard |
| NODE_SENTRY_DSN_FRONT | Sentry DSN for client |
| NODE_SENTRY_LOADER_PATH | Sentry loader path for script |
| NODE_DOMAIN | Domain |
| FF_ENVIRONMENT | Feature flags environment |
| NODE_ENV | Development variant |
| NODE_AWS_URL | AWS url |
| NODE_S3_PUBLIC_URL | S3 url |
| NODE_S3_SECRET_ACCESS_KEY | S3 secret key |
| RECAPTCHA_SITE_KEY | ReCaptcha site key |
| RECAPTCHA_SECRET_KEY | ReCaptcha secret key |
| NODE_GA4_KEY | GA4 MEASUREMENT ID |
| NODE_ANALYTICS_UNIVERSAL_KEY | Universal Analytics Tracking ID |
| FACEBOOK_CODE | Access code for FaceBook Pixel |
| LINKEDIN_PIXEL_ID | Linkidin identificator |
| NODE_SMARTLOOK_PROJECT_ID | Smartlook project id from smartlook account |
| LINKEDIN_SCRIPT_TURN_ON | For enabling/disabling linkedin pixel script |
Without these variables the application will not work correctly
| NAME | DESCRIPTION |
|---|---|
| NODE_ENV | Development variant |
| NODE_S3_PUBLIC_URL | AWS S3 CloudFront public API |
| NODE_DOMAIN | Domain |
| NODE_EMAIL_HR | Email to send messages(cv) to HR department |
| NODE_EMAIL_CV | Email to send messages to CV department |
| NODE_EMAIL_CONTACT | Email to send messages(from leads) to DM department |
| NODE_EMAIL_MARKETING | Email to send messages to Marketing department |
| NODE_SENTRY_DSN_FRONT | Sentry DSN url for send errors |
| FF_ENVIRONMENT | Feature flags environment |
| NODE_PRISMIC_API | Prismic API url |
| NODE_IP_INFO_TOKEN | IP info API token |
| RECAPTCHA_SITE_KEY | Google v3 recaptcha site key |
| NODE_ANALYTICS_UNIVERSAL_KEY | Google Universal Analytics ID |
| NODE_GA4_KEY | Google Analytics 4 ID |
| FACEBOOK_CODE | Facebook code for analytics |
| NODE_SENDPULSE_ADDRESSBOOKS_ID | Sendpulse address book ID |
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.
To send changes for testing it before deploy, you should merge your branch to the develop branch
To send changes to the staging server, you should merge your branch to the staging branch
To send changes to the production server, you should merge staging branch into master branch
We're using some tools for linting our code - ESLint, Sass-Lint
| COMMAND | DESCRIPTION |
|---|---|
npm run lint |
Run all linters |
npm run lint-es |
Run only ESLint for js/vue files |
npm run lint-vue-scss |
Run only vue-scss lint |
npm run lint-scss |
Run only core scss lint |
Snyk is a tool for find and fix security vulnerabilities
| COMMAND | DESCRIPTION |
|---|---|
npm run snyk-protect |
Run snyk checking |
Amazon S3 is used to store video files and pictures of the site.
You may install awscli using apt or brew
sudo apt install awsclior 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.6The current AWS Access Key ID and AWS Secret Access Key can be requested from the team.
aws configureAWS 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: jsonOr 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/
| COMMAND | DESCRIPTION |
|---|---|
aws s3 ls s3://maddevsio/ |
Show available folders & files |
aws s3 ls s3://maddevsio/ && PRE images/ && PRE videos/ |
Result |
aws s3 cp --acl public-read folder s3://maddevsio/folder/ --recursive |
Upload folder |
aws s3 --recursive mv s3://maddevsio/folder/ s3://maddevsio/folder_2/ |
Rename folder |
aws s3 rm --recursive s3://maddevsio/folder/ |
Remove folder |
aws s3 cp --acl public-read ./folder/name.jpg s3://maddevsio/folder/ |
Upload file to folder |
aws s3 rm s3://maddevsio/folder/name.jpg |
Remove file |
aws s3 sync --acl public-read ./folder s3://maddevsio/folder/ |
Update files |
aws s3 sync s3://maddevsio/folder/ ./folder |
Downloads all content from s3 /folder to local folder ./folder |
BEM (Block, Element, Modifier) is a component-based approach to web development.
For BEM, I advise you to use the following:
- "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.
- "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>- "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/
Slice machine dev tools are used to develop and push slices to prismic dashboard.
The main folder for developing slices is located in the following path - prismicSlices.
Slices can be divided into categories(libraries) by creating different folders for them inside the 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-cliAfter installation you need login to prismic
prismic loginAfter login you need to run the slices builder dashboard: localhost:9999
npm run slicemachine
or
prismic sm --develop