Set-up For Part II
We begin working on building the TinyHouse application by first modifying the code from the end of Part I of the course to prepare us as we move forward.
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 TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:18] On the left-hand side, we have our Visual Studio Code Editor that contains a tiny house folder that has the client and server directories we 've left off from part one of the course. On the right-hand side is our Chrome browser, running on localhost3000, and shows the UI of what we've built in part one.
[00:19 - 00:36] As we proceed through part two, we'll have the running browser be shown on the right-hand side here in certain times, and in other times we'll simply have it placed in a new separate window. Throughout part two of the course, we'll be working and moving between the client and server projects.
[00:37 - 00:54] It's also safe to assume that the Webpack React client and Node Server projects are always running as we proceed. In certain cases, when we may need to exit either server or introduce additional dependencies, we'll head to the terminal to do so.
[00:55 - 01:10] In this short lesson, we'll make some very small modifications to the client and server projects. The first thing we'll do is ensure the names of our client and server directories are about the same, and we'll do this in the package JSON files of each folder.
[01:11 - 01:28] So first of all, we'll head to the package JSON file of our client project, and we'll provide the name of TinyHouse-Client. And in the server project, we'll do something similar and provide the name Tiny House-Server.
[01:29 - 01:46] The Ant Design UI framework will play the biggest role in helping us style the presentation of our client application. With that said, however, there are some custom styling we'll provide to customize a few of the components and sections that we intend to build in our app.
[01:47 - 02:12] To avoid us from having to write this custom CSS code as we proceed through the course, we're simply going to place a pre-existing master CSS file in the index.css file kept in the styles folder. So this is essentially all the CSS code we'll need in our TinyHouse project, and we're going to provide this CSS file in the lesson documentation.
[02:13 - 02:28] If we take a look through the file, we'll notice that the CSS code being specified here is pretty straightforward. The benefit of having this file is that now when we begin to write our components, we'll simply reference the classes we've created here to get the intended styling changes.
[02:29 - 02:50] And we've imported this index.css file in the source index.tsx file, which is the root parent file of our React project. Great. We're not going to remove any existing code we have from part one yet, and we'll be making changes to the client and server directories as we begin to proceed.