Digital pet
This is a customized version of a Tamagotchi, the portable virtual pet of the 1990s, built at a Brian Holt course at Frontend Masters. The project is developed with Vanilla Javascript with the aim of refactoring the code with other technologies. I decided to do it with React and not to use create-react-app and set up a project from scratch with Webpack, Redux and TypeScript.
Features
- The pet has sleep cycles depending on the length of the day and night, which the user cannot interact with.
- From time to time, it will tell us that it is hungry and will ask for food.
- Once fed, it will answer the call of nature and will be waiting to be cleaned.
- If both needs are not covered in a short period of time, the pet will die.
- You can switch to rain mode and normal mode whenever you want.
What I learned
- How to start a project from scratch with Webpack.
- How to configure CSS and SCSS modules with Webpack.
- How to configure TypeScript with Webpack.
- How to acquire a better understanding of JavaScript 'closures' with the 'requestsAnimationFrame' function.
- How to make advanced animations with sprites.
- How to build code in Vanilla JavaScript and refactor it into React with TypeScript and Redux.
Technologies
- Front-end: React with TypeScript, configured from scratch with Webpack, Redux and SCSS modules.
- Front-end: JavaScript Vanilla
- Back-end: -