Table of Contents
Alicia Villanueva - [email protected]
Project Repo Engineering Journal
Instrument Petting Zoo was a two-day challenge to create a Minimum Viable Product from an empty repo to Phase-One of a Full Stack Application. Emphasis was placed on learning advanced React techniques, form authentication and developing RESTful back-end services. IPZ is a web-application project that will continue to grow and develop towards a polished product.
"This project became a dream of mine when I was a college student first assessing incoming beginner band students. My hand was cramped from hours of writing notes on a student's sheet and I yearned to assess students more appropriately without the guilt of writing down a 1 out of 5 on their dream instrument. This thought remained with me into my official career as a band director and the process of assessing incoming beginners had not been improved. Band programs use an outdated system that requires families to register their students through a third-party application, require instrument assessors to use pencil and paper for student scores, and a final checkout process on a band program management application that the director must manually fill in the student's registered information and lastly their assessed scores. With this project, I aim to support hard-working directors by providing a modernized solution to this yearly process and relieving them greatly of the stress of this process. Allowing more time for the excitement and joy of placing a student on their very first band instrument."
To explore the project, follow the instructions below.
This is an example of how to list things you need to use the software and how to install them.
- npm
npm install npm@latest -g
- Have your API token available or generate a new one with github following this link Generate Token
- Clone the repo
git clone https://github.com/your_username_/Instrument-Petting-Zoo.git
- Install NPM packages
npm install
- Enter your PostgresSQL API key in
config.example.js
module.exports = { host: 'localhost', password: 'PASSWORD' }
- Remove the .example. from config.example.js to create config.js
Reminder to NEVER push your config.js file!
- Compile Webpack
npm run build
- Run express server on port: 3030
npm run server
- Navigate to
localhost:3000
in your browser
React Router, Material UI
React Router was implemented to create a seamless UI experience for families, assessors and directors. This implementation also granted time for async Database information to be returned and to populate the fields in the director page.
Future features of this module include:
- Firebase autentication for student registration
- Log in page for directors
- Persist director log in with localStorage
- Firesbase storage for registered students
Matierial UI
This page provides anonymity and comfort for the assessor to submit clear and direct feedback on a student's performance in addition direct communication to the band director in the student feedback section.
- A dropdown list is rendered with registered students from the database.
- Radio buttons replicate the columns and ratings for a students assesment.
- On submit, fom data is collected and imported into the students row within Postgres. Instrument score is translated to a numeric rating on submit.
The director page displays student information and assessment scores from the Posgres database. Student Roster page is used to displayed all registered students, basic contact information as well as their final instrument selction. The Final Checkout presents the student's numeric scores as well as the written feedback provided from the assessor.
- Seperation of routes allows for tables and fields to populate with updates to the Database without any asynchronous loading errors
- The Student Roster table is customized to filter on each column
- The student checkout updates the database on the selected student with their final instrument selection
- Google Firebase User Authentication
- Persist User Log In Through Local Storage
- Email feedback to family
- Create an anonymous feedback for assessor that will not be placed on the email
- Refactor Back-End Services to a Mongo Atlas Instance for cloud database services
- Chat communication between assessors and directors