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
│   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
│   │   components.js
│   │
│   ├───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
    │   global.css
    │
    ├───aboutus
    │       component1.css
    │       component2.css
    │
    ├───animations
    ├───auth
    │   ├───signin
    │   │       component1.css
    │   │       component2.css
    │   │
    │   └───signup
    │           component1.css
    │           component2.css
    │
    └───contactus
            component1.css
            component2.css

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