Assignments > HW6. PhotoApp: Various Extensions

Due on Wed, 06/08 @ 11:59PM. 40 Points.

Overview

For your last homework assignment, you will re-implement your HW4 code in way that follows React conventions. A few ground rules:

1. You can use functional or class components (What’s the difference?). Sarah used class components in her demos, but go with what you prefer. We have no preference.
2. You can use third-party libraries if you want (but it’s not required).
3. There is some starter code for this homework in Lab 10 that you are welcome to use. That said, you are also welcome to code this assignment from scratch – up to you.
4. We won’t be grading you on CSS, but please do make it look nice. You’re also welcome to customize the look and feel to make it your own.
5. We’ve implemented a react version of the PhotoApp here: https://photo-app-secured.herokuapp.com/. Yours should function similarly.

Tips

If you’re running into any errors with fetch requests, you may have a few minor bugs in your REST API Endpoint. To verify (Is the bug in my React code or in my API?), try running your code using the course API by updating your React app’s proxy url address in package.json to: https://photo-app-secured.herokuapp.com/.

Tasks

In the section below, we’ve mapped out a suggested implementation strategy. If you implement your React functionality differently, that’s fine, but we will be verifying that you did indeed make a series of components (versus just copying your HW4 file into a React folder and only making minor changes).

An example of the implemented react app can be found here.

Extra Credit

You may earn up to 5 points extra credit. If you are working in partners, your extra credit will be split between the two of you (i.e. you will have to implement 10 points worth of extra credit to earn 5 points each).

Deployment Instructions (for Extra Credit)

In order to deploy your React code, you have two options.

1. Create a Stand-Alone React App

1. Create a git repository that has your react app as a top-level directory (see suggested file structure below).
2. Create a .gitignore file that excludes the node_modules and build directories (see below).
3. Update all of your API urls (the ones that issue fetch requests) to point to your production REST API (or the class API if your HW5 deployment is broken).
4. Modify your package.json file (which should be at the root of your git repo) and delete the “proxy” entry ("proxy": "http://127.0.0.1:5000",). Note that you can’t comment out entries in a JSON file, so you’ll have to actually delete it.
5. Commit and push your new repo.
6. Deploy to Heroku

Suggested File Structure:

your-react-app
├── .git
├── .gitignore
├── build               # build should be excluded from the repo
├── node_modules        # node_modules should be excluded from the repo
├── package-lock.json
├── package.json
├── public
└── src

.gitignore file

node_modules
build

2. Integrate with Flask

1. Create a hw06 branch: git checkout -b hw06
2. Paste your react client folder (I called mine react-client) at the root of your Flask app (see suggested dile structure below). Just for simplicity, rename that folder to react-client.
3. Create a package.json file at the root of your Flask app (note that this is in addition to the package.json file inside of your react-client directory) that has the JSON format shown below.
   • This file tells Heroku to compile your react app from within the react-client subdirectory.
4. Update your requirements.txt to include the following: flask-multistatic==1.0
   • You will also need to install this library on your local machine: pip3 install flask-multistatic.
5. Modify your app.py as shown below.
6. Ensure that your react-client/node_modules and react-client/build folders are excluded from git via your .gitignore file.
7. Commit and push your changes to GitHub.
8. Deploy to Heroku (see instructions below).

Suggested File Structure:

photo-app
├── .env
├── .git
├── .gitignore
├── Procfile
├── README.md
├── app.py
├── decorators.py
├── models
├── package-lock.json
├── package.json
├── populate.py
├── react-client
├── requirements.txt
├── sql
├── static
├── templates
├── tests
└── views

package.json file at the root of your Flask app (not the one in your react-client folder):

{
    "name": "photo-app-heroku-react-build-file",
    "version": "1.0.0",
    "description": "",
    "scripts": {
      "build": "cd react-client && npm install && npm run build"
    },
    "dependencies": {
        "cross-env": "^7.0.3"
    }
}  

app.py updates:

from flask_multistatic import MultiStaticFlask as Flask   # at the top
from flask import send_from_directory                     # at the top


# place the following after: app = Flask(__name__)
app.static_folder = [
    os.path.join(app.root_path, 'react-client', 'build', 'static'),
    os.path.join(app.root_path, 'static')
]

# modify the root path to point to your React App:
@app.route('/')
@decorators.jwt_or_login
def home():
    # https://medium.com/swlh/how-to-deploy-a-react-python-flask-project-on-heroku-edb99309311
    return send_from_directory(app.root_path + '/react-client/build', 'index.html')

Reminder of how to deploy to Heroku (optional)

1. Create a new app on Heroku (like you did for HW5), including setting the JWT and DB_URL environment variables.
2. Navigate to your folder (using the command line).
3. Connect your local git repo to your newly created Heroku app (you will only have to do this once):
   heroku git:remote -a name-of-the-app-you-just-made
   • You may have to login first: heroku login -i
4. Push your repo to Heroku: git push heroku your-branch-name:main, where your-branch-name is the name of your local branch, and main is the name of the destination branch on Heroku.
   • Note that Herou will automatically read your package.json file, install the dependencies, and create a production React build for you.
5. Test your web server.
6. Don’t forget to also push your repo to GitHub
7. That should be it!

Accessibility Reflection

Accessibility Questionnaire

This quarter, we assigned a few accessibility activities – to encourage you to think about how people might interact with your applications without mouse or using a screen reader. To reflect on this process, please fill out the Accessibility Questionnaire if you didn’t complete it during Lab 10.

Accessibility Research Study

We also wanted to invite you to participate in a research study – to examine and reflect on how to better teach students about accessibility within the software development process. Please fill out this Consent to participate in research form to let us know whether or not you are willing participate in this study. Participation is optional.

Appreciations

And while you’re at it, please take a moment to thank / write a note to a peer mentor who helped you in some way (even if you just take 30 seconds to do it). Peer mentors are students too, and most of them do waaaay more than what is officially asked of them in order to support you. This form is completely anonymous.

https://forms.gle/zXdxaBik4suPifCA9

What to Turn In

Please review the requirements above and ensure you have met them. When you’re done, please submit a zip file that includes the following files:

• Your code (please exclude the node_modules and build directories)
• A text file that includes the following:
  • The answer to your accessibility questions.
  • The name of your partner (if applicable)
  • Which extra credit options you attempted (if any)
    • And a link to your Heroku deployment if you attempted it.