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 access this data, and they 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

📖 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
• User log in
• Using local storage with state to store an auth token

🎯 Project

You should have detailed wireframes and a user flow outline by now, and components for at least the initial “page” your user is going to see when they arrive at your site. By tomorrow, you should be able to make requests for questions and answers. Deploy to Netlify as soon as possible (💡 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
• 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
• The Complete Guide to URL Parameters with React Router

👾 Code

• Example for QB components from class
• React Library example

🗓️ 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 a way to log in and log out, and endpoints to see data. By tomorrow you should have the ability to POST data.

📖 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

Heroku GitHub integration

• Heroku docs on deploying with Github

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

👾 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