🗓️ 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

POST with upload using Insomnia

• Choose binary file attachment from the JSON menu (where you normally put the body of a request)

• Headers (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:

from corsheaders.defaults import default_headers

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

📖 Read | 📺 Watch | 🎧 Listen

• 📖 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 talk through next steps.

Minimum requirements are listed below for reference.

🎯 Project due on Wednesday afternoon

👉 If your project meets minimum requirements today, HUZZAH! That is awesome. You should be working on at least one spicy feature.

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

All projects

• Users can login, logout, and register
• Auth token is saved in local storage

QuestionBox, Front End

• Any user can see all questions and answers
• A user can post a question; questions cannot be edited (editing can optionally be allowed on unanswered questions)
• A user can post an answer to a question
• A user can mark an answer to a question they posted as “accepted”
• A user can see a list of all their own questions and all their own answers
• A user can star/favorite questions or answers

Social Cards, Front End

• Show cards from all users
• A user can see all their own cards
• A user can design and create a new card
• A user can follow another user
• A user can see cards from a user they follow
• 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

📹 End of Phase Presentations

This week each of you will record a short video screencast on a topic of your choice. The video should be 4-5 minutes long.

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 I 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 for camera videos 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 share the url for it using this form. Your videos are due by 4:00 pm on Wednesday, Dec 22.

🐻 Back End Guidelines

Your target audience is another beginner developer who is familiar with Django but not with DRF, Postgres, or Heroku. Please pick one of these topics.

1. Pick 1-3 endpoints in your application and talk about how you implemented them. Did you make any interesting decisions or customizations along the way? You might touch on at least some 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. Show us the serializer code and explain how it relates to models and how it is used in views. Point out any customizations you made and explain why you made them. Show an example JSON response using Insomnia or the browsable API from DRF.
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 Guidelines

Your target audience is another beginner developer who is familiar with JavaScript but not with React or Netlify. Please pick one of these topics.

1. Explain the routing in your app. What urls does your app have? How do you handle navigation from component to component. Give us an overview of React Router and how you’ve used it.
2. Walk us through 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; what component renders it and what props it receives from its parent; any state the component has and what that state is for; any events that component handles; any hooks used in the component besides useState (e.g. useEffect, useRef, useLocalStorageState).
3. 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; you can start in an App.js that is rendered via an index.js or main.js. Your application should have one component with 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 under 5 minutes.

Today’s Topics

• Postgres full-text search
• Automatic deploys with Heroku’s GitHub integration

🎯 Project due on Wednesday afternoon

👉 If your project meets minimum requirements today, HUZZAH! That is awesome. You should be working on at least one spicy feature.

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

Note

Depending on how you’ve constructed your API, you might have separate endpoints for all of the below, or you might have fewer endpoints (for instance, if you nested answers in the question detail endpoint). What matters is that you have endpoints your front-end team can use to access this data, and they are documented somewhere.

QuestionBox, Back End

• login, logout, and register
• list all questions and answers
• create a question
• create an answer
• mark an answer to own question as “accepted”
• list of all questions and all answers for an authenticated user
• star/favorite questions or answers

Social Cards, Back End

• login, logout, and register
• list all cards
• list all cards for a user you follow
• list all cards for an authenticated user
• create a new card
• follow/unfollow another user
• list all users an authenticated user follows

📖 Read | 📺 Watch | 🎧 Listen

• 📖 Basic and Full-Text Search with Django and Postgres
• 📖 If you want A LOT more detail about full-text search in Postgres and Django, this blog piece has you covered
• 📖 Blog post with more on full-text search
• 📺 Search from the Ground Up -> DjangoCon 2019 video explaining search in detail
• 📺 Pretty Printed: How to Perform Full Text Searches in Django with Postgres

🔖 Resources

@action decorator in ViewSets

• DRF Docs: Marking extra actions for routing with the @action decorator
• DRF Docs: Routing for extra actions

Filtering and search

• DRF - Filtering -> Pretty useful reference. Includes how to filter your output based on GET parameters, which you will want to do for using search terms.
• Django Docs: full-text search & the search lookup
• Django Docs: SearchVector -> You’ll need this if you want to search against more than a single field

🦉 Code & Notes

• DRF Library API
• Notes on Django Queries These are the same notes you may have seen at the beginning of the Phase. I’m including them here for easy reference, as they show examples of queries and filters that might come in handy for search endpoints.

Today’s topics

• React Router ⭐ v6
• Using local storage with state to store an auth token

🎯 Project

Continue planning with your team on tackling the Questionbox or Social Ecards projects. By Friday, you should be able to make requests for questions and answers if you are working on Questionbox or make requests for getting or creating cards. Deploy to Netlify as soon as possible (Tip 💡: Your code needs to run locally with no errors before you can deploy it!).

📖 Read | 📺 Watch | 🎧 Listen

⚠️ These two resources are for older versions of React Router, so you will see some outdated syntax. For instance Switch, Redirect, and the component prop on Route exist only in versions of React Router earlier than version 6. However, the main concepts are the same, so these resources can still help you understand the context and usage of React Router.

• 📺 React Router tutorial video with that quirky guy, Dev Ed
• 📖 React Router tutorial: Adding Navigation to your React App

🔖 Resources

• React Router docs
• Token Authentication Endpoint guide for djoser library -> This is the library being used by the backend, for your reference.
• A Complete Guide to React Router
• The Complete Guide to URL Parameters with React Router

🦉 Code

• React Router example using library API