This app is deployed with github pages - https://alex90jennings.github.io/blackjack-react-app/
After 3 months of full time coding bootcamp, we are at the midpoint of the course and it's time to test our new skills! Given 2 days and unlimited freedom, we were instructed to create whatever we wanted. I decided that coding a card game woudld be a great demonstration of how much we've progressed over the 3 months, testing my knowledge of all things frontend.
My main learning objectives was to reach the MVP of a working one player game within the time constraint, whilst writing code that is readable and managing react state efficiently.
The game follows the standard casino rules for Blackjack, where the aim is to achieve a score of 21 without going over. The winner will have a higher score than the loser, but any score above 21 is an automatic loss.
The most challenging aspect of the project was the game logic, ensuring that the correct hand won depending on the Blackjack rules. In order to achieve this, I used TDD to test for all possible outcomes of the game. I found that TDD, although it takes up a lot of time initially, writes fantastic concise code and saves time in the long run in the avoidance of bugs in the logic.
Now, I am a big fan of TDD and hope all future projects and codebases come with a great set of tests!
Visit the URL - https://alex90jennings.github.io/blackjack-react-app/
Click on “DEAL”
Adjust your bet using the plus and minus buttons, when happy with the amount “CLICK TO BET”
Use the buttons under the cards to direct the game until there is a winner
Click the button “YOU WON”, "YOU TIED", “YOU LOST” or the row of emojis to contine, and then “PLAY AGAIN” to play another hand
Your wallet will reflect how successful you have been in the game, until the page is refreshed reseting the wallet to $1000
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify