Word guessing game like Wordle but to compete with your friends

Overview

Battle your friends in a word guessing game

WarWordly is an Open Source and Free to Play multiplayer game inspired in the famous Wordle. The idea is to play against an opponent to see who can guess the word first.

You can play in:

Promo

⭐️ Demo

Go to WarWordly

📕 Rules of the Game

The rules of the game ar fairly easy, you have 6 guesses to guess the correct word before your opponent, each guess must be a valid word. After submiting a word each letter will get a color:

  • ⬜️ Gray: the letter is incorrect
  • 🟧 Orange: the letter is correct but in the wrong position
  • 🟩 Green: the letter is correct and is in the correct position

💻 Development

This is a Next.js app, so it is recommended to deploy it on Vercel but you can use any host that supports Next.js. Also uses Supabase as Data Base. Supabase handles the realtime operations we need for the multiplayer part. Also handles all the Auth for the app.

💎 Cool stuff that uses

🛠 Start Developing

First you need a new project on Supabase, then use the schema in database_schema.sql to create all the necessary databases and policies. Then grab .env.local.example and rename it to .env.local. Inside this file you will have to add the keys from your Supabase project.

Once you did all that, install all dependencies with this command

npm install

After all dependencies are installed, you are ready to go, run this to start the app:

npm run dev

You will see the app running on http://localhost:3000


👉 About the game

The game is developed in a way so most of the action happens in the front end, this means in the user's browser. So is not that hard to cheat, but the idea of WarWordly is just to have fun and try cool technologies 😄 .

There is a lot of thing we can do server side or even on the DB itself to make it harder to cheat, but that's not my goal with WarWordly.

👏 Credits

This game is inspired in Wordle and used some wonderful code from hannahcode.


Created by @NicoAndrade

You might also like...

Ember implementation of the game

Ember implementation of the game

Apr 27, 2022

Buesiness Factory idle game.

Business Factory Let's do business. Report Bug · Request Feature Table of Contents About The Project Built With Getting Started Prerequisites Installa

Mar 20, 2022

A desktop app optimized for people to play web-based incremental game

plaza-app A desktop app optimized for people to play web-based incremental game Setup yarn to install dependencies Local testing yarn start to open lo

Dec 24, 2022

Monks and Mages is a TCG-game built on React and socket.io

Monks and Mages Monks and Mages is a trading card-style game inspired by Heroes of Might and Magic / Magic the Gathering. The gameplay is similar to M

Sep 22, 2022

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!

English | 简体中文 | Русский | Türkçe | 日本語 | Français | Português | العربية Ant Design Pro An out-of-box UI solution for enterprise applications as a Rea

Jan 1, 2023

A simple stepper provides a wizard-like workflow by dividing content into logical steps.

A simple stepper provides a wizard-like workflow by dividing content into logical steps.

react-basic-stepper A simple stepper provides a wizard-like workflow by dividing content into logical steps. Install npm install --save react-basic-st

May 2, 2022

Its Amazon-like E-commerce store is called shopping-spree!

Its Amazon-like E-commerce store is called shopping-spree! The technologies used for this Project are React.js Frame work Next.js, MongoDB For Database, Mongoose, Material UI and JWT for Authentication Functions and Context API for managing the state Across the Application! where I've Implemented many Functionalities like ADD to Cart, Login, Register, with Next-Authentication, Shipping Screen, Order Details Screen, and Check-out Screen and UPdate the Profile Section Page!

Dec 18, 2021

Fetching data from REST COUNTRIES API, this app (mobile version for now) gives information like area, population, capital, and borders for 195 countries from seven continents.

Fetching data from REST COUNTRIES API, this app (mobile version for now) gives information like area, population, capital, and borders for 195 countries from seven continents.

Space Travellers' Hub World Countries App works with an API which returns informations about 195 countries. Fetching data from REST COUNTRIES API, thi

Aug 8, 2022

A simple and responsive quizlet-like flashcard component with a few additional options

A simple and responsive quizlet-like flashcard component with a few additional options

Welcome to react-quizlet-flashcard 👋 A simple and responsive quizlet-like flashcard component with a few additional options. Front and back card acce

Dec 17, 2022
Comments
  • enabled keyboard status to show key solution state

    enabled keyboard status to show key solution state

    Seems most of the work was in place to enable the keyboard to reflect the status of each letter in the guess history. This just connects the keyboard to the solution.

    opened by joshuaguy 1
  • Bug fixes and feature requests

    Bug fixes and feature requests

    Hello to the developer team who created this wonderful game! I found the game through product hunt and my friends love playing this game against each other. However, there are some significant UX improvements that could be done to attract and retain many of your users.

    Here are some bugs,

    1. Unclickable "Sign In" button in the magic link email. This is the second step of user onboarding where you are already losing them.
    2. For some reason, the email is automatically marked as spam which is not a good sign of trust.
    3. There's a slight delay in seeing the letters after a key is pressed on the keyboard.
    4. Buggy results page - Sometimes, the results are not displayed to the opponent if they have won.

    Here are some feature requests,

    1. Instant rematch button - If I want to play again with the same opponent, I would like to quickly start playing another game. Instead, I will have to create a new game and share the link with my friend.
    2. Automatic greying of used letters - As the letters are used up, greying them on the on-screen or virtual keyboard could be very helpful for the players. Refer to this for better understanding.
    opened by somesh-ks 0
Owner
Nico Andrade
Doing :)
Nico Andrade
Capture a famous phrase, download it without hassle and share it with your friends. 🎉

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Abraham Calsin 2 Mar 8, 2022
🥗 Track what you and your friends are eating

Comoki https://comoki.vercel.app Track what you and your friends are eating. Development This project uses yarn to manage dependencies. Install the de

Folkip 4 May 3, 2022
⚡ Something like react server components, but web workers instead of a server

react-worker-components-plugin ⚡ something like react server components, but web workers instead of a server react-worker-components-plugin is a plugi

M. Bagher Abiat 101 Nov 14, 2022
a fork version of vitesse-webext, but with react

@aiou/webext-template a fork version of vitesse-webext, but with react A Vite powered WebExtension (Chrome, FireFox, etc.) starter template. Edit on S

ruaaa 12 Dec 2, 2022
Mirrors the functionality of Apollo client's useQuery hook, but with a "query" being any async function rather than GQL statement.

useAsyncQuery Mirrors the functionality of Apollo client's useQuery hook, but with a "query" being any async function rather than GQL statement. Usage

Alasdair McLeay 7 Nov 16, 2022
🖱or ⌨️? 🤷‍♀️, but hopefully use-hover-state works on the "user intent" not the "device"

useHoverState() The one aware of keyboard navigation as well ?? npm i use-hover-state A React hook for tracking user interaction with the DOM elements

Marina 10 Aug 11, 2022
Setup all the linters you like for your react app in 1 minute 🚀

Create React Linters ?? Setup all the linters you like and don't let ?? slip into your code base! Eslint | Stylelint | Commitlint | Prettier | EditorC

Mo'men Sherif 19 Nov 18, 2022
A Chrome T-Rex game remake using javascript and threejs. Online demo: https://rossning92.github.io/t-rex

T-Rex Game in 3D A Chrome T-rex game remake using javascript and threejs. Build the code Make sure you have node 12+ installed: https://nodejs.org/en/

null 79 Dec 29, 2022
Open-source project which generates the Fortnite Item Shop in an image similar to the in-game design.

Fort-Shop Fort-Shop is a unique project which generates the current Fortnite Item Shop into a stylized image, similar to the new In-Game design (refer

im2rnado 25 Jan 5, 2023
This simple tic-tac-toe game is created by following the react documentation. and there's some modifications on it.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Kesara Karannagoda 1 Dec 29, 2022