🗓️ Today’s Topics

• How are the projects coming along? 👀
• Search forms and displaying results
• Uploading files

🎯 Project due on Thursday afternoon

You’re close to the finish line! You should have an app in production that you can, for the most part, use today. Everything might not work yet but you can see the basic shape of the app. 💪 🚀

Today’s class is devoted to getting you past any blockers you may be experiencing.

Minimum requirements are listed below for reference.

Please include a README in your project repo. The README should:

• be written in Markdown
• include a link to your production application on Netlify
• have instructions for getting your application running locally, so that any developer could pull it down and run it. If your setup makes any assumptions about the environment (e.g., you should have Node.js 14.0 or higher installed locally), please state them in the README.

👉 If your project meets minimum requirements today, HUZZAH! That is awesome. Are you able to add an additional or spicy feature?

👉 If your project does not yet meet minimum requirements, you should aim for meeting them by the end of the day on Wednesday.

Note: The bullet points listed under requirements do not necessarily correspond to pages/screens. You can achieve these requirements using any design you like.

Requirements for all projects

• Users can login, logout, and register (sign up)
  • Not required but nice to have: a user is immediately logged in when they register, instead of having to enter their credentials again to log in
• Auth token is saved in local storage so that a user can stay logged in if they leave the page and come back
• Application runs in production
• Application is styled in a way that looks intentional and finished

Requirements for QuestionBox, Front End

• Any user can see all questions
• A user can see all the answers posted for a specific question
• A user can post a question
• A user can post an answer to a question
• A user can mark an answer to their own question as “accepted”
• A user can see a list of all their own questions
• A user can see a list of all their own answers
• A user can star/favorite and unstar/unfavorite questions and/or answers

Requirements for Social Cards, Front End

• A user can see all the cards from all users (or all the public/published cards if you have a way to do this)
• A user can see all the cards they themselves have created
• A user can see all the cards from a user they follow
• A user can design and create a new card
• A user can update (edit) a card they’ve created
• A user can delete a card they’ve created
• A user can follow another user
• A user can unfollow another user
• A user can see a list of users they follow

🔖 Resources

• Empty States: The Secret Sauce to Better UX Design
• Object & array dependencies in the React useEffect Hook
• How the useEffect Hook Works (with Examples)
• Reading React Errors

👾 Code

• Example React Library

🗓️ Today’s Topics

• How are the projects coming along? 👀
• Revisiting image uploads to AWS
• Automatic deploys from GitHub

🎯 Projects due on Thursday afternoon

Your APIs are doing more and more each day. Keep on testing and refining. 💪 🚀

We will use class time today to get you past any blockers you may be experiencing.

By now you should have provided your front end with endpoints for almost all of the CRUD functions for the resources your project needs. You should be making any changes requested by the front-end devs on your team (for example, you may find that you need to change your serializers to include additional data or a different type of data); troubleshooting issues that come up for the front end (are the POSt requests to create resources working as you expected?) and fixing bugs they discover; and perhaps implementing spicy features.

🔖 Resources

Heroku GitHub integration

This is optional but can be helpful if you are tired of manual deploys and have the hang of merging PRs on GitHub.

• Heroku docs on deploying with Github

👾 Code

• Example Recipes API

🗓️ Today’s Topics

• Implementing search in your application 🔍
• Image & file uploads: forms and requests

Example Search Request with Query Params

Remember the iTunes API? To get search results, you needed to include query params that specified the search fields and terms you wanted to use.

Here’s how you might make a request that uses query params using axios. (Note: this example depends on searchTerm and token being defined in your code.)

axios.get('https://drf-library-api.herokuapp.com/api/books',
  {
    params: {search: searchTerm},
    headers: {Authorization: `Token ${token}` }
  }
)

A note on search in React

You could also perform a search without making an AJAX request, by filtering data that you already have in React. Here are a couple of examples of how you could do that.

• Create a search bar from scratch
• How to Build a Search Bar in React

Example Request to Upload a File

This is an update to an existing record; notice that we are using the PATCH verb. In this case you are including the file itself as the body of the request; notice that the file is in the second position as an argument to axios.patch() as the body of the request. We are also setting specific headers required by the server to handle the binary file attachment, in addition to the Authorization header.

axios.patch(url, file, {
  headers: {
    Authorization: 'Token ' + token,
    'Content-Type': file.type,
    'Content-Disposition': `attachment; filename=${file.name}`
  }
}).then(res => console.log(res.data))

NOTE: If you Google how to include a file attachment in an AJAX request, you’ll see a lot of references to using the FormData object. If you want to do it this way, please discuss with your back end devs, as they will need to make sure that they can parse MultiPart form content.

The above method does not use the FormData object. It’s a little simpler in that it sends just the file and no additional data. You’ll need a way to access the file that is being uploaded by the user.

See the resources below for more information about using a file input element and accessing a selected file. The useRef() hook will be helpful to get the files from the input element after a user has selected a file using the form.

🔖 Resources

• Generate random images from Unsplash without an API
• Uncontrolled components
• Refs and the DOM - class-based component examples
• useRef hook
• MDN: File input type
• MDN: Accessing selected files
• Custom hook recipes
• More custom hooks
• Official React docs on custom hooks

This week we’re wrapping up Phase 3 by finishing the QuestionBox and Social E-Cards projects and creating a short video walk-through of your code.

✅ Requirements for passing the phase for both front and back end

1. Your application meets the minimum requirements detailed in the assignment.
2. Your application runs without errors in production (on Heroku or Netlify).
3. Your application repo includes a README with a link to your production application and instructions for running the application locally.
4. Your presentation video meets the below requirements.

You might not pass the phase if:

• Your project does not meet the minimum requirements.
• Your project is not running in production.
• You cannot explain how your code works.
• You do not turn in a video.

📹 Video Presentations

Each of you (not each team, but each individual) will record a screencast on one of the topics listed below. The video should be 4-5 minutes long, and no longer.

Your target audience is a brand new Momentum student who is just at the beginning of Phase 3. Imagine you are teaching them how to do what you’ve done in this project. Give them the benefit of your experience over these past several weeks.

This video does not have to be polished, scripted, or edited. But your viewer should be able to follow what you’re saying and understand the points you are making.

I suggest using Loom – it’s very simple to use for screencasts and will let you share your video easily. The free account also limits your videos to 5 minutes, so it should help you with timing.

Loom lets you record a screencast with or without your face showing; either way is fine.

• Getting Started with Loom
• Loom Chrome Extension

Please post your video and submit the url for it using this form. Your videos are due by 9:00 am ET on Friday, Sept 30.

🐻 Back End Video Presentation Requirements

Your target audience is another beginner developer who is familiar with Django but not with DRF, Postgres, or Heroku.

Your video should include a demo of your application via relevant requests in Insomnia and should show and walk through your code. You must use the production (Heroku) endpoints in the demo, not localhost.

Please focus on one of these topics.

1. Demo 1-3 endpoints in your application, explaining how you implemented them. Did you make any interesting decisions or customizations along the way? You might talk about some or all of these topics: the url patterns; the HTTP methods that are handled; serializers; permissions; querysets and any filtering you may have done.
2. Explain serializers, using examples in your app. Talk through the serializer code and explain how it relates to models and how it is used in views. Be sure to mention serialization and deserialization. Point out any customizations you made and explain why you made them. Show example requests and responses using Insomnia.
3. What is the most interesting specific feature or technical detail that you implemented for this project? Walk us through its functionality and implementation.

🦊 Front End Video Presentation Requirements

Your target audience is another beginner developer who is familiar with JavaScript but not with React or Netlify.

Your video should include a demo of the relevant part of your application running in the browser on Netlify, not on localhost, and should show and walk through your code.

Please focus on one of these topics.

1. Walk us through the code for one of the components in your app and explain how it works. Topics you might touch on: what the purpose/responsibility of the component is; when and where it is rendered; what props it receives from its parent; any state the component has, what it’s for, and how it changes; any events that component handles; any hooks used in the component besides useState (e.g., useEffect, useRef, useLocalStorageState).
2. Build a new teeny tiny React application from scratch and talk us through some of the basics, including components, state, and props. You can start after creating a new create-react-app application and npm installing all the things. Your application should have at least one component that does something – for example, you could show how to build an input form that echos whatever your user types and displays it on the page in real time. If you want to get fancier than this, you can – just keep it to 5 minutes.
3. Explain how you have used React Router to implement routes in your app. What URLs can your app handle? How do you handle navigation from component to component?