Hey-Man-Its-Ok

💙 Hey Man; It’s Ok

An ultimate resource and knowledge base for men's mental health.

---

🌟 Purpose

“Hey Man; It’s Ok” is a dedicated platform designed to support men’s mental wellness. The site serves as a compassionate guide and knowledge base, providing an interactive “Welcome Quiz” that gently navigates users toward the most appropriate support resources, articles, and community links in an engaging and accessible way. Our goal is to break the stigma around men’s mental health and make finding help as frictionless as possible.

🚀 Tech Stack

This project is built for high performance, accessibility, and modern aesthetics, utilizing a cutting-edge web stack:

Frontend Core

• Framework: Next.js 16 (App Router, Static Export)
• Library: React 19
• Language: TypeScript
• State Management: React Context API (Theme and Audio Player states)

Styling & UI

• Styling: TailwindCSS v4 (Modern utility-first CSS)
• Animations: Framer Motion 12 (Smooth page transitions and micro-interactions)
• Icons: Lucide React & React Icons
• Typography: Inter & Oswald via Google Fonts

Content & Tools

• Content: Markdown processing with react-markdown and gray-matter
• Analytics: Google Tag Manager (GTM) / Google Analytics 4
• Testing: Playwright for end-to-end testing

🌐 Hosting & Live URLs

The platform is optimized for static performance and is accessible at the following locations:

• Production Domain: heymanitsok.com
• Staging / GitHub Pages: stitch-tec.github.io/Hey-Man-Its-Ok

🤖 Automations & Workflows

We use GitHub Actions to automate our delivery pipeline and ensure code quality:

CI/CD Pipeline (nextjs.yml)

• Trigger: Every push to the main branch.
• Process:
  1. Build: Installs dependencies and runs npm run build to generate a static export.
  2. Optimization: Next.js “export” mode generates highly optimized HTML/CSS/JS in the out/ directory.
  3. Deployment: Automatically deploys the static site to GitHub Pages.
• No manual deployment is required; the live site updates within minutes of a merge.

Built-in Automations

• SEO Generation: Dynamic metadata and OpenGraph tags are automatically generated for all routes (Episodes, Articles, Hubs).
• Theme Sync: Automatic system preference detection for Light/Dark mode transitions.
• PWA Support: Automated service worker and manifest configuration for an app-like experience.

🛠️ Local Setup & Development

To get this project running on your local machine, follow these simple steps:

Prerequisites

• Node.js (v20 or higher recommended)
• npm (comes with Node.js)

Installation

1. Clone the repository:

   git clone https://github.com/Stitch-TEC/Hey-Man-Its-Ok.git
   cd Hey-Man-Its-Ok
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

4. Run Tests (Optional):

   npx playwright test
   

5. View the site: Open http://localhost:3000 in your browser.