🗓️ Today’s Topics

• How are the projects coming along? 👀

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

• 📖 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

🔖 Resources

Make sure you are sharing this information with your front end as well. You can include it in a 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 properly save a hashed password when you create a new user in the Django Admin, make sure you are using UserAdmin in admin.py:

from django.contrib import admin
from django.contrib.auth.admin import UserAdmin

...

admin.site.register(User, UserAdmin)

• Django Docs: Manually managing a user’s password

🦉 Code

• DRF Library API

🗓️ Today’s topics

• Revisit “What is logged in?” in code
• Requesting and auth token for login

🎯 Project

Work with your team to get the initial code in place for Questionbox or Social E-cards projects.

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

🦉 Code

• React forms examples

🗓️ Today’s Topics

• Models for your collaborative project
• Designing the urls you need
• Review permissions & CORS

🎯 Project

Today you should have your models nailed down and be able to work with them in the admin and the shell – that is, you can save them to the database and retrieve them, and all the relationships work properly.

You should have a WRITTEN DOWN plan for at least the basic set of urls that your front-end will need. You may make changes to this as you go but you need a place to begin.

When creating your list of endpoints, remember: only build what you need.

• What lists or collections of data will you need to return?
• What single resources will you need to return?
• What HTTP methods will you need to support for your urls?
• Which routes will need to be authenticated and which do not require authentication?
• Will you need to restrict any actions at the object level?

By Friday

• be returning JSON for GET requests for questions and answers / cards and friends
• be able to accept POST requests to create questions and answers / cards and friends

🔖 Resources

• A Long (Mostly Helpful) List of Things to Keep In Mind When You’re Building an API -> Many of these best practices you get for free with DRF; some are included with packages we use; and some of this is advice for the choices you have to make in the code you write.
• Overview of creating an API -> Nothing much new in this article, but it is a good summary and high-level overview of how to go about creating an API with DRF.
• How to Save Extra Data to a DRF Serializer -> This is essential for adding in extra info that is not included in your serializer, like the user (from request.user) that is associated with the object you want to create.

Permissions

• DRF Permissions
• Built-in Permission Classes in DRF
• Custom Permissions in DRF
• Pro-Tip: Logical operators with DRF Permissions

CORS

• MDN CORS
  • MDN Access-Control-Allow-Origin Header
• Julia Evans comic explaining CORS better than MDN does
• Django CORS Guide
• django-cors-headers

🦉 Code

• Example Library API

Today’s topics

• React Trivia review
• Forms in React (controlled and uncontrolled)
• What does “logged in” mean?
• Intro to handling log in in a React application

🎯 Project

Begin talking to your teammates and planning the Questionbox Project.

🔖 Resources

Forms

• React Mental Models: Working With Input
• Controlled vs uncontrolled form inputs in React

Working with Local Storage in React

• 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

🦉 Code

• React forms examples

🎯 Collaborative Project

This week you will begin work on a project with both front- and back-end teammates. This project is due at the end of the Phase.

The front-end will build a React application that will make requests to the back-end application built with Django and Django REST Framework. There are no strict rules about who works on front end or back end, so your team can decide how best to use your resources.

Your team can choose between two projects. They will both give you practice doing what you have been doing (building an API or building a React application based around CRUD functionality) but they present some different problems to solve. Choose the one that sounds more fun to you.

Options

Social ECards

• Project description
• Social ECards assignment invitation

QuestionBox

• Project description
• QuestionBox assignment invitation

Whichever one you choose, your whole team is building the same one. The backend will create its own repo and the front end will create its own repo, so for the same project you will have two repos.

When you start work in this repo, you should delete the README at the root (You can save it somewhere else – it’s just a Markdown file). Then when you start your Django or React app, you should install it at the root of the repo directory, not in a subdirectory (you do this by specifying the current directory with a . instead of a project name). This will make deploying easier.

The Teams

Team Rudolph

• James M.
• Trent
• Zack
• James A.

Team Elf

• Jonathan
• Janelle
• Trey
• Jason
• Lila

Team Grinch

• RJ
• Jordyn
• Jeffrey
• Keanya

How to work as one team

Even though you have two separate applications, you’re working together to ship a single product on time. You can make product decisions together even though you will implement features separately.

One suggestion to consider: choose a team lead to act as a guide for your group. This person shouldn’t be “in charge,” but can serve as the decision-maker or tie-breaker if you’re torn between different approaches to a problem. This can help speed you up and keep everyone on track.

We’ll talk about the projects in class today. Remember to read the README very carefully. Your goals tonight:

• Choose a project (make sure everyone, front and back, is on the same page with this decision).
• Understand the project requirements thoroughly and discuss what you think you need to build.
• Outline a plan for what you’ll need to do. This can be a text outline, sketches of user flow, basic wireframes.
• WRITE YOUR PLANS DOWN. You can use Trello / Google Docs / Excalidraw / Miro… whatever. Make sure everyone on your team has access to this documentation.

We haven’t yet covered everything you’ll need to be able to do this project, so that will be our task this week and next!