Git Product home page Git Product logo

buzzphonics's Introduction

buzzphonics

buzzphonics-pages

buzzphonics-walkthrough

๐Ÿ‘จโ€๐Ÿ’ป Demo

Check out the website: buzzphonics

Tech used

HTML5 CSS3 React React router

Icons made by Freepik from www.flaticon.com.

๐Ÿ—ฃ๏ธ About this project

I want to create a phonics sound page that I can save on my phone and have to hand when reading with my daughter who's just started learning to read. I often need to find out what a certain sound is and end up googling it every time. I need something quick and easy to click on.

  • Simple idea - a list of sounds to listen to โœ”๏ธ

  • Small stretch goal - flip whole page and it has images (e.g fox for f) instead of the letter โœ”๏ธ

  • Stretch goal - login and track progress through the sounds

  • Stretch goal 2 - games โœ”๏ธ

๐Ÿ‘จโ€๐Ÿ’ป Contributing

๐Ÿ›ก๏ธ License

Phonics sounds is licensed under the MIT License - see the LICENSE file for details.

๐Ÿ‘‡ Prerequisites

Before installation, please make sure you have already installed following tools:

๐Ÿ› ๏ธ Installation Steps

  1. Fork the project
  2. Clone the project
  3. Navigate to the project directory cd buzzphonics
  4. Install dependencies with npm install
  5. Run npm start

Show your support

Give a โญ๏ธ if this project helps you or you like it.

buzzphonics's People

Contributors

hellodeborahuk avatar prakhart111 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

buzzphonics's Issues

Add micro game

Display a picture of something and provide three options for sounds that the something starts with.

ScoreBoard update request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is Get the score board on top, with a better design.

Ex. I'm always frustrated when I need to go at the bottom of the screen, to view my score.

Describe the solution you'd like
Below the good afternoon message, the score board should be placed, with a better, more circular design.

Describe alternatives you've considered
I am not sure why the project isn't running on my local machine, I think have some issues on my side, will resolve it, so just creating an issue for this feature request.

Additional context
Not yet, but yours project is good, found it on HashNode.

Will be coming up with more feature updates when it runs on mine ;)

Twitter ?
I am here

Phase 5 sounds

Is your feature request related to a problem? Please describe.
Create phase 5 sounds for Year 1.

Describe the solution you'd like
All sounds added, even where one grapheme has 2 pronunciations.

Describe alternatives you've considered

Additional context

Add icons

<img src={../images/${sound.icon}.png} alt={sound.icon} className="sound-icon"/>

Feat: Reading game

Reading game idea.
Word eg chair, with 3 icons below to guess from. Should be a simple copy of the quiz game below, the code should be very similar as the game play is the same.

quiz game

Hangman game

Describe the solution you'd like

A new game for phase 3 words. Based on hangman, but using some of the words in the phase 3 games already in the project.

Additional context

  • This is for a 4/5 year old, so they can't read yet, instructions need to be very visual. It's to be played with an adult so they can guide them through it. It should follow the design and congratulations of the other games in the app.
  • To make it easier, it could have the letters beneath 2 or 3 times the number of options, so for a 4 letter word it would have 8 or 12 letters to pick from. This isn't using keyboard letters, it's using phonics, so some sounds will be like "ch", not "c" and "h".
  • Add point on completion.

Greeting

Add a greeting to the start page, with good morning/afternoon/evening depending on their location.

Real or fake word game

Drag and drop game. A word appears on the screen and you have to drag and drop it onto "real" or "fake". These could also be buttons instead.

What happens if you get it wrong?
Get it right and another word appears - max 5/6.

Fill in the blank game

Sentence with a word missing ____
Drag and drop the correct word into the space from a list of 3 or 4.

Next button works with incorrect answer

Describe the bug
You can move onto the next question without getting it the current question right.

To Reproduce
Steps to reproduce the behavior:
In the Quiz, you can choose the wrong answer, click Next and go to the Next question.

Expected behavior
Next button disabled until question is answered correctly.

Add different background colours to sounds

--green: #11C684;
--purple: #6B74E0;
--pink: #F878B5;
--blue: #0671D5;
--yellow: #F7BF31;
--light-blue: #6CDFEF;

Randomly assign one of these colours to each div that has been mapped.

A game landing page

Add a games landing page, rather than link individual games from the home page. LInk to games landing page from home page below the phase 2/3. Games page to look similar to home page.

home page design

Wordsearch game

Describe the solution you'd like
A wordsearch game. One for phase 2 words and one for phase 3 words.

Additional context

  • 5-6 words in each game with a grid of roughly 3x4, 4x4 or 3x5, whatever looks good and uses all the words.
  • List the words above the wordsearch, perhaps in 2 columns so that it doesn't take up as much space.
  • They need to click on the letters of the word in the correct order.
  • Once clicked, it changes colour (on brand), and then if the word is correct it changes again to a different colour.
  • As this is for 4/5 year olds, words shouldn't overlap and should not be in reverse order. Preferably mostly from left to right.
  • Similar in design to other games, especially the congratulations.
  • Add a point for completion.

Add login and track points

Describe the solution you'd like
Have the ability to login to your account and save the login details. This app is for 4/5 year olds, it needs to remain logged in unless you choose to logout. The points will be tracked.

This could be done using Supabase.

Login would need to be via username and password, rather than an email or other account, as it's for kids who wouldn't have these things. Username would need to be unique.

Concerns

  • I want quick access to the sounds, are these before the login screen?
  • Is login needed or is local storage enough?

Updating the project name.

Describe the bug
Project name not updated at some places in README.md and CONTRIBUTING.md

To Reproduce
Steps to reproduce the behavior:

  1. Go to README.md and CONTRIBUTING.md
  2. See error

Expected behavior
Replace 'phonics-sounds' name with the new name of Repository 'buzzphonics'

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.