Bootcamp Part 1: The basics

Deadline: October 15th 11:59pm ET

With every coding project, there requires a bit of setup needed to make sure your development environment is up to date and you have the needed requirements to develop and run code successfully.

You can find the (optional) video link for this week here: Video

Learning React

The first step to this whole bootcamp is learning React. Javascript is almost solely the only thing you will be using to write code for this project as the framework to build our whole application is React. Yes, you should know at least a little bit of Javascript prior to this (CS50 level is sufficient)!

The BEST way to introduce React is with Facebook's own tutorial: https://reactjs.org/tutorial/tutorial.html.

Yes, it may seem a lot, but it is worth it every bit. This will be the majority of the work for this week.

TASK #1

Do the React tutorial. You should use Setup Option 2, where you set up your own local development environment. Don't just read the tutorial, do it!

• I recommend VS Code as a code editor, for those who are starting out.

• You only need to do up to the "Adding Time Travel" section; you do not need to do the "Adding Time Travel" section. It is optional!

• Note: I understand that this tutorial may be a little complicated and may be difficult to understand everything first time through, so next week, we will really focus on React (components, state, etc.) concepts and coding.

Setting up Firebase Project

React is the framework we use to build the Datamatch website. To store user data, we use Firebase, essentially a database (but, Firebase is much more) that our React app will talk to directly. Over the next weeks, we'll see how useful Firebase is and how it supports much of our needs. Let us set it up:

TASK #2

1. Create a Firebase account via https://firebase.google.com/. Link your college email or personal, whatever you prefer.

2. Go to your console: https://console.firebase.google.com/. We're gonna create a new project! Name your project whatever you want, I went with bootcamp.

3. We don't need Google Analytics, and violà, you've successfully created your Firebase project!

Setting up your development environment

Since you did the React tutorial, you should have node and npm installed. If you don't... go do that React tutorial!! Here are the versions of the tools I'm working with:

node: v10.16.3
npm: 6.9.0
firebase-tools: 8.1.1

(I'm pretty sure the versions don't really matter for right now, but if something breaks, it's most likely a version issue, so stop by my office hours to debug it!)

TASK #3: Hosting your app

1. Create a new React app with create-react-app script: npx create-react-app bootcamp. Then change directories into the new app you created: cd bootcamp.

2. Install Firebase tools: npm install -g firebase-tools.

   • Note: if this command fails, it's probably because your user doesn't have the correct write permissions. If so, run sudo npm install -g firebase-tools.

3. Login to Firebase through the terminal: firebase login.

4. Initialize Firebase in your React app: firebase init.

   a. Select Hosting for right now.

   b. Select "Use an existing project" and select your bootcamp Firebase project.

   c. You should then set your public directory to be the build directory. And configure as a single-page app.

5. Build your app's static files for production: npm run build.

6. Deploy your app! firebase deploy.

If you don't want to run npm run build every time before you deploy, you can add "predeploy": "npm run build" under hosting in your firebase.json file.

TASK #4

Create a new Firebase project tic-tac-toe and host your Tic Tac Toe React app that you created from the tutorial using Firebase hosting.

Once you're done

Fill out this form when you're done!

Credits/Resources

Task #3 is adapted from https://medium.com/swlh/how-to-deploy-a-react-app-with-firebase-hosting-98063c5bf425