Live Site: shinetechdata.com (Vercel)
The official website for ShineTechData — a data consulting company specializing in business intelligence, data analysis, and machine learning solutions. Built with modern web technologies, optimized for performance, and accessible to all users.
Bilingual: English & Spanish with automatic locale detection.
Performance: 92/100(Mobile) 99/100(desktop) on Google PageSpeed Insights .
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 16.2 | App Router, SSR, SSG, Turbopack |
| React | 19.2 | UI framework |
| TypeScript | 5 | Type safety |
| Tailwind CSS | 4 | Utility-first styling |
| Base UI | 1.5 | Accessible primitives |
| next-intl | 4.12 | Internationalization |
| Vitest | 4.1 | Test runner |
| React Testing Library | 16.3 | Component testing |
| Lucide React | 1.16 | Icon library |
| web-vitals | 5.3 | Core Web Vitals monitoring |
Package Manager: pnpm
Fonts: Libre Franklin (Google Fonts)
- Bilingual (EN/ES) — Locale-prefixed routing with automatic language detection
- Dark/Light Theme — System-aware with manual toggle and keyboard shortcut ("D"). Anti-flash script runs before hydration to prevent theme flicker on reload.
- Fully Responsive — Mobile-first design across all breakpoints
- Accessible — Semantic HTML,
focus-visible, screen-reader support, WCAG-compliant
- Animated Hero — Typing-effect headline with smooth transitions
- Scroll Animations — Content reveals on scroll via IntersectionObserver
- Service Detail Pages — 6 services × 2 locales, statically generated at build time
- About Page — Company story, mission, vision, and values
- Contact Page — Inquiry section with FAQ accordion
- Legal Pages — Terms of Service and Privacy Policy
- Custom 404 — Locale-aware not-found page
- Server Components — Reduced client-side JavaScript with React Server Components
- Lazy Loading — Interactive components loaded on-demand with
next/dynamic - Font Preloading — Google Fonts preloaded via
next/font - Core Web Vitals Monitoring — Real-user metrics via
web-vitalslibrary - Structured Data — JSON-LD for Organization, WebSite, Services, Breadcrumbs
- SEO Optimized — Dynamic metadata, Open Graph, Twitter Cards, canonical URLs
| Route | Description |
|---|---|
/ |
Home — hero, problem statement, services overview, process, CTA |
/services |
Service listing with card grid and slider |
/services/[slug] |
Individual service detail page (6 services) |
/about |
Company story, mission, vision, and values |
/contact |
Contact form and FAQ |
/terms |
Terms of Service |
/privacy |
Privacy Policy |
- Node.js ≥ 20
- pnpm (recommended package manager)
# Clone the repository
git clone https://github.com/Wilfredery/std-official.git
cd std-official
# Install dependencies
pnpm install
# Start the development server
pnpm devOpen http://localhost:3000 in your browser.
| Command | Description |
|---|---|
pnpm dev |
Start development server with Turbopack |
pnpm build |
Build for production |
pnpm test |
Run tests in watch mode |
pnpm test:run |
Run all tests once (CI-friendly) |
pnpm lint |
Lint with ESLint |
std-official/
├── app/ # Next.js App Router
│ ├── [locale]/ # Locale-scoped routes (en, es)
│ │ ├── about/ # About page
│ │ ├── contact/ # Contact page
│ │ ├── services/ # Services listing + [slug] detail
│ │ ├── terms/ # Terms of Service
│ │ └── privacy/ # Privacy Policy
│ ├── layout.tsx # Root layout (fonts, metadata, providers)
│ └── globals.css # Global styles & Tailwind config
├── components/ # Reusable UI components
│ ├── home/ # Home page sections
│ ├── services/ # Service components
│ ├── contact/ # Contact form & FAQ
│ ├── layout/ # Header, footer, nav
│ ├── seo/ # SEO & JSON-LD components
│ ├── web-vitals/ # Web vitals script injection
│ ├── errors/ # Error suppression components
│ └── ui/ # UI primitives (shadcn/ui)
├── lib/ # Business logic & utilities
│ ├── data/ # Static data & service definitions
│ └── i18n/ # next-intl configuration
├── messages/ # Translation files
│ ├── en.json # English
│ └── es.json # Spanish
├── public/ # Static assets
│ └── theme-anti-flash.js # Pre-hydration theme script
└── __tests__/ # Colocated tests
The custom theme system replaces next-themes with a lightweight Context-based solution:
- Anti-Flash Script:
public/theme-anti-flash.jsruns synchronously before React hydration to apply the correct theme class based onlocalStoragepreference - Context Provider:
lib/theme/ThemeContext.tsxmanages state, localStorage persistence, andmatchMediasubscription for system theme changes - Error Suppression:
components/errors/SuppressScriptError.tsxfilters the React 19 false-positive warning about<script>in Server Components (Next.js 16 + Turbopack) - Web Vitals:
components/web-vitals/WebVitalsScript.tsxinjects theweb-vitalslibrary on first user interaction or 5-second idle timeout
Translations live in messages/ as JSON files organized by page section.
Adding a new string:
- Add the key to both
en.jsonandes.json - Use
getTranslations("namespace")in Server Components - Use
useTranslations("namespace")in Client Components
The locale is detected from the URL prefix (/en, /es). The root path (/) redirects to the preferred locale.
555 tests across 76 test files — all passing.
- Framework: Vitest with
jsdomenvironment - Library: React Testing Library + jest-dom matchers
- Coverage: 100% of components tested, plus metadata and SEO tests
Tests are colocated with source files inside __tests__/ directories. Each component has tests covering rendering, interactions, accessibility, and both locales.
- PageSpeed Insights: 92/100 (Mobile)
- Architecture: Server Components + lazy-loaded interactive islands
- Font Optimization: Preloaded via
next/font - Asset Optimization: Static assets with optimal cache headers
- Core Web Vitals: Monitored in production via
web-vitals
Left: Mobile score • Right: Desktop score
Deployed on Vercel with Next.js native SSR support.
- Platform: Vercel (Serverless)
- Build Command:
next build - Output Directory:
.next(default)
# Build locally to verify
pnpm build
# Start production server locally
pnpm startVercel Dashboard:
- Import repository from GitHub
- Framework preset: Next.js
- Build command:
next build - Output directory: leave empty (default
.next)
Each push to master triggers automatic deployment.
- Run
pnpm test:run— all 555 tests must pass - If your change affects UI, add or update tests
- If your change adds user-facing text, update both
en.jsonandes.json - Follow existing project structure and TypeScript conventions
- Keep commits small and focused
MIT © ShineTechData