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 a link to your production application
• shave 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 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.

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

Requirements for QuestionBox, 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 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 logged in
• create an answer to a question (if you are not the question owner) if logged in
• mark an answer as “accepted” (if you are the question owner)
• 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 logged in user)
• list all cards that a user you follow has created
• show details of one card
• create a new card
• update a card
• delete a card
• follow another user
• unfollow another user
• list all the users you follow
• A README with endpoints documented

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

🔖 Resources

• Heroku GitHub Integration

@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

• 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

• React Library example

🗓️ Today’s Topics

• How are the projects coming along? 👀
• Letting users upload files/images using AWS S3

🎯 Project

Keep on going. 💪 🚀

Today let’s get you past any blockers you may be experiencing and talk through next steps.

By now you should have provided your front end with a way to log in and log out, and endpoints to see at least some data. You can create some data via the Django admin so that you can see your GET requests working. By tomorrow you should be able to create (at least some)resources via POST requests.

📖 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

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

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

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 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',
]

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

👾 Code

• DRF Library API

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

By Friday

• be able to make GET requests for questions and answers / cards and friends
• show them on the page
• have a solid start on POST requests
• deploy to Netlify as soon as possible (TIP ⭐ Your code needs to run locally with no errors before you can deploy it!)

🔖 Resources

• 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