Technical Documentation

We define our technical guidelines, information, and decisions here.

Coding Conventions

• Java Script Style Guide
• Java Script Best Practices
• JavaScript Common Mistakes
• JavaScript Performance
• We use BEM for meaningful tags. This video is also very helpful.
• Use self-explaining codes: meaningful class, function, and variable names.
• Only use comments to describe the reason behind your code. Not the obvious.

Folder Structure

\Root
│   components.js
│   global.css
│   index.html
│   
├───assets
│   ├───fonts
│   ├───icons
│   └───images
├───components
│   ├───aboutus
│   │       componenty.html
│   │       componentz.html
│   │       
│   ├───auth
│   │   ├───singin
│   │   │       componenty.html
│   │   │       componentz.html
│   │   │
│   │   └───singup
│   │           componenty.html
│   │           componentz.html
│   │
│   ├───contactus
│   │       componenty.html
│   │       componentz.html
│   │       
│   └───shared-ui
│           layout.html
│
├───pages
│   ├───aboutus
│   │       components.js
│   │       index.html
│   │
│   ├───auth
│   │   ├───singin
│   │   │       components.js
│   │   │       index.html
│   │   │
│   │   └───singup
│   │           components.js
│   │           index.html
│   │
│   └───contactus
│           components.js
│           index.html
│
├───scripts
│   ├───aboutus
│   │       component1.js
│   │       component2.js
│   │
│   ├───auth
│   │   ├───signin
│   │   │       component1.js
│   │   │       component2.js
│   │   │
│   │   └───signup
│   │           component1.js
│   │           component2.js
│   │
│   ├───contactus
│   │       component1.js
│   │       component2.js
│   │
│   └───functions
│           sharedscripts.js
│
└───styles
    ├───aboutus
    │       component1.css
    │       component2.css
    │
    ├───animations
    ├───auth
    │   ├───signin
    │   │       component1.css
    │   │       component2.css
    │   │
    │   └───signup
    │           component1.css
    │           component2.css
    │
    └───contactus
            component1.css
            component2.css

assets

assets folder is includes fonts , icons and images folders

components

components folder is includes folders every pages and each folder includes page's each components

pages

pages folder is includes folders every pages and each folder includes components.js & index.html

• components.js (load components for every page)
• index.html (is a page html document)

scripts

scripts folder is includes for every page

Technology Stack

Frameworks, tools, and technologies we use for our project:

• Pure HTML, CSS, and JavaScript.
• Git and GitHub for version control.

Git Conventions

• Learn Git Flow
• Similar to Conventional Commits, we write our commit messages like so:
  • Add/Change something: feat: message. Example: feat: add footer to the landing page
  • Fix something: fix: message. Example: fix: fix authentication issue in the sign-in function

Testing

Test cases and tools... will be completed

Deployment & Infrastructure

How to build and deploy our website... For now, we build and deploy manually. In the future, we can learn and use GitHub's CI/CD for automatic processes.

Semantic Versioning

For versioning of our products, we use Semantic Versioning. In simple terms, our product versions will be MAJOR.MINOR.PATCH like 0.1.0 or 1.4.2.

• MAJOR version when you make incompatible API changes.
• MINOR version when you add functionality in a backward compatible manner.
• PATCH version when you make backward compatible bug fixes.

Development Workflow

• Workflow Diagram
• Workflow Actions