{"kind":"post","path":"/blog/artfervour-crossword","post":{"metadata":{"title":"Art Crossword Puzzle","summary":"Built a branded weekly React crossword for Art Fervour, with JSON clue sets, responsive play, completion timing, analytics, social sharing, and a finish flow that promoted more games.","publishedAt":"2024-03-27","projectDate":"2020-10-09","ascent":"#ffdd00","links":[{"label":"Art Fervour","href":"https://artfervour.com/","type":"client"},{"label":"Instagram","href":"https://www.instagram.com/art.fervour","type":"social"},{"label":"LinkedIn","href":"https://www.linkedin.com/company/artfervour/","type":"social"},{"label":"Facebook","href":"https://www.facebook.com/share/1Az19umPhL/","type":"social"}],"tags":["artfervour","game","react","webdev"],"weight":0},"slug":"artfervour-crossword","content":"I built a weekly **React crossword** for Art Fervour. Players used clues to name artists, then shared or opened another game.\n\n## Campaign Flow\n\n- Dated JSON files supplied each weekly clue set.\n- A React crossword component handled the grid.\n- Sass and styled-components applied the brand style.\n- Analytics tracked play and completion events.\n- The finish page offered restart, sharing, and more games.\n\nThe static build worked on phones and desktop browsers. New levels only needed a new clue file.\n\n## Visual Proof\n\n\u003cimg src=\"/images/blog/af-crossword/coverv2.png\" alt=\"Art Fervour crossword cover\" className=\"w-full\" /\u003e\n\n### Game Screens\n\n\u003cdiv className=\"bp-evidence-grid\" data-preview-gallery=\"true\"\u003e\n\u003cimg src=\"/images/blog/af-crossword/3.png\" alt=\"crossword preview 3\" className=\"w-[calc(50%-0.375rem)]\" /\u003e\n\u003cimg src=\"/images/blog/af-crossword/2.png\" alt=\"crossword preview 2\" className=\"w-[calc(50%-0.375rem)]\" /\u003e\n\u003cimg src=\"/images/blog/af-crossword/4.png\" alt=\"crossword preview 4\" className=\"w-[calc(50%-0.375rem)]\" /\u003e\n\u003cimg src=\"/images/blog/af-crossword/1.png\" alt=\"crossword preview 1\" className=\"w-[calc(50%-0.375rem)]\" /\u003e\n\u003c/div\u003e"}}