This app Emoji Playground is a fun and creative app where users can try to solve pictogram riddles that other users have submitted, as well as start creating their own riddles so others can have a go at solving them. In addition users can also rate the ones they find the best ones and the website will display these ratings to other users. In order to participate the users have to setup an account and login to the app.
- User Experience (UX)
- Design
- Wireframes
- Exsisting Features
- Future Features
- Technologies used
- Testing
- Known Bugs
- Deployment
- Credits
-
-
As a first time visitor I expect to quickly find clear and concise information about what the website is all about and how to use it.
As a first time user I expect to be able to create my user account in order to both start creating and solving riddles.
-
As a returning user I expect to be able to create and submit more riddles to the service.
As a returning user I expect to be able to solve more riddles that others have submitted to the service.
-
As frequent user I expect that others have rated my riddles.
As frequent user I expect to create riddles that gets better ratings.
-
-
-
A simple colour palette of black, white, and grey has been used with highlighting tones of orange. This adds a vibrant and playful look to the website. The footer and nav bar colours are different to the main website background, so to distinguish them from the main body of the page. A slightly darker tone of orange has been used on links for a better colour contrast rating.
-
Headings are in Comfortaa and normal text is in Nunito. Comfortaa is a rounded and slightly cursive font. It is playful and adds personality to the website, while remaining easily readable. Nunito is a well-balanced, highly readable sans-serif font frequently used for websites and applications.
Fallback fonts of Verdana and sans-serif have been used in case the fonts cannot be imported into the site correctly. The website name in the Nav Bar is in lower-case, to enhance the playful nature of the font. Normal capitalization has been used elsewhere on the site for enhanced readability.
-
The website uses emojis throughout. This makes the website look and feel consistent. It also demonstrates to the user how emojis can be used interchangeably with words, which is a key element of gameplay. The jumbotron features an image of two people looking and smiling at their phones. This highlights the fun, peer to peer aspect of the game.
-
-
-
In the top of the landing page there is a navigation bar and information section about what the website is all about, displayed clearly to the users upon entering the site. Just enough of the necessary details to get started is shown in order to prevent information overload.
-
-
-
In the playground section the emoji riddles are shown with their ratings in order to inspire and motivate the user to create and submit their best riddles.
-
-
-
The Build Your Own Riddle section allows for playfulness when letting users be creative and start combining their own riddles using the provided emoji picker.
-
-
- This area is where the user will be challenged by riddles that has been submitted by other users.
- How it works:
-
Each of the answer words are compared to the guess words and broken down into matched and unmatched.
-
90% of the total words (matched and unmatched for both guess and answer words) must be correct for the guess to be marked as correct
-
This prevents the user from getting the answer right by just entering hundreds of words
-
Different messages appear depending on what percentage of words the user got correct. Eg. If the user gets 75% of the words correct the application instructs them that they are almost correct (“just a little tweak”)
-
For the answer to be correct the user must also get more than half the words in the answer correct.
-
-
-
After trying to solve the riddles, users are able to give each riddle a star rating from 1-5. The highest ranked riddles will be shown on the Playground.
-
-
-
Users can see Riddles they've created in their profile. They also have the option to edit and delete their riddles.
-
The application has full CRUD functionality, meaning the user can delete (click) or edit (click) their riddles.
-
-
- Pagination on the playground would be better suited to handling a large number of emoji riddles.
-
- Further styling to the logged in/ logged out alerts would be more aesthetically pleasing and present a better user experience.
-
- At present the player can replay riddles if they choose to. By adding something that marks a riddle as played, the user would know they have already completed it. It would be clearer to them what riddles are new or they have not completed yet
-
- Further sensory alerts to accompagny the congratulations message would further emphasis success to the player.
-
- A leaderboard would make it easy to see which emoji riddles people have played and rate the most. It could feature 'All Time' and 'Most Recent' categories.
- Google Fonts:
- Used for all fonts throughout the website by import to the style.css file.
- Font Awesome:
- Is used for the social media icons in the footer on all pages.
- Git
- Git was used for version control through the Gitpod terminal to commit and push to GitHub
- GitHub:
- Was used for all storing and backup of the code pertaining to the project.
- GitHub Projects
- Was used for managing tasks of the project
- Bootstrap:
- Was used as a framework for the front end design and layout.
- MongoDB:
- Was used for the database program.
- Flask:
- Was used as a framework for the backend integration.
- Vanilla emoji picker
- The emoji picker is an external library integrated into this project.
-
As a first time visitor I expect to quickly find clear and concise information about what the website is all about and how to use it.
- Upon entering the website, users are immediately greeted and guided with the necessary information that quickly allows the user to get started and a call to action to sign up to the service in order to participate.
As a first time user I expect to be able to create my user account in order to both start creating and solving riddles.
- The user accounts buttons are located at the top in the nav bar to be able to be easly found by the users.
-
As a returning user I expect to be able to create and submit more riddles to the service.
- As a returning visitor the user will be able to login again to their account and continue to add riddles to their profile.
As a returning user I expect to be able to solve more riddles that others have submitted to the service.
- After learning how the website works and trying to solve riddles, the users will quickly learn how the riddles works and be able to improve their skills.
-
As frequent user I expect that others have rated my riddles.
- As a frequent user you will have submitted many riddles and the likelihood of someone rating them will have increased.
As frequent user I expect to create riddles that gets better ratings. I can see their rankings on the playground.
- After submitting several riddles and receiving ratings, the user will be able to improve on their riddle creating skills by learning which ones that gets the best ratings.
- Different browsers including Google Chrome, Internet Explorer, Safar and Microsoft Edge has been used on order to test and confirm the compatibility of the website.
- In order to make sure all the links and navigation works properly, proper testing was done to confirm functionality.
- Correct scaling on different devices was tested using the tool below:
| Bug | Solution | Status |
|---|
|The "Next Riddle" button in playground did not work properly|Updated the related function |Fixed |
- Go to the project repository
- In the right most top menu, click the "Fork" button.
- There will now be a copy of the repository in your own GitHub account.
- Go to the project repository
- Click on the "Code" button.
- Choose one of the three options (HTTPS, SSH or GitHub CLI) and then click copy.
- Open the terminal in you IDE program.
- Type
git cloneand paste the URL that was copied in step 3. - Press Enter and the local clone will be created.
- Go to the project repository
- Click the green button that says "Gitpod" and the project will now open up in Gitpod.
I followed the below steps using the Code Institute tutorial:
The following command in the Gitpod CLI will create the relevant files needed for Heroku to install your project dependencies pip3 freeze --local > requirements.txt. Please note this file should be added to a .gitignore file to prevent the file from being committed.
- Go to Heroku.com and log in; if you do not already have an account then you will need to create one.
- Click the
Newdropdown and selectCreate New App. - Enter a name for your new project, all Heroku apps need to have a unique name, you will be prompted if you need to change it.
- Select the region you are working in.
You will need to set your Environment Variables - this is a key step to ensuring your application is deployed properly.
- In the Settings tab, click on
Reveal Config Varsand set the following variables:- If using credentials you will need to add the credentials as a variable, the key is the name 'CREDS' and the value is the contents of your creds JSON
- Add key:
PORT& value8000
- Buildpacks are also required for proper deployment, simply click
Add buildpackand search for the ones that you require.- For this project, I needed to add
PythonandNode.js, in this order.
- For this project, I needed to add
In the Deploy tab:
- Connect your Heroku account to your Github Repository following these steps:
- Click on the
Deploytab and chooseGithub-Connect to Github. - Enter the GitHub repository name and click on
Search. - Choose the correct repository for your application and click on
Connect.
- Click on the
- You can then choose to deploy the project manually or automatically, automatic deployment will generate a new application every time you push a change to Github, whereas manual deployment requires you to push the
Deploy Branchbutton whenever you want a change made. - Once you have chosen your deployment method and have clicked
Deploy Branchyour application will be built and you should now see theViewbutton, click this to open your application.
-
This project was created by:
- Bootstrap classes were used in this project for festures including layout, navigation, buttons.
- Code Institute's Gitpod full template was used for this project.
- The hero image comes from Afif Kusuma via Unsplash.
- Thank you to Code Institute for organising this Hackathon!