Introduction 👋🏻

Hey everyone, I am new to writing blogs and this one is going to be my first one. Thanks to #HasuraHackathon for motivating me to start. In fact, I registered on Hashnode a day before the deadline😂.

Introducing Saydle 🔠

I am obsessed with Wordle these days, which also is the inspiration for this project. Saydle is a fun project which I built to give a twist to normal Wordle. We normally use our keyboard to type the letters and guess the word, right? In this game, we can't type. In fact, there is no keyboard. Instead, you have to use your voice to speak the words rather than typing.

Tools and Technologies ⚙️

• HTML/CSS/Javascript
• Hasura (GraphQL)
• Sawo (Authentication)
• Heroku Postgres (Database)
• Deepgram (AI speech-to-text)
• Replit (deploy)

Code Walkthrough 🧑‍💻

Environment Setup

• The full code is available on Github. Clone the repository here.
• Register a project on the following and make a note of their API KEYs
  1. Hasura
  2. SAWO Labs
  3. Deepgram

HTML files

• Header section (contains the title)

  <header>
      <div class="title">Saydle</div>
      <hr />
  </header>
  

• Alert container & Stats container (for notifications and displaying statistics)

  <div class="alert-container" data-alert-container></div>
  <div class="stats">Loading stats...</div>
  

• Guess grid (30 tiles)

  <div data-guess-grid class="guess-grid">
      <div class="tile"></div>
      <div class="tile"></div>
      ...30 times
  </div>
  

• Captions (To display transcription)

  <div class="captions-container">
      <button class="record">
        <svg
          width="40px"
          height="40px"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9 18v-1.06A8 8 0 0 1 2 9h2a6 6 0 1 0 12 0h2a8 8 0 0 1-7 7.94V18h3v2H6v-2h3zM6 4a4 4 0 1 1 8 0v5a4 4 0 1 1-8 0V4z"
          />
        </svg>
        <h3>Record</h3>
      </button>
      <span class="captions"></span>
  </div>
  

Screenshots 🖼️

Features 🤩

• No keyboard means that you can't see which characters you have already used on the on-screen keyboard. Though, you can see the grid to make out the unused letters.
• Also, there is no Enter or Delete key concept in this game. That means, as soon as you speak a 5 letter word, it is automatically submitted 😈.
• Moreover, how are you gonna tackle homophones (same sound but different spelling)? (Continue reading to get a hint)
• It uses passwordless authentication to authenticate users and maintain a history of the number of matches played and the number of matches won against each user.

Challenges I faced 😤

• I built this project in under 24 hours as I got to know about this Hasura X Hasnode hackathon recently only. Therefore, the major task was to publish a decent web app in less time.
• This was also the first time I was working with Hasura & GraphQL, but it didn't feel as if it was the first time I was using it, thanks to the impressive documentation.
• It is difficult to tackle homophones (same sound different spelling and meaning) when playing. But Deepgram uses AI, therefore, we can say sentences where the target word is the first word in sentence. For example:
  • (1) There is a house. // picks up the word THERE.
  • (2) Their family. // picks up the word THEIR
• I was also exposed to blogging because of this hackathon. Suggestions & constructive criticism to improve are welcome!

Future Scope 🔮

• This is a static web project and does not ensure the security of your API keys. I would be migrating this project to ReactJs with better management of secrets.
• Wordle has a very minimal UI and I wanted to retain the same. However, I would be making a better UX by adding themes, animations, transitions, etc.
• Adding features like a leaderboard, difficulty level, word length, time limit etc would make it even more fun.
• Just wondering what if on winning a match, your voice recording is minted as an NFT!? Would love to hear your opinions and suggestions, especially on this feature

Links 🔗

• Deployed App
• Github Repo

I can't thank Hasura and Hashnode enough for hosting this hackathon and introducing me to GraphQL and blogging. Got to learn a lot of new things! Would love to see your thoughts about the project Saydle!