Project: Draft 2 (React)

For this deliverable, you will provide a second draft of your Project to confirm that you are making progress on the React version of your project. This draft will have the same "static" content as the previous draft, but implemented using React Components (instead of just HTML), as well as one working interactive feature. For this draft you will need to set the scaffolding for your React application, implement Components for a significant amount of the app, implement some interactivity, and then publish your React app to a different hosting service (Firebase Hosting).

The goals of this draft are (1) to make sure you've started on the React version of the project (so it isn't delayed until the last minute) developing both content and interactivity, (2) to make sure that your plans for functionality/interaction continue to be in scope at this point, (3) provide feedback, support, and direction as you head into the final version of your project.

Much of implementing this draft will involve "copy/pasting" your HTML from your first draft into React Components, similar to what you did in the exercises. It's not as complex as you think but it is more work than you might expect. The second piece will be adding some limited interactivity, which can be a lot of work. Don't wait until the last minute!

Getting Setup

The below setup instructions are for the second and final drafts of the project. See the first draft for details about setting up for that deliverable.

Your second and final drafts for the final project you will be developed in the same repo you created for the project proposal and that you worked on for the first draft

However, in order to develop the final application as a React app, you will need to rebuild your app from the pieces of your first draft. To get set up, you'll need to perform the following steps:

1. Create a new folder somewhere on your computer (that is NOT inside the repo!) called project-draft. Using Finder or File Explorer, move all of the visible source files (except README.md) into that folder. Make sure to not move the hidden .gitignore file! This should effectively "empty" your repo.

2. Using the terminal, create the scaffolding for a new React application with Vite. You will need to make your app in the root folder of the assignment repo (not inside an additional "app" folder—you do not want that!):

    # change directories to your project
    cd path/to/project-repo
   
    # delete the extra files that GitHub Classroom creates
    rm -rf .github
   
    # create a react app in _this_ folder
    # note the period to create in current folder!
    # When prompted, choose to 'Ignore existing files and continue'
    npm create vite@latest . -- --template react 

   If you ended up with a separate "my-app" folder, you'll need to go back and try again!

3. After you've created the starter files, you will need to "clean up" src/ folder, removing the assets directory and App.css file. Deleting all the content of App.js andindex.css. You'll also probably want to remove the <StrictMode> element from main.jsx. Once you've done this, can begin implementing your project fresh with a new <App> component.

4. You can then copy/move the project-draft folder you created back into the assignment repo, so you can have that code for your reference! It won't interfere with the rest of your React app.

5. Commit and push your changes to GitHub. Your partner(s) should then pull down these changes so they have a copy on their machine as well.

Deliverable Requirements

The requirements for this draft are more concise than for the first draft, though they are still a significant amount of work:

1. You have created a new React application (following the instructions above).

2. You have developed static Components for a all of your app. Components do not need to be interactive; they can just specify the returned DOM content (so they won't be "finished" in that sense).

   Your Components will need to use props to be able to present content based on the data. The data can just be a hard-coded constant for now, but you will need some data-driven content in place! Don't repeat a lot of DOM content; use .map() loops instead!

3. You have added routing (using react-router) so that all page content is visible and can be found through appropriate links.

4. You have included some interactivity in your app, implementing at least one "feature". You have added event listeners for buttons/forms, made forms controlled Links to an external site. to track their input, and otherwise made your app "do something".

   You only need to complete one of your app's features (and its fine if its a smaller one!). A "sort and filter" feature is a good one to get setup at this point. You can also handle "posting content" features by making sure that data is saved to a Component's state. You don't need to include data persistence for any feature that will interact with or draw on a backend database (Firebase).

   In short: we want to see that you're able to include interactivity, update state variables, and render content based on that updated state by this point!

5. You have addressed most HTML/CSS issues present in your first draft (your page should "look better")!

6. You have published the running app to Firebase Hosting (see below). The application runs on this site; you can load up a version of your app with much of the content from your draft in place.

7. Your entire team has contributed to this draft. We will be checking that the repo's commit history contains commits from all group members (and that these commits involve substantial contributions to the work). We won't consider any flawed metric like "lines of code committed", but instead will be looking at what kinds of changes were made.

In short: we're looking to see that you've ported your first draft into React and are able to get something interactive up and running. Don't worry if it's not finish or totally working yet—this is a chance for you to get some help and direction as you move to the final version.

Publishing Your App

WARNING! This part can get tricky; it's easy to accidentally type in a wrong command or otherwise make a mistake that's hard to track down. Do not leave this step for the last minute; try to publish early and let us know if you get stuck.

Because Vite uses a build system to compile, bundle, and run your application (to convert the React JSX into JavaScript any browser can run), you need to perform a different set of steps to put your website online. In particular, you need to tell the Vite build system to create a "production" build (one that works outside of the development server you've been running).

The GitHub Pages infrastructure offered by GitHub ends up not cleanly support some React features, particularly client-side routing. Instead, for this class you will host your React project using Firebase Hosting Links to an external site.—the web hosting offered by the Firebase backend service (which you'll probably be using anyway).

In order to do this, you'll need to complete the following steps to configure your project for Firebase Hosting, and then to deploy it.

Configuring Firebase Hosting

Note that you only need to do this once per project. But if something goes wrong, you can always repeat these steps.

1. You will need to sign up for an account with Firebase and create a new "project" with their service. See "Creating a Project" Links to an external site. in the Firebase chapter of the course text. Note that you will be able to use this same project to provide user authentication and database features for your project!

2. Use npm install -g firebase-tools to install the Firebase command line tools, and then use the firebase login command to log in to the service from the command line (you'll need to provide your login credentials in the pop-up window). Note that if Google services are blocked behind a firewall for you, you'll need to use a VPN or have a teammate configure this.

3. You can then use the command line tools to set up hosting. From the root of your project directory, run firebase init. Follow the prompts to set up Hosting: Configure files for Firebase Hosting... (use the arrow keys to move down and spacebar/enter to select. This is a bit non-intuitive, so be careful).

   • You'll need to first select your project. If it doesn't show up in the list, just choose "[don't set up a default project]", and then once you're finished initializing you can use firebase use --add my-project-id to connect them.

   • Only select Hosting at this point, don't select any other features (even if you intend to use them later)!

   • For the public directory, type dist (don't use the default value!)

   • You will need to configure it as a single-page app (use y). Note that this means your entire site will be run from the single index.html file (you can't have any separate, non-React files). You'll be able to add in multiple web pages as part of the final version of the project.

   • Do not set up automatic builds (use N).

   • If you are prompted to overwrite any files in the dist folder, say N!

Building and Deploying to Firebase

These steps will let you create a production build and then deploy it to Firebase. If you make changes to your app, you will need to re-run all of these steps (similar to how you would need to "re-merge" commits to gh-pages). Remember that you'll need to commit and push your code to the main branch on GitHub!

1. Create a production build of your app using the npm run build command to run Vite's build script. This will create a "compiled" bundled version of your app in the dist folder.

2. Publish your production build to Firebase by using the command firebase deploy. This will "push" your code to Firebase!

You will be able to view your hosted website at whatever URL is shown in the command line after you deploy. This most likely will be:

https://firebase-project-id.web.app/

Working as a Group

All group members need to contribute to all aspects of the code to demonstrate that they understand the material. As with the previous draft, you are expected to use git to share and collaborate on code. Each person will need to make some changes, commit their work, pull/merge the changes from other people, and then push the compiled code to GitHub.

We will grade the final compiled work that exists on the main branch, as well as checking the commit history to confirm that all group members have demonstrated mastery of all of the material. We will be looking to see that each person has contributed substantively to defining new React components that use props to render content.

In addition, you will be required to fill out an initial peer evaluation Links to an external site. to help us evaluate group collaboration. Scores on this assignment will be adjusted to reflect unequal contributions (if any).

Submitting your Draft

In order to submit this draft, do the following:

1. Make sure your draft is complete and meets the requirements. It's okay if there are some bugs at this, but your app's content should be mostly there and we should be able to "do something" with its interactivity.

   • Also make sure the site works correctly when deployed! Make sure images load correctly, etc.

2. Tag your draft's final commit. For this deliverable, you should tag it draft-2 Make sure you tag the last commit on the main branch, and push the tag to GitHub!

   For example:

    git tag draft-2
    git push --tags

   (If necessary, you can tag small fixes as draft-2.1, draft-2.2, etc.) -->

3. Publish your webpage to Firebase hosting as described above.

4. Submit Peer Evaluation. Each group member will need to submit a peer evaluation Links to an external site..

5. Submit to Canvas. Be sure to add and commit the final version of your work and push your code to your GitHub repository (we will be grading the code on the main branch).

   Then submit both (1) a link to your code repo and (2) a link to your published web site to Canvas using the button at the top of the page.

   Since this is a group project, only one person needs to submit the link via Canvas

This draft check-in is for your benefit, to make sure you're on track and so you can get help and feedback as you get started with React! I strongly encourage you to also reach out to your TA or meet with them during office hours to get more synchronous feedback.

Grading

If your project demonstrates the above 6 requirements (particularly having "most" of the content in React and having one interactive feature working), you will receive full credit for this draft. Drafts that miss some requirements will receive partial credit.

Additionally, if a team member does not contribute to all aspects of the draft (including substantive React work), that individual will not earn a satisfactory grade on this deliverable.