This is the official landing page for the HearMe project.
It is built as a Custom Static Site Generator (SSG) using Node.js to provide lightning-fast performance, flawless Technical SEO, and true internationalization. It is designed to be hosted on Firebase Hosting and uses Tailwind CSS for styling.
- Custom SSG Architecture: A custom Node.js build script (
build.js) compiles source files into a production-readypublic/directory. - True Internationalization (i18n) & SEO: * Translations are injected at build-time.
- Generates physical subdirectories for each language (e.g.,
/uk/,/de/) for perfect indexing. - Automatically injects
hreflangtags and localizedcanonicalURLs into the<head>.
- Generates physical subdirectories for each language (e.g.,
- Smart Routing: Automatically detects the user's browser language or saved preferences and seamlessly redirects them to the appropriate localized page.
- Automated SEO Files: Dynamically generates
sitemap.xml(with current build dates forlastmod) androbots.txtbased on the configured languages. - Cache-Busting: Native asset versioning to ensure users always receive the latest CSS and scripts.
- Config-Driven: A single
config.jsonacts as the source of truth for available languages across the entire app. - Automated CI/CD: GitHub Actions pipeline automatically lints the code, builds the static site, and deploys it to Firebase upon merging.
All development happens inside the src/ directory. Never edit files in the public/ directory manually, as they are overwritten during the build process.
- Node.js and npm: Required for the build script and linters.
- Firebase CLI:
npm install -g firebase-tools(for local serving and manual deployment).
npm ciTo compile HTML templates, inject translations, generate SEO files, and build Tailwind CSS:
npm run build(This cleans the public/ directory and regenerates the entire site from scratch).
We provide two convenient scripts for local testing:
-
To build and serve the latest changes:
npm run dev
(This runs the build script first, and then starts the local server).
-
To serve the existing build without recompiling:
npm run serve
(This simply starts the Firebase local server from the existing
public/folder).
Open http://localhost:5000 to preview the compiled site.
We strictly enforce code quality using linters for HTML, CSS, and JS. To check your code before committing:
npm run lint(The CI/CD pipeline will fail if there are any linting errors).
Adding or managing languages is centralized and highly automated.
-
Global Config: The
config.jsonin the root directory holds thedefaultLangandsupportedLangsconfiguration. -
Translation Files: Content is stored in
src/locales/{lang}.json(e.g.,en.json,uk.json). -
Usage in HTML: Use the
data-i18nattribute in yoursrc/*.htmlfiles:<h1 data-i18n="hero.title">Default Text</h1>
-
Build Process: When
npm run buildis executed, it readsconfig.json, iterates through all supported languages, translates the HTML, and generates localized directories inpublic/.
Direct pushes to the main branch are restricted. To deploy your changes, please follow the standard Pull Request (PR) workflow:
- Create a new branch for your feature or fix.
- Commit and push your changes to your branch.
- Open a Pull Request against the
mainbranch. (This will trigger the PR Linter & Preview workflow to verify your code). - Once your PR is approved and merged into
main, the GitHub Actions pipeline will automatically:- Setup the environment and install dependencies (
npm ci). - Run Linters to ensure code quality (
npm run lint). - Build the project and generate the
public/folder (npm run build). - Deploy the compiled assets to Firebase Hosting.
- Setup the environment and install dependencies (
If you need to deploy manually from your local machine:
npm run deploy├── .github/ # CI/CD workflows and linter configs
├── src/ # 🛠️ SOURCE FILES (Work Here)
│ ├── assets/ # Images, icons, manifests
│ ├── components/ # Reusable HTML partials (header.html, footer.html)
│ ├── locales/ # Translation dictionaries (*.json)
│ ├── scripts/ # JavaScript files (common.js, firebase-init.js, etc.)
│ ├── styles/ # CSS files (input.css, style.css)
│ ├── index.html # Main landing page template
│ ├── invest.html # Investors page template
│ ├── waitlist.html # Waitlist page template
│ ├── maintenance.html # Maintenance page template
│ └── 404.html # Error page template
├── public/ # 📦 COMPILED OUTPUT (Generated automatically, do not edit)
├── build.js # Custom Static Site Generator script
├── config.json # Global configuration (languages, etc.)
├── tailwind.config.js # Tailwind CSS configuration
├── eslint.config.js # ESLint configuration
├── .stylelintrc.json # Stylelint configuration
├── firebase.json # Firebase Hosting configuration (rewrites, headers)
└── package.json # NPM scripts and dependencies