This project was bootstrapped with Create React App.
Before running the project, please make sure you have the following:
- Node.js LTS version which can be found here. The course is upto date using this version at all times.
- Please refer to the help section below to resolve most common questions.
Yes, feel free to use your own IDE for the course.
To check your current Node.js version, open your terminal and type the command below to see your current Node.js version.
node -v
If you do not have the Node.js LTS version on your machine, you can download using either of the following:
-
Please go here and download the LTS version of Node.js installable file for your operating system.
-
Alternatively, you can use Node Version Manager (
nvm) to install LTS version of Node.js in case you do not want to delete the existing Node version on your machine.
NVMallows you to use multiple Node versions on your machine and prevent disrupting other projects you may be running with differentNodeversions.
Click on this link and follow the instructions provided in their README.md file to install nvm on your machine depending on your platform.
No, npm comes with Node.js
No matter what approach you use to install Node.js, npm will always come with it.
Open your terminal and type the command below to get your npm version.
npm -v
Click on this click and the npm version should be mentioned under the title Downloads.
You must ensure that the npm version and node version should match with what is mentioned on this official page.
This course uses v4.0.0 of Material-UI library
We are using react >=16.8.0 and react-dom >= 16.8.0 at all times. All the dependecies needed to run this project will be available in package.json
file. You do not have to worry about finding the peer dependencies to run the project.
All you need are the 2 following commands to get started as long as you have the right version of Node.
npm install
npm start
No, You don’t need to install or configure tools. You just need the LTS version of Node.js and the npm version that comes with it. They are preconfigured and hidden so that you can focus on the code.
We shall be using the latest version of Chrome as of today. Be sure to install/update Chrome on your computer.
- To open Chrome in Mobile view mode using Mac, press
Command+Option+i
To run the app in the development mode, Open http://localhost:3000 to view it in the browser. We are using Chrome Developer console in this course.
Here are few ways to do so:
-
Run the app in Chrome developer console by using the below URL. Open http://localhost:3000 The page will reload if you make edits and you will also see any lint errors in the console.
-
You can open Stratafly on your phone Chrome browser by using the IP Address from your console. For example after you run
npm start, you will see the following on your terminal.
You can now view stratafly in the browser.
Local: http://localhost:3000/
On Your Network: http://192.161.3.10:3000/
Note that the development build is not optimized.
To create a production build, use npm run build.
Open Chrome on your phone and hit this URL: http://192.161.3.10:3000
In the project directory, checkout the branch below:
git checkout module01_01_initial_setup
In the project directory, run the below command to install dependencies.
npm install
In the project directory, run this command to start the project.
npm start
- CodeSandbox (https://codesandbox.io/s/arrowfuntionsinreact-33ltd)
- CodeSandbox(https://codesandbox.io/s/rk48j)
- CodeSandbox (https://codesandbox.io/s/jz5py8ll5w)
- CodeSandbox (https://codesandbox.io/s/ppqw5yyy47)
https://material-ui.com/layout/grid/ https://material-ui.com/api/grid/
- In the project directory, discard any changes you made and checkout the branch below:
$ git reset --hard
$ git checkout module03_01_header
$ npm start
- In the project directory, discard any changes you made and checkout the branch below:
$ git reset --hard
$ git checkout module03_02_theme
$ npm start
- In the project directory, discard any changes you made and checkout the branch below:
$ git reset --hard
$ git checkout module03_03_triptype_traveller
$ npm start
- In the project directory, discard any changes you made and checkout the branch below:
$ git reset --hard
$ git checkout module03_04_location_dates
$ npm start
- In the project directory, discard any changes you made and checkout the branch below:
$ git reset --hard
$ git checkout module03_05_empty
$ npm start
- Here is the documentation of withStyles API: (https://material-ui.com/customization/css-in-js/#api)
- Material Grid API is available here: (https://material-ui.com/api/grid/)
- Material UI Overriding with classes: (https://material-ui.com/customization/overrides/#overriding-with-classes)
- In the project directory, discard any changes you made and checkout the branch below:
$ git reset --hard
$ git checkout module04_01_search_results
$ npm start
- In the project directory, discard any changes you made and checkout the branch below:
$ git reset --hard
$ git checkout module04_02_traveller_dialog
$ npm start
- In the project directory, discard any changes you made and checkout the branch below:
$ git reset --hard
$ git checkout module04_03_flights_data
$ npm start
- In the project directory, discard any changes you made and checkout the branch below:
$ git reset --hard
$ git checkout module05_01_search_flights
$ npm start
- In the project directory, discard any changes you made and checkout the branch below:
$ git reset --hard
$ git checkout module05_02_state_search_form
$ npm start
- In the project directory, discard any changes you made and checkout the branch below:
$ git reset --hard
$ git checkout module05_03_state_traveller_dialog
$ npm start
- In the project directory, discard any changes you made and checkout the branch below:
$ git reset --hard
$ git checkout module06_01_review_oneway_flight
$ npm start
- In the project directory, discard any changes you made and checkout the branch below:
$ git reset --hard
$ git checkout module06_02_review_roundtrip_flights
$ npm start
- In the project directory, discard any changes you made and checkout the branch below:
$ git reset --hard
$ git checkout module07_01_flight_payment
$ npm start
- In the project directory, discard any changes you made and checkout the branch below:
$ git reset --hard
$ git checkout module07_02_flight_confirm
$ npm start
Watch this video for deploying Stratafly using surge.
Note: Please make sure if you deploy it and showcase it in your portfolio, you add the credit or link(visible) to all the icons and illustrations. Else you might get into trouble by the creators
The images used in Stratafly have been taken from Noun Project. Attribution provided below:
- Flight by Juan Pablo Bravo from the Noun Project
- Created by ProSymbols from the Noun Project
- Travel by stephanie wauters from the Noun Project