🚀 MasterFabric Website

---

📑 Table of Contents

• 🎯 Project Overview
• ⚡ Quick Start
• 🛠️ Tech Stack
• 📁 Project Structure
• 🎨 Components Architecture
• 📜 Available Scripts
• 🔧 Configuration
• 🎨 Styling System
• 📱 Features
• 🚀 Deployment
• 🧪 Testing
• 📊 Performance
• 🔗 Integration
• 🤝 Contributing
• 📚 Resources
• 📄 License

---

🎯 Project Overview

MasterFabric Website is a modern, responsive web application built with Next.js to showcase mobile app development services. It features:

• Interactive UI/UX (code editor simulation, project timeline)
• Mobile-first, fully responsive design
• Performance-optimized with Next.js SSR/SSG/ISR
• Conversion-focused forms and CTAs
• JSON-driven content management
• GDPR-ready cookie management

---

⚡ Quick Start

🚀 Automated Setup

# Clone the repository
git clone https://github.com/masterfabric-mobile/masterfabric-website.git
cd masterfabric-website
chmod +x run.sh
./run.sh setup

🔧 Manual Setup

node --version  # Should be 18+
npm install     # or pnpm/yarn
npm run dev     # or pnpm run dev / yarn dev

🌍 Your site will be available at: http://localhost:3000

---

🛠️ Tech Stack

Category	Technology / Tool	Key Features / Notes
Framework	Next.js	App Router, SSR/SSG/ISR, API Routes, Image Optimization, SEO, Fast Refresh
Styling	Tailwind CSS	Utility-first CSS, responsive design, dark mode, typography plugin
Type System	TypeScript	Static typing, safer code, better DX
Content	MDX	Markdown + JSX, rich content in blog/docs
Icons	Iconify	100,000+ icons, SVG, easy integration
Fonts	Fontsource	Bricolage Grotesque, Inter Variable, self-hosted, performance
Image Tools	Sharp	Image optimization, resizing, fast builds
Testing	Jest	Unit/integration testing, fast feedback
Package Mgmt	PNPM / npm / yarn	Fast, disk-efficient, monorepo support
Deployment	Vercel	Zero-config, edge functions, preview/production deploys
Hosting	Firebase Hosting	Static export, global CDN, SSL, fast delivery
SEO	next-seo	SEO meta tags, Open Graph, Twitter cards
Sitemap	next-sitemap	Automatic sitemap generation, robots.txt support
Analytics	Google Analytics, Vercel Analytics	Traffic, performance, and engagement monitoring
CI/CD	GitHub Actions	Automated builds, tests, and deployments

---

📁 Project Structure

masterfabric-website/
├── package.json             # Project dependencies and scripts
├── next.config.js           # Next.js configuration
├── tailwind.config.js       # Tailwind CSS configuration
├── tsconfig.json            # TypeScript configuration
├── run.sh                   # Development & deployment script
├── README.md                # Project documentation
├── public/                  # Static assets (favicon, images, robots.txt, etc.)
│
└── src/
    ├── app/                 # Next.js App Router (routing, layouts, pages)
    │   ├── layout.tsx
    │   ├── page.tsx
    │   ├── globals.css
    │   ├── about/
    │   ├── blog/
    │   ├── contact/
    │   ├── jobs/
    │   ├── privacy-policy/
    │   └── terms-of-use/
    │
    ├── assets/              # Images, SVGs, and other media
    │
    ├── components/          # Reusable UI and feature components
    │   ├── about/
    │   ├── cookie/
    │   ├── forms/
    │   ├── jobs/
    │   ├── layout/
    │   ├── navbar/
    │   ├── pages/
    │   ├── timeline/
    │   ├── ui/
    │   └── wrapper/
    │
    ├── data/                # JSON data files (about, contact, jobs, navigation, etc.)
    │
    ├── styles/              # Global and modular CSS files
    │
    └── utils/               # Utility functions (cookies, performance, etc.)

---

🎨 Components Architecture

• Layout Components: Container, Footer, SectionHead, etc.
• Navigation System: Responsive navbar, dropdowns, keyboard navigation
• Interactive Components: Timeline, code editor simulation, splash screen, etc.
• Form Components: Contact forms, validation, benefits
• About Page Components: Animated text, globe, timeline, statistics
• UI Components: Button, Link, Icon, LazyImage
• Privacy & Compliance: CookieBanner, CookieSettingsDialog

---

📜 Available Scripts

Command	Description
./run.sh setup	Complete project setup
./run.sh dev	Start development server
./run.sh build	Production build
./run.sh preview	Preview production build
./run.sh deploy-vercel	Deploy to Vercel (preview)
./run.sh deploy-vercel --prod	Deploy to Vercel (production)
./run.sh deploy-firebase	Deploy to Firebase
./run.sh deploy-all	Deploy to all platforms
./run.sh test	Setup test environment
./run.sh help	Show all available commands

---

🔧 Configuration

• Site config: src/config/site-data.json
• Navigation: src/data/navigation.json
• Content: src/data/about.json, src/data/contact.json, src/data/project-flow.json
• TypeScript paths: tsconfig.json
• Tailwind config: tailwind.config.js

---

🎨 Styling System

• Tailwind CSS for utility-first styling
• Design tokens for color, typography, spacing
• Responsive breakpoints for mobile-first design
• Animation utilities for transitions and effects

---

📱 Features

• ⚡ Performance & SEO: Optimized for Core Web Vitals, SEO meta tags, sitemap
• 📱 Responsive Design: Mobile-first, adaptive layouts
• ♿ Accessibility: Keyboard navigation, screen reader support, color contrast
• 🔒 Privacy & Compliance: GDPR cookie consent, privacy policy, terms of service
• 🎨 Interactive Features: Code editor simulation, project timeline, contact forms
• 🛠️ Technical Features: TypeScript, reusable components, asset optimization
• 🔧 Dev Experience: HMR, import aliases, error boundaries

---

🚀 Deployment

• Build: ./run.sh build or npm run build
• Vercel Deploy: ./run.sh deploy-vercel or ./run.sh deploy-vercel --prod
• Firebase Deploy: ./run.sh deploy-firebase
• Static Export: Next.js out/ directory for static hosting

---

🧪 Testing

• Manual QA: Cross-device, cross-browser, accessibility, performance, security
• Automated Testing: (Planned) Unit, integration, E2E, accessibility
• Test setup: ./run.sh test

---

📊 Performance

• Lighthouse Score: 95+
• Accessibility: 100
• SEO: 100
• PWA: 85+
• Bundle Analysis: See build output
• Optimization: Tree shaking, code splitting, critical CSS, CDN delivery

---

🔗 Integration

• Web3Forms - Contact form handling
• Google Analytics - Website analytics
• Vercel Analytics - Performance monitoring
• Firebase - Hosting and potential future features

---

🤝 Contributing

File Naming Conventions

• Components: PascalCase.tsx (e.g., ContactForm.tsx)
• Utilities: camelCase.ts (e.g., formatDate.ts)
• Data Files: kebab-case.json (e.g., project-flow.json)
• CSS Files: kebab-case.css (e.g., navbar-styles.css)

Contribution Process

1. Fork and clone the repository
2. Install dependencies: ./run.sh setup
3. Create a feature branch: git checkout -b feature/your-feature-name
4. Start development: ./run.sh dev
5. Open a pull request with a clear description

---

📚 Resources

• Tailwind CSS - Styling system
• TypeScript Handbook - Type system
• Component Guidelines - Internal component docs

---

📄 License

© 2025 MasterFabric Information Technology Inc. All rights reserved.

This project is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0).

🔒 Privacy & Compliance

• 🍪 Privacy Policy - How we handle user data
• ⚖️ Terms of Use - Website usage terms
• 🛡️ GDPR Compliance - EU privacy regulation compliance
• 🔐 Data Security - Industry-standard security practices

🏗️ Third-Party Licenses

This project uses open-source software under various licenses:

• Tailwind CSS - MIT License
• TypeScript - Apache License 2.0
• Various Icon Sets - See individual icon pack licenses

---

🚀 Ready to get started? Run ./run.sh setup and begin building amazing experiences!