Global Notification Bar (pleace holder).

Guides

1.1 Selecting a Development Platform

1.1.1 Web Development

For building web applications, use:

Markup & Styling: HTML, CSS/SCSS, Tailwind
Scripting: JavaScript and jQuery

1.2 Recommended Programming Languages & Tools

1.2.1 Animations

To enhance user experience with animations, consider:

Anime.js
GSAP3.js
Lenis.js

1.2.2 Data Visualization

For integrating charts and graphs, use:

Chart.js
D3.js

1.2.3 Database Management

For handling and storing data, use:

MySQL

1.2.4 Backend Development & Dynamic Content

For server-side logic and real-time content updates, utilize:

PHP
AJAX
HTMX

1.3 Project Planning Requirements

1.3.1 Required Components

Important: No project should commence without the following essential components:

Wireframe (for UI/UX planning)
Entity-Relationship Diagram (ERD) (for database structure)
Flowchart (to outline user navigation across web pages)

Exception: A wireframe may be optional if the application or system closely resembles an existing solution in terms of interface design.

1.4 Local Development Environment Setup

1.4.1 Setup Steps

Install a Local Server
Choose and install one of the following:
- XAMPP (Windows/Linux/macOS)
- MAMP (macOS/Windows)
Locate the Project Directory:
- After installation, navigate to the htdocs folder (found in the XAMPP or MAMP directory).
- All new projects should be placed inside this folder.
Start the Server
- Open the XAMPP/MAMP application.
- Ensure that Apache and MySQL services are running.
Access Your Project in a Browser
- Create a new folder inside htdocs for your project.
- Open a web browser and enter the following URL: http://localhost/[The Project Folder Name]

1.4.2 Folder Structure

Case 1: A System With Single Type Of Users

Project Organization
- The index.html file will remain in the root directory.
- All other pages will be placed inside the pages folder.
Styles & Assets
- All CSS/SCSS files and icon fonts will be stored in the styles folder.
- Each page will have its own dedicated CSS file, except for the navigation bar and footer, which will be reusable across all pages.
- To maintain clean and efficient stylesheets:
  - Reusable styles (e.g., buttons, cards) should be structured as SCSS mixins and includes.
  - A global variables file will store all fonts, colors, and commonly used CSS components.
JavaScript Structure
- All JavaScript files will be stored in the scripts folder.
- If a function is used across multiple pages, it should be placed in a separate JavaScript file.
- For page-specific JavaScript:
  - Any script exceeding 50 lines should be moved to its own file.
  - Readability Considerations: Limit the use of higher-order functions to enhance code clarity and maintainability.

Case 2: Multi-User System (Applies to systems with different user roles: Super Admin, Admin, User)

User Access & Redirection
- If login is required, users will be redirected based on their role:
  - Super Admin → Super Admin Panel
  - Admin → Admin Panel
  - User → User Panel
Folder Breakdown
1. Root Directory (index.html)
  - Contains the login page where users authenticate.
  - Based on their permissions, they are redirected to the appropriate panel.
2. User Role Folders (/super-admin, /admin, /user)
  - Each role has its own dashboard (index.html), which is the first page shown after login.
  - Inside each folder, there are three subfolders:
    - pages/ → Stores additional pages related to that role.
    - styles/ → Contains styles specific to that role.
    - scripts/ → Stores JavaScript files relevant to that role.

This structure ensures that files remain organized and permissions are clearly defined.

1.5 Error Handling – Custom Error Pages

Proper error handling is essential to enhance user experience and security.

The system must manage the following errors:

1.5.1 Permission Denied (403)

A custom 403 error page will be created.
If an unauthorized user attempts to:
- Access a restricted system panel.
- View sensitive files without the proper permissions.
They will be redirected to the custom 403 page, and a 403 error will be force-triggered at the server level.

1.5.2 Not Found (404)

A custom 404 error page will be implemented.
If a user :
- Tries to access a missing or non-existent file
- Enters an invalid URL
They will be redirected to the custom 404 page, and a 404 server error will be triggered.

1.5.3 Additional Custom Error Pages

More custom error pages can be created as needed to handle other types of errors.
However, 403 (Permission Denied) and 404 (Not Found) are mandatory, as they are the most common errors users may encounter and can be triggered by their actions.

This ensures a secure and user-friendly system while maintaining proper access controls.

1.6 Coding Standards & Best Practices

1.6.1 HTML Best Practices

Use semantic elements (e.g., <header>, <nav>, <section>, <article>) to improve accessibility and SEO.
Ensure all images have alt attributes for screen readers.
Maintain proper indentation and nesting for readability.
Use ARIA roles for better accessibility where needed.

1.6.2 CSS/SCSS Best Practices

Avoid Using tags and attributes that are not supported on all major browsers
Follow the BEM (Block-Element-Modifier) naming convention for class names.
Use SCSS variables for colors, fonts, and other reusable properties.
Avoid excessive use of !important; use specificity wisely.
Implement responsive design using flexbox and grid instead of float-based layouts.

1.6.3 JavaScript Best Practices

Use ES6+ syntax (e.g., let & const instead of var, arrow functions, template literals).
Write modular code: Break scripts into separate files for reusability.
Use event delegation instead of binding multiple event listeners.
Prefer async/await over callbacks for better readability.
Avoid polluting the global scope—use IIFEs or modules.
Follow consistent naming conventions.
Use higher-order functions wisely—limit excessive nesting to keep code readable.

1.6.4 PHP Best Practices

Sanitize and validate all user inputs to prevent SQL Injection & XSS attacks.
Use prepared statements instead of directly injecting SQL queries.
Follow PSR-12 coding standards for clean and readable PHP code.
Implement error handling with try-catch and proper logging mechanisms.

1.6 Performance Optimization

1.6.1 Frontend Optimization

Minify & bundle CSS and JavaScript files to reduce load time.
Use lazy loading for images and assets (loading="lazy" attribute for images).
Optimize images using tools like TinyPNG or WebP format.
Reduce the number of HTTP requests by combining CSS and JavaScript files where possible.
Use font-display: swap for better font loading performance.

1.6.2 JavaScript Optimization

Avoid excessive use of DOM manipulation—cache elements when needed.
Optimize loops (forEach and map are preferable to for loops when working with arrays).
Debounce or throttle event listeners on scroll, resize, and input events.
Load JavaScript files asynchronously (async) or defer their execution (defer).

1.6.3 Backend & Database Optimization

Use indexes in MySQL to speed up search queries.
Limit the number of queries executed in a single request—avoid N+1 queries.
Paginate results instead of retrieving all records at once.
Close unused database connections to free up resources.

2.1 User Permissions and Roles

Each database will have an admin who can create additional admin users with varying levels of permissions. These permissions will control the ability of the admins to:

Update, Add, or Remove records from the database.
Modify database columns and tables based on their specific role and level of access.

2.2 Case 1: Multiple Clients Using the Same System

In this scenario, each client will have its own separate database to manage and store data, ensuring data isolation and independence between clients.

2.2.1 Database Structure for Each Client

Each client will have a unique database tailored to their data management needs. This provides:

Data isolation: Ensures clients’ data is kept separate, reducing risks of accidental data leakage.
Easier maintenance and security: With separate databases, managing, updating, and securing data becomes more straightforward.

2.2.2 Advantages

Scalability: As the client base grows, each client’s database can be managed independently.
Data Security: Isolating data per client helps to minimize the risk of cross-client access.
Customization: Each client can have a custom database structure (e.g., different fields, tables, and data management rules) to meet their specific needs.

2.2.3 Drawbacks

Managing multiple databases can add complexity.
Backups, migrations, and maintenance can become challenging due to the higher number of databases.

2.3 Case 2: Multiple Databases for Different Branches

2.3.1 Database Structure

Each branch will have its own separate database, which may either be on the same server or distributed across different servers, based on performance and redundancy requirements.

2.3.2 Advantages

Performance optimization: Reduces query time by distributing the load across multiple databases.
Scalability: As the client expands, it becomes easier to add more branches and scale databases individually.
Localization: Allows for branch-specific optimizations, such as local currency, language, or regulatory requirements.

2.3.3 Drawbacks

Managing multiple databases can increase complexity.
Effort to aggregate data: Aggregating data across multiple databases requires more effort and may involve complex operations.

2.4 Case 3: Single Client with Multiple Branches

For a single client with multiple branches across different countries, there are two main database structures depending on the client’s size and data needs.

2.4.1 Database Structure Single Database for All Branches

A single centralized database will store all data for the client’s branches. Two approaches for organization:

Use separate tables for each branch.
Include a branch_id in the main tables to differentiate between data from different branches.

2.4.2 Advantages

Easier management: Maintaining one database is simpler than managing multiple.
Lower overhead: No need to maintain several databases, reducing administrative burden.
Simplified data aggregation: It is easier to collect and report data for the entire organization from one place.

2.4.3 Drawbacks

As the number of users or records grows, a single database might become a performance bottleneck.
Performance issues may arise with large data volumes (e.g., over 20,000 products/users).

2.5 Performance Considerations

2.5.1 Database Optimization Techniques

Indexing: Proper indexing on frequently queried columns.
Sharding: Splitting large databases into smaller, more manageable parts.
Query Optimization: Writing efficient SQL queries to minimize load times.

2.5.2 Load Balancing

Use replication to balance queries across multiple database instances.
Distribute the load evenly to reduce the chances of bottlenecks.

2.5.3 Caching Strategies

Implement caching mechanisms at the database or application layer to speed up read-heavy operations.

2.6 Criteria for Choosing the Approach

If the client has more than 20,000 products/users, consider using multiple databases to distribute the load and improve performance.
For smaller clients or clients with a more straightforward structure, a single database may be sufficient.

3.1 Password Encryption and Hashing

All user, admin, and super admin passwords will be securely encrypted using the Argon2id hashing algorithm. The hashed passwords will be stored in the database for secure authentication.

3.2 Password Requirements

3.2.1 User Password Requirements

Minimum 8 characters.
Must include a combination of alphanumeric characters (letters and numbers) and symbols.
Passwords must be changed every 30 days for security purposes.

3.2.2 Admin Password Requirements

Minimum 12 characters.
Must include a combination of alphanumeric characters and symbols.
Admin passwords must be changed every 60 days.

3.2.3 Super Admin Password Requirements

Minimum 15 characters.
Must include uppercase letters, lowercase letters, alphanumeric characters, and symbols.
Super admin passwords must be changed every 90 days for enhanced security.

3.3 User Input Validation

All user input validation will be performed on both the front-end and back-end to ensure data integrity, security, and a smooth user experience. This dual-layer validation helps prevent issues such as:

XSS (Cross-Site Scripting)
SQL Injection
Invalid Data Submission

By validating input at both levels, we ensure that any potential vulnerabilities are mitigated, and only valid data is processed by the system.

3.4 Penetration Testing

Once a project is completed, penetration testing (pentesting) will be conducted to identify and address any security vulnerabilities in the system. This includes:

Testing for backdoors: Ensuring there are no hidden entry points that could be exploited by malicious actors.
Detecting flaws: Identifying any weaknesses that could be used to extract sensitive data from the database.
Vulnerability Scanning: Running comprehensive tests to simulate real-world attacks and confirm that all security protocols are functioning properly.

Penetration testing ensures that the system is secure and that sensitive data is protected from unauthorized access, minimizing the risk of potential breaches.

3.5 Security Measures Beyond Passwords

3.5.1 Account Lockout Mechanism

To prevent brute-force attacks, an account lockout mechanism will be implemented. If a user exceeds a defined number of failed login attempts, their account will be temporarily locked, and they will need to verify their identity (e.g., through email) to regain access.

3.5.2 Secure Password Reset Process

In case a password reset is required, a secure password reset process will be followed. This includes sending a time-limited reset token to the user's registered email address, verifying their identity before allowing them to change the password.

3.6 Session Management

3.6.1

To protect against session hijacking and unauthorized access due to inactivity, all sessions will expire after a defined period of inactivity (e.g., 15–30 minutes) This can differ based on the project. Users will be prompted to log in again after their session has expired.

4.1 Hosting Guide – Hostinger Hosting

4.1.1 Choosing the Right Hosting Plan

Hostinger offers a variety of hosting plans tailored to different needs. The key is to select the one that best fits the project's requirements.

Types of Hosting Plans:

Shared Hosting: Ideal for small websites or blogs that don't require extensive resources. It’s cost-effective and easy to use.
VPS Hosting: Provides more control, power, and flexibility. Recommended for larger websites that need more resources and better performance.
Cloud Hosting: A scalable option for websites with fluctuating or high traffic. Hostinger’s cloud hosting provides more flexibility and reliability than shared hosting.
WordPress Hosting: Optimized for WordPress websites with fast, secure, and hassle-free setup.
Email Hosting: Hostinger offers dedicated email hosting for your domain, ideal for businesses that want a professional email address.

4.2 Setting Up Hosting on Hostinger

4.2.1 Step 1: Register a Domain Name

Before setting up hosting, ensure that you have a domain name registered.

Hostinger offers domain registration directly from the dashboard.
If you already have a domain, you can easily transfer it or update the DNS records to point to Hostinger.

4.2.2 Step 2: Purchase Hosting Plan

Log in to your Hostinger account.
Choose a hosting plan based on your needs.
Complete the payment process.

4.2.3 Step 3: Setting Up Your Website

Once the hosting plan is active, you can:

Access the Control Panel: Hostinger uses hPanel for easy management.
Install Software or CMS:
- For WordPress, you can use Hostinger’s 1-click installer for quick setup.
- For other CMSs, such as Joomla or Drupal, you can install them directly from hPanel.
- Alternatively, you can upload your custom website files using File Manager or FTP.
Create Email Accounts: Set up email accounts via Email Accounts in the hPanel.
Set Up SSL: Enable SSL certificates for secure HTTPS connections.
Configure DNS: If using an external domain, point your DNS to Hostinger’s nameservers.

4.3 Configuring and Managing Hosting

4.3.1 Accessing the Control Panel (hPanel)

Login: After purchasing your plan, log in to your Hostinger account and access the hPanel.
Dashboard: This is the central hub for managing your hosting account. You can access tools for email management, domains, databases, and much more.

4.3.2 Database Management

Create MySQL Databases: Go to the MySQL Databases section in hPanel. Create databases for your website and assign appropriate user privileges.
phpMyAdmin: Use phpMyAdmin to manage your databases.

4.3.3 FTP Management

Setting Up FTP Accounts: In hPanel, go to FTP Accounts and create accounts for file upload/download.
Access Files: You can also use File Manager to directly upload and manage files.

4.3.4 Backups

Daily/Weekly Backups: Hostinger provides automatic daily or weekly backups based on your plan. You can restore these backups via the Backup section in hPanel.
Manual Backups: You can also manually backup databases and files for extra security.

4.4 Security Settings

4.4.1 SSL Certificate

Hostinger provides a Free SSL Certificate on all plans. Enable SSL for secure data transmission.
Go to SSL in hPanel to manage the SSL certificate for your domain.

4.4.2 Two-Factor Authentication (2FA)

Enable 2FA for added security on your Hostinger account. This can be done under Account Settings.

4.4.3 Firewall Protection

Enable 2FA for added security on your Hostinger account. This can be done under Account Settings.

4.5 Email Configuration

4.5.1 Creating Email Accounts

In the Email Accounts section, create personalized email addresses for your domain (e.g., info@yourdomain.com).

4.5.2 Email Clients

You can set up your email in any email client using IMAP/POP3 and SMTP settings provided by Hostinger.

4.5.3 Forwarders & Auto-Responders

Hostinger allows you to set up email forwarders and auto-responders through the Email Management section.

4.6 Performance Optimization

4.6.1 Content Delivery Network (CDN)

Use Cloudflare CDN to speed up static content delivery by caching content on servers closer to your users.

4.6.2 Image Optimization

Optimize images by using tools like TinyPNG or use WebP formats for faster loading times.

4.7 Troubleshooting and Support

4.7.1 Contacting Support

Hostinger offers 24/7 customer support via live chat, ticket system, and email. If you face any issues, you can access the support team through the Help Center in hPanel.

4.8 Final Checklist for Launch

Before you go live with your website:

Check SSL: Ensure SSL is activated for HTTPS security.
Backup: Make sure you have recent backups.
Performance Test: Use tools like Google PageSpeed Insights to check load speed and performance.
Security Check: Ensure firewall, SSL, and security settings are active.
DNS Propagation: If using a new domain or switching hosts, allow 24-48 hours for DNS changes to propagate worldwide.

coming soon