Scores Test Assignment

Installation and usage instructions

git clone https://github.com/manomintis/score.git
cd score
npm install
cp .env.example .env
# open .env and paste your Firebase credentials
npm run dev

Open http://localhost:5173

Some information for your knowledge

• Zoom out before watching. Since this app is supposed to function in a kiosk I applied some styles that prvent from accidental selection and scrolling. Therefore you might want to zoom out your browser window in order to see the full canvas, otherwise you wouldn't be able to scroll the page down.
• Visual design. I made the design look very close to what you sent me in Figma but I didn't follow it pixel to pixel
• Validation. I did not make form validation very user-friendly. I implemented it in order to show that I'm aware that it is important thing to have and in order to have something in this codebase to test. But it only prevents form from submitting, it doesn't communicate properly to the user and does not explain the reason why form submission failed.
• Loop key. I used index as a key in the loop instead of item unique ID. I understand that this is not a good practice but I didn't want to complicate this codebase, especially if rendering five rows only.
• Testing. Although you mentioned Jest, I used Vitest. The reason for that is that I am using Vite for this assignment and using Vitest is recommended for Vite. I noticed that your Figma design is 4 years old, so the instructions you sent me might be also old and refer times when Vite was not very common and Jest was a default. Therefore, I decided that this deviation from your instructions would not be a problem.
• Time it took. It took me about 2 hours 18 minutes.
• Easiest part. The Vite/React part was the easiest, like creating components, unit tests.
• More challenging part. Firebase, SCSS, and component test. These are not difficult things at all, however my Firebase and SCSS were not very hands-on. I had experience with both of them but these tools are not from my every day tool set, so I had to catch on Firebase rules and subscription. Similar thing was with SCSS. I'm used to Tailwind in most of my projects, I haven't used SCSS for a while. So I had to recall it a bit. Component test was more challenging, because I usually use Claude for creating component tests. But this issue just slowed me a bit, eventually the test works.

Firebase rule I used

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /scores/{document} {
      allow read: if true;
      allow create: if request.resource.data.keys().hasAll(['firstName', 'lastName', 'score']) && request.resource.data.score is number;
    }
  }
}