Mathle

Mathle is a daily arithmetic puzzle game inspired by Wordle-style feedback. Players have five tries to guess one hidden addition or subtraction equation. Every guess must be a valid equation, and the tile colors show whether each digit or operator is correct, misplaced, or absent.

Live site: Mathle

Tech Stack

• Next.js 12
• React 17
• Tailwind CSS 3
• Static export with next export
• JSON-based page copy under content/

Project Structure

• pages/ - Next.js routes, including the game page and static content pages.
• components/ - Shared layout, SEO head, footer, and static content rendering components.
• content/ - Editable JSON copy for Home, About, Contact, Terms, Privacy, Changelog, Sitemap, and Robots content.
• styles/ - Global Tailwind and custom CSS.
• public/ - Static assets, favicon files, robots.txt, and sitemap.xml.
• out/ - Static export output generated by npm run export.

Local Development

Install dependencies:

npm install

Start the development server:

npm run dev

Open:

http://localhost:3000

During development, avoid running npm run build or npm run export while the dev server is active. Next.js writes production build files into .next, which can interfere with an already-running dev server.

Build

Create a production build:

npm run build

Export static HTML files:

npm run export

The generated static site is written to:

out/

Static Deployment

Deploy the contents of out/ to any static hosting platform, such as:

• Vercel static output
• Netlify
• Cloudflare Pages
• Nginx
• Apache
• Object storage with CDN

The production domain should point to:

https://www.mathlegame.net

Make sure the deployed site includes:

• out/index.html
• out/robots.txt
• out/sitemap.xml
• out/_next/
• all files copied from public/

SEO Notes

The shared page head includes canonical URLs, Open Graph metadata, JSON-LD WebSite/WebPage data, breadcrumb JSON-LD, and FAQ JSON-LD on the home page. The canonical domain is:

https://www.mathlegame.net

Home page FAQ copy is maintained in content/home.json.