Pig Latin Translator App

An SPA Translator that converts English to Pig Latin built with React.js

Table of contents

• General info
• Screenshots
• Technologies
• Demo
• Setup
• Scope of Functionalities
• Project Status
• Inspiration and Sources
• Contact

General info

Pig Latin Translator App is a continued project from my past project, Pig Latin Translator with Python. The website contains a Pig Latin translator, dictionary, and descriptions on Pig Latin.

Pig Latin Rules

• If the word begins with a consonant, all letters before the first vowel are placed at the end of the word and "ay" is added
  • "pig" = "igpay"
  • "happy" = "appyhay"
  • "smile" = "ilesmay"
  • "trash" = "ashtray"
• If the word begins with a vowel, "way" is added
  • "eat" = "eatway"
  • "egg" = "eggway"
• If the letter "y" comes at the end of a consonant cluster, it should be treated like a vowel
  • "rhythm" = "ythmrhay"

When is "Y" a vowel or consonant

• Reference
• Y is considered to be a vowel if
  • There is no other vowel (ex. gym, my)
  • The letter is at the end of a word or syllable (ex. candy, deny, bicycle, acrylic)
  • The letter is in the middle of a syllable (ex. system, borborygmus)

Screenshots

Technologies

• React.js
• muuri-react package
• react-github-corner package

Demo

Here is a working live demo

Setup

# Clone this repository
$ git clone https://github.com/danakim21/pig-latin-translator-app.git

# Go into the repository
$ cd pig-latin-translator-app

# Install dependencies
$ npm install

# Run the app and access it at localhost:3000
$ npm start

Scope of Functionalities

List of features ready

• Converts any word or sentences to Pig Latin
• Save word set to my dictionary -- Cards are placed in created date
• Save my dictionary to local storage -- Words still exist if the page is reloaded
• Able to move the cards as the user wants

To Do

• Delete cards from my dictionary
• Make cards size fit to word length
• Add tags and filter features for cards
• Make it responsive

Project Status

Project is: in progress

Inspiration and Sources

• Color scheme inspired by happy hues

Contact

Created by @danakim21 - feel free to contact me!