🗓️ Today’s Topics

• Implementing search in your application 🔍
• Images
• File Uploads: forms and requests

Example 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:

// This example depends on having a definition for `searchTerm` in your code
// You'll want to get the value from a search input form field

let url = 'https://drf-library-api.herokuapp.com/api/books'
axios.get(url,
  {
    params: {search: searchTerm},
    headers: {Authorization: 'Token e4881816a58901b630e1148c76ff942fab904a6e'}
})

Example Request to Upload a File

This is an update (notice the PUT verb) to an existing record. In this case you are including the file itself as the body of the request (notice it in the second position as an argument to put()) and setting specific headers required by the server to handle the binary file attachment.

axios.put(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. You can do it that way, but you don’t have to; the above method will work just fine as long as you know how to access the file that is being uploaded by the user.

Here’s info about using FormData objects if you want to know more about that.

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.

📖 Read | 📺 Watch | 🎧 Listen

• What Are HTTP Query Params?
• How to Build a Search Bar in React

🔖 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

🗓️ Today’s Topics

• Project Progress
• File Uploads

🔖 Resources

File uploads

• Django Docs: ImageField
• Django Docs: FileField
• Pillow: Python Imaging Library
  • django-imagekit -> If you want to resize images when they are uploaded, or do any kind of image processing, you will need this. Don’t add it unless you know you need it.
• How to Setup Amazon S3
• django-storages
• DRF FileUploadParser

A request with a file attachment using Insomnia

• Select the right HTTP method for your endpoint.
• Choose binary file attachment from the JSON menu (where you normally put the body of a request)

• Set headers on the Headers tab (this example assumes an image file in jpeg format, named profile-photo.jpg):

  Content-Type: image/jpeg
  Content-Disposition: attachment; filename=profile-photo.jpg
  

For more information on the values for Content-Type:

• MDN Content-Type Header
• MDN MIME types

CORS for file upload

Assuming you are using django-cors-headers, you’ll need to add the following to settings.py:

# in settings.py

from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = list(default_headers) + [
    'content-disposition',
]

📖 Read | 📺 Watch | 🎧 Listen

• Django File (and Image) Uploads Tutorial -> A good and very recent post from Will Vincent; he does not include all the necessary info to make file uploads work in production but otherwise it’s a good overview.
• 📖 File Upload with DRF
• 🎧 + 📖 Success with Static Files
• 📖 What is Amazon S3? -> Skim this – this is Amazon’s documentation and it gets really in-depth.
  • 📺 Introduction to S3 -> Also from Amazon

🗓️ Today’s Topics

How are the projects coming along? 👀

Keep pushing forward! 💪 🚀

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

Minimum requirements are listed below for reference.

🎯 Project due on Thursday afternoon

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

• be written in Markdown
• include a link to your production application
• 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 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. You should be working on at least one 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
• Auth token is saved in local storage
• 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 and answers
• 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 questions or answers
• A user can unstar/unfavorited questions or answers

🔖 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

📹 End of Phase Presentations

The presentations at the end of this phase will be in the form of a short video. 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. You can choose according to your preference.

• 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 12:00 pm ET on Friday, June 10.

✅ 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.

🐻 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. You can start after creating a new create-react-app application and npm installing all the things, in an App.js. 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?