Today’s Topics

• Implementing search, including Postgres full-text search

🎯 Project due on Thursday afternoon

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

• be written in Markdown
• include your production application’s URL
• 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 Python 3.10.2 installed locally), you should state them in the README.

Your README should include clear documentation for your API’s available endpoints.

👉 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 Wednesday.

Requirements for QuestionBox, Back End

Note: Depending on how you’ve constructed your API, you might have separate endpoints for all of the below, or some of the functionality might be combined in a single endpoint (for instance, if you nested answers in the question detail endpoint, like questions/4/answers). What matters is that you have endpoints that your front-end team can use to perform all the necessary actions they need and that are documented in your README.

⚠️ Be sure to test that you have implemented permissions-checking correctly for these endpoints. For example, your API should not allow a user who is not the question-asker to mark an answer as accepted.

• token login, logout, and register (i.e., create a new user)
• list all questions
• list answers to a specific question
• show details about a specific question
• create a question (if authenticated)
• create an answer to a question (if authenticated and if you are not the question asker)
• mark an answer as “accepted” (if you are the question asker)
• list of own questions for an authenticated user
• list of own answers for an authenticated user
• star/favorite questions or answers
• unstar/unfavorite questions or answers
• search questions (possibly both questions and answers)
• A README with endpoints documented

Requirements for Social Cards, Back End

⚠️ Be sure to test that you have implemented permissions-checking correctly for these endpoints. For example, your API should not allow a user who is not the creator of a card to update a card.

• token login, logout, and register (i.e., create a new user)
• list all cards
• list all cards you’ve created (you, the authenticated user)
• list all cards created by a user that you follow
• show details of one card
• create a new card (if authenticated)
• update a card (if authenticated and it’s your card)
• delete a card (if authenticated and it’s your card)
• follow another user (if authenticated)
• unfollow another user (if authenticated)
• list all the users you follow
• A README with endpoints documented

Handling requests that include attached files

Using Insomnia

• Select the right HTTP method for your endpoint.
• Choose binary file attachment from the body 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 to allow the request headers necessary for file attachments:

# in settings.py

from corsheaders.defaults import default_headers

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

📖 Read | 📺 Watch | 🎧 Listen

File Upload

• 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

Search

• 📖 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 -> Will Vincent talk at DjangoCon 2019 explaining search in detail
• 📺 Pretty Printed: How to Perform Full Text Searches in Django with Postgres

🔖 Resources

📁 Creating a README

• Make a README
• Awesome README way more here than you actually need but you might like this mega-list of 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 -> 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

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 Set Up Amazon S3
  • AWS S3 Free Tier Info
• django-storages
• DRF FileUploadParser Without this you will get errors about unsupported media types

👾 Code & Notes

• Example Recipes API
• Code from class: Djoser and testing POST endpoints
• 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

• Review Login and add Logout
• Using local storage with state to store an auth token
• React Router

🎯 Project

You should have detailed wireframes and a user flow outline, and components for at least the initial “page” your user is going to see when they arrive at your site. By today, you should be able to make GET requests for questions and their answers (if you are working on Questionbox) or for cards (if you are working on Social E-Cards).

Deploy to Netlify today if you haven’t already!

📖 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
• React Router Main Concepts This is pretty in-depth, and you may not need it, but it’s helpful if you want more explanation.
• A Complete Guide to React Router really comprehensive, really good
• The Complete Guide to URL Parameters with React Router

👾 Code

• example with routing and local storage state

🗓️ Today’s Topics

• How are the projects coming along? 👀
• Automatic deploys from GitHub
• Paginating your API

🎯 Project

Keep on going. 💪 🚀

We will use class time today to get you past any blockers you may be experiencing and to talk through next steps.

By now you should have provided your front end with endpoints to see data and gotten djoser installed so that your log in and log out endpoints are working.

By tomorrow you should have the ability to create at least questions or cards via POST requests, and maybe more.

📖 Read | 📺 Watch | 🎧 Listen

On Monday we’ll be covering full-text search in your API, but if you have time you can check these resources out in advance.

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

🔖 Resources

Authentication

Make sure you are sharing the Djoser information with your front end. You should include the authentication endpoints in your API documentation or project README.

• Base Endpoint Guide for Djoser -> includes create a new user and other nice stuff
• Token Authentication Endpoint Guide for Djoser -> details on the token auth endpoints

Creating a properly hashed password

In order to save a properly hashed password when you create a new user in the Django Admin, make sure you are using UserAdmin in admin.py so that you have that option in the admin interface. If you don’t do this and save an unhashed password, you will run into authentication errors.

from django.contrib import admin
from django.contrib.auth.admin import UserAdmin
...
admin.site.register(User, UserAdmin)

You can also change a password from the command line:

• Django Docs: Changing a password

Pagination

• DRF docs: Pagination

🗓️ Today’s topics

• Using Forms in React
• Revisit “What is logged in?” in code
• Requesting an auth token for login

🎯 Project

Work with your team to get the initial components in place for the QuestionBox or Social E-cards project.

Optional prep for Thursday

On Thursday we’ll be covering a way to add routing to our application with ReactRouter. If you want to get a head start, there’s a brand new React Router tutorial.

By Friday

• Your app can make GET requests for questions and answers OR cards and friends
• Show questions or cards on the page
• Have a solid start on POST requests for creating questions or cards
• Deploy to Netlify as soon as possible (TIP ⭐ Your code needs to run locally with no errors before you can deploy it!)

🔖 Resources

• POST requests with Axios
• Token Authentication Endpoint guide for djoser library -> This is the library being used by the backend
• use-local-storage-state -> You would npm install use-local-storage-state to use it in your code
  • Check out this custom hook code example, which shows how you could implement this yourself (you could even borrow this code and use it in your project instead of the above library if you wanted to).
  • Using the Web Storage API
• How to Build a Front-End App Before you Have an API
• CORS explained for front-end devs

##