This is my submission project for a NZMSA Post Workshop Competition. It is a padlock web app where you try and unlock a padlock that has a set 3 digit combination. With a clean design and plenty of visual flares, it was a blast to make!
This project was bootstrapped with Create React App, and it uses the languages and frameworks taught at the Software Development Workshop, most of which were new to me, such as:
- Typescript
- React
- create-react-app
- Git and GitHub
- HTML and CSS (and SASS as an extra challenge)
- Many other JS node librires, such as react-anime for the animations, and github-corners for the github link.
Hang on, this doesn't meet the base requirements for the competition! It explicitly says entering a correct/incorrect combination must make an image appear on the page! Check the top left corner when you press validate :)
THE PASSWORD FOR THE LOCK IS 1-2-3.
Firstly, run npm install to install all the project dependancies.
Next, run either npm start or npm run build depending on if you want to run the app in development mode (open http://localhost:3000 to view it in the browser) or if you want to build the app for production (it gets deployed in the build folder but make sure to change the 'homepage' option in package.json).
Massive shoutout to the time and effort put into the documentation for react, create-react-app, typescript, and animejs. Community efforts such as this cheatsheet proved priceless, but obviously the biggest source of help was the MSA team. The written README guides on their GitHub repository are awesome summaries of the workshop!
Ha, hilarious joke. But all issues are welcome! A lot of what I used is new to me, and chances are I'm not doing it right.