An app for managing data collection for the Albany High School Freshman debates.
There is a lot to learn. It took me many months before I got to feel productive working on the project. While it may be frustrating at first to learn the setup, design decisions, including developer tools and libraries have been made with the intent to reduce work by the developer and improve quality.
- JavaScript
- The app is built in JavaScript so that it can be run entirely in the client's browser, removing the need for a full backend.
- React
- We use Facebook's React JavaScript framework to build the app in a modular way. React provides tools for easily and efficiently building HTML in the DOM from within the app, as well as dividing it into components which can be easily composed.
- Lo-Dash
- Lodash provides utility functions (especially for dealing with arrays, object etc.). It is a drop-in replacement for Underscore.
- Parse
- Parse is a hosted relational database providing the backend for the project.
- Grunt
- We use Grunt to manage development tasks including building the app with Webpack and linting code with JSXHint.
- Webpack
- We use Webpack to build the app. It converts all of the JSX files to vanilla JavaScript before inlining all of the modules into a single file, and in the case of a production build, minify the source.
- NPM
- We use NPM to manage all of the project's depencies.
- Bootstrap
- We use React Bootstrap to easily and cleanly style pages.
- Github
- We host all of the project's source code in a Github repository.
- Git
- We use Git to manage the project's development
- A great cheatsheet can be found here (beware of light profanity).
- Install Node.js
- This should install the Node Package Manager (npm)
- Install global binaries:
sudo npm install -g grunt-cli webpack firebase-tools
- Install local dependencies:
npm install
- One time development build:
grunt dev
- Rebuild on file changes:
grunt dev-watch
- Production build (includes minimizing):
grunt dist
- Documentation
- Use JSDoc
- Authentication/Authorization
- Change name from ahs-freshman-renewal when new name is decided upon
- Allow Unicode characters in minimized source
- Fix Unicode support for multi select boxes (non-minimized source)
- Validation feedback for select boxes
- Consider Gulp or other task runner over Grunt
- User PureRenderMixin
- Refactor component state into Flux store
- Consider Babel for ES6 support
- Tests
- Consider using immutable data types such as ImmutableJS in place of pure Lo-Dash functions.
- Abstract backend-storage format out of view logic
- Upload support
- Fix Compression
- Consider SystemJS for CSS/Less loading etc.
- Consider JSX for virtual-dom instead of React w/ JSX