Using Redux and TypeScript preview the final result
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:45] Preview the final result. A complete code example is located in code 0.4-redox/ completed. Unzip the archive that comes with the book. Unzip the archive that comes with the course and CD to the app folder. CD code 0.4-redox/completed.
[00:46 - 01:05] Once you are there, install the dependencies and launch the app. Yarn and Yarn Dev. The Yarn Dev command will launch the app along with the backend script. It should also open the app in the browser.
[01:06 - 01:29] If it doesn't, navigate to HTTP/localhost3000 and open it manually. You should see an empty canvas and a color palette. Try drawing a few lines.
[01:30 - 01:48] You can pick different colors using palette in the bottom. If you don't like how some of the strokes turned out, click the undo button.
[01:49 - 02:03] Click the redo button to bring them back. To save the project, press the save button on the file panel.
[02:04 - 02:23] You should see the project saving dialog. Pick the name for your project and press the save button.
[02:24 - 02:53] Now if you reload the page, you can load your project and continue drawing. You can also export your image to a file. To do this, press the export button.