A simple notes and organization mobile app for private music teachers built using React Native and Google Firebase
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
android
images
ios
src
.babelrc
.buckconfig
.flowconfig
.gitattributes
.gitignore
.watchmanconfig
README.md
app.json
index.js
package-lock.json
package.json
yarn.lock

README.md

ClefNotes

A new way for private music teachers to keep their notes in line

Logo Image

ClefNotes is a notes and organization app designed for private music teachers to help manage their students' information and track their weekly lesson times. It is built using the cross-platform React Native library (iPhone- and Android-friendly), Redux for app state management, and uses Google Firebase for user authentication and user data storage.

Running the Demo

ClefNotes will soon be added to the App Store and Google Play but in the meantime, a live demo can be found here! After clicking the link, if you do not see a mobile phone simulator open on the right side, look at the toolbar at the bottom of the window and toggle the 'Preview' switch to 'on'. There, next to 'Platform', you can also toggle whether you would like the simulator to show in iOS or Android. Once the simulator is ready, you can click 'Tap to Play' to try out the app in the simulator there in your browser or you can click 'Run on your device'. For the latter, simply download the free Expo Client app on your mobile device and use it to scan the QR code that appears in the pop-up. You can then demo the app on your own mobile device. Once you see the ClefNotes login page, feel free to use "Test@test.com" and "password" for the ClefNotes guest username and password login. Enjoy!

  • Note: You do not need to worry about the displayed code at all or the uninstalled dependency warnings that appear on the left side. Please leave that side alone and just use the simulator on the right side to interact with ClefNotes.

Features

1. Student Management

stud gif

Users can easily manage their students with full Create-Read-Update-Delete capabilities. After initial creation, tapping the "Info" button for each student will bring you back to the Student Form with all of that student's current information pre-populated. Tapping the "Save Changes" button at the bottom will immediately update the student's info with your changes.

2. Communication Shortcuts

comm gif

In the master List View page, tapping on a student's name will expand their section, revealing their instrument, lesson day, and lesson time, along with various shortcut communication buttons. If the student has the "Can Text?" option enabled, a blue Text shortcut button will be available. Otherwise, a green Email button to email the student will appear instead. Each of these shortcut buttons will navigate you to that app in your device, with the student's info (phone number or email address) pre-filled for you.

3. Dual Students View

dual gif

You can view your students in two ways: in the general List View where you can see all your students in a master list and access their individual information, or you can view them in chronological order in the Week View, which sorts your students by their lesson days and then again by their lesson times.

4. User Authentication

auth gif

ClefNotes makes use of Google Firebase for both user authentication and data storage. Users have the option to login with an existing account or create a new account. Any authentication errors are caught and displayed to the user.

Code Sample

One of the bigger challenges in building ClefNotes was dealing with the student's lessonTime attribute - to properly display and function across the different components, it needed to take different forms and lengths and be converted to different types at different times. I solved this by doing all my conversion in the Student Form component and saving the results to the student object as 3 different values. In the form, the selected time is first saved as a JS Date object, which is used as the initial display time when the user wants to change it later on. Second, the selected time is converted to and stored as a 4-digit integer so that it can be sorted in the Week View component. Finally, the selected time is converted to a user-friendly, more readable 12-hour string format with "AM" and "PM" appended, used for display purposes in multiple areas.

createTimeInt(time) {
  let hour = time.slice(0, 2);
  let mins = time.slice(3, 5);
  let intString = hour + mins;
  return parseInt(intString);
}

convertTime(time) {
  let hour = time.slice(0, 2);
  let mins = time.slice(3, 5);
  if (parseInt(hour) < 12) {
    return hour + ":" + mins + " AM";
  } else if (parseInt(hour) === 12) {
    return hour + ":" + mins + " PM";
  } else {
    return (parseInt(hour - 12)).toString() + ":" + mins + " PM";
  }
}

pickTime(time) {
  this.props.studentUpdate({ prop: 'dateObj', value: time.toString() });
  time = time.toString().slice(16, 22);
  let timeInt = this.createTimeInt(time);
  this.props.studentUpdate({ prop: 'timeInt', value: timeInt});
  let newTime = this.convertTime(time);
  this.setState({ chosenTime: newTime });
  this.props.studentUpdate({ prop: 'lessonTime', value: newTime });
  this.hideTimePicker();
}

Future Directions

In future updates, I'd like to implement the following:

  • add an option to open student addresses in Maps
  • sync student lesson days and times with phone Calendar app
  • add reset password by email option to login form
  • email verification on new user registration
  • add Google and/or Facebook authentication options
  • add push notifications and alerts for upcoming lessons

Credits