Skip to content
The JavaScript and CSS for Scorecard.dev
CoffeeScript CSS JavaScript
Branch: master
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.
src
.gitignore
README.md

README.md

Scorecard.dev Frontend Files

This repository contains only the frontend files for Scorecard.dev. The purpose of this repository is to act as a demonstration of my proficiency in building applications. If you would like to read the story of how exactly this frontend was created, it is available at neilgreen.dev.


FAQ

Who wrote this code?

I (Neil Green) wrote all of the frontend and backend code for Scorecard.dev.

How long did it take you to write?

I began writing Scorecard.dev in May of 2019, and it took around six weeks to build, test, and launch. The frontend files represented in this repository took about two weeks. The remainder of the application (backend and DB) took another two weeks, with another two weeks of integration and beta testing.

Can I run this code locally?

No, as this is only a copy from a private repository that contains all the files needed to run the full application. As Scorecard.dev is a commercial product, I only wanted to release code publically that was readily available by inspecting the files downloaded in the browser. You can, however, use Chrome React and Redux dev tools to inspect the live running application, as well as inspect source code as source maps are enabled in production.

What technologies does this project use?

This project uses React, Redux, SASS, and CoffeeScript.

Why was CoffeeScript used as the JavaScript transpiled language?

The shortest answer is that I find that it has superior characteristics to other options for my needs for this project. When I am working on projects with other people, I use whatever language that the project uses, which is typically ES6 or TypeScript. If you would like to see my deep-dive into the pros and cons of each Transpiled language, you can watch my talk TypeScript vs. CoffeeScript vs. ES6.

Why was Redux used over React Hooks?

The timing of this project is that Hooks were still relatively new before I started, and I was not 100% certain that they were a better tool than Redux for the use cases that I knew I needed to implement. As I already had extensive experience with Redux, I was 100% certain it could do the job I needed it to do.

Why was SASS used as the CSS transpiled language?

My preference for SASS comes primarily from its minimalist whitespace-structured syntax which has a close synergy with CoffeeScript and Pug. Generally, I prefer whitespace-structured syntaxes, as I believe most people do who become familiar with them. I believe this general preference is part of the reason for Python's rapid rise in popularity, as it is also whitespace-structured.

What did you use for your web bundler?

I used WebPack with a custom plugin to upload JS and CSS file bundles to Amazon S3 for serving through Amazon CloudFront as a part of performance optimization. If I were writing the project again today, I would most likely evaluate using Parcel, as Webpack's configuration is a bit cumbersome.

How is the backend for this project built?

The backend for Scorecard.dev is built with Node and Postgres and is hosted on Heroku. The web server uses Express, and KnexJS is used for database access. The backend uses AWS (S3 & Cloudfront), SendGrid, and PayPal for its cloud services. The authentication is custom-built to match the specific characteristics I wanted for this app.


How can I get in contact with you?

My email address is neil@neilonsoftware.com. You can read more about my background on my blog neilonsoftware.com, as well as on my LinkedIn profile. My full resume is available at neilgreen.dev/resume

You can’t perform that action at this time.