Skip to content

Latest commit

 

History

History
282 lines (223 loc) · 11.8 KB

README.md

File metadata and controls

282 lines (223 loc) · 11.8 KB

🚀 MasterFabric Website

Version Next.js TailwindCSS TypeScript Node.js PNPM Vercel Firebase License

Live Site Repository

📑 Table of Contents

🎯 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

📄 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!