Connections (React, Tailwind, Shadcn/ui)

This is a clone of the NYT Connections Game. Which itself seems to be an unacknowledged clone of the British game Only Connect.

Anyways..

Click Here To Try Out The Demo

To Run Locally:

cd react-connections-game
npm install
npm run dev

Technology

• React 18
• Tailwind CSS
• React Spring for a few animations
• Shadcn/ui for primitive components
• Copied a number of utility functions from a React Wordle Clone - cwackerfuss/react-wordle
• Built with Parcel

Code Organization

• Global state (game status, guesses, etc.) is handled using React's Context API. The provider components are in src/providers
• Components are in src/components
  • Primitive components imported from shadcn/ui library and lightly edited are in src/components/ui
  • The Sparkles component is taken from Josh Comeau's article on creating animated sparkles in React..
• Helper functions for local storage, game statistics, and constants are in src/lib
  • The actual puzzle data for changing the content of each puzzle is in src/lib/data.js
• Custom hooks are in src/hooks
  • Both of these are code snippets taken from Josh Comeau's Blog

Similar Projects

• PuzzGrid which allows you to create your own games/puzzles, no code required.
• Connections Generator by swellgarfo which also allows you to create your own games/puzzles, no code required.

Contributing

• Please fork and submit a PR if you'd like!

Projects Built Using This Repo:

• your fork here!

Want to add one to the list? Please make a pull request.

If you found this helpful or entertaining feel free to check out our other work!

• Writings & Thoughts
• Black Wordle

If you'd like to support financially

• One-Time Contribution via Stripe