Skip to content

Commit

Permalink
First commit: set up the sample project
Browse files Browse the repository at this point in the history
  • Loading branch information
dcollien committed Mar 14, 2018
0 parents commit cecbe09
Show file tree
Hide file tree
Showing 18 changed files with 1,063 additions and 0 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@

server/__pycache__/
52 changes: 52 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
# Sample Project: Activity to Practice Piano Notes

This project provides a work-in-progress codebase for a web-based activity that assists in learning the piano.

The project has two parts:

* A server (written in Python using Flask) which manages the data for the application
* A client (written in ES6 using React) which displays the activity to the user in a web browser

## Getting up and running

* Make sure python (version 3.5+) and node JS are installed on your system
* Install Flask into the python environment using `pip install flask`
* Navigate to the `client` folder and run `npm install`
* Once dependencies are installed, run `npm run build` to build the client project
* Navigate to the `server` folder, run `python run_server.py`
* Open http://localhost:5000/ to access the activity

## Task

This is a small starter project which we hope will become a fully-fledged activity. Your task is to add new functionality to this project to produce a working end product.

# New Functionality to Implement

The server and client need to be finished off such that:

## Server
* notes are served in a sequence (at the moment the same note is served over and over again - perhaps this could make a tune?)
* keys pressed by the user are checked on the server, against the current note in the sequence
* the sequence of notes progresses when the user provides the correct key (until the end of the sequence)
* a new method is added which provides the user with summary data of correct/incorrect attempts within the provided sequence

## Client
* when a key is pressed, it is checked with the server (using this.props.checkAnswer in App.js) to determine if this is the matching key, and feedback is given to the user (in a user-friendly manner of your design)
* the next note is then requested from the server, and displayed to the user
* a way for the activity to be completed, and a summary reported to the user's of their success (e.g. which keys were correct, and which they need to work on)

### Extension Ideas:

Demonstrate what you can do by adding your own functionality, e.g.
* storage of data in a data store (e.g. sqlite)
* support for multiple users: logging into a user session and storing where each user is up to in the activity
* improvement of look and feel, e.g. show off some CSS artisanry (or add other packages such as SCSS), or add audio when pressing the keys
* add unit tests that provide good testing coverage
* add a Redux store to the project such that state is no longer stored within App.js
* user results are reported on a separate page which can also be navigated to as a single page app (SPA)
* additional functionality of your choosing which adds educational value to the activity (be creative!)
* add a way for users to share their results, or upload their own sequences/tunes to teach each other

# Next Steps
Implement as much as you reasonably can, and document any ideas that you don't have the time to build - we may have the opportunity to try and implement some of them together.

22 changes: 22 additions & 0 deletions client/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.

# dependencies
/node_modules

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
yarn.lock
Loading

0 comments on commit cecbe09

Please sign in to comment.