🗓️ Today’s topics

• React Trivia progress
• Finding & fixing bugs in React Trivia
• Deploying to Netlify

🎯 Project

The React Trivia application is due on Monday. It should meet at least the minimum functional requirements and is deployed to Netlify. 🚀

Minimum functional requirements:

• A user can see a list of categories.
• A user can select one category.
• A user can see questions for that category, with answer options for each question.
• A user can select an answer for a question.
• A user can see if that answer is the correct answer.

It would be awesome if:

• The answers are shuffled so that the correct answer is not always in the same position.
• The questions are shown one at a time instead of all at once, and the user is able to advance through the set of questions.
• A user can see how many questions they answered correctly (or some kind of score) when they have answered all the questions in a category.

📖 Read | 📺 Watch | 🎧 Listen

• 🎧 Syntax.fm podcast: State in React
• 📖 Component Design in React
• 📺 Jenn Creighton, React Is Fiction

🔖 Resources

• Instructions for deploying a React app to Netlify
• Netlify Docs
• About the Ship It Mindset
• ship it squirrel
• Optional Chaining Operator

👾 Code

• React Devs for Hire Example

🗓️ Today’s Topics

• Views and viewsets
• Nesting and customizing serializers
• Permissions

🎯 Project

Keep on with your API building 😎 💪! What do you need to know to get it working?

By now you should have a list of endpoints that your API offers, even if they are not all complete yet. A good place for this would be in your README, formatted with Markdown. This list should show the URLs along with the HTTP methods/verbs, and ideally should include an example of the JSON that has to be included in the request body (for any requests that send data in the body) and an example of the JSON response that will be returned, for each endpoint. This list will be helpful for your own testing and it can serve as necessary documentation for your API.

Here is an example of what your documentation might look like for an endpoint to create a book:

Create a new book

request

Requires authentication.

title and author are required fields.

POST api/books

{
   "title": "The Anatomy of Melancholy",
   "author": "Robert Burton",
   "publication_year": 1621
}

response

201 Created

{
  "pk": 6,
  "title": "The Anatomy of Melancholy",
  "author": "Robert Burton",
  "publication_year": 1621,
  "featured": false,
  "reviews": []
}

By today or tomorrow, your app should respond with json to GET requests for all habits/books, for one habit/book, and for one book/habit’s associated objects (daily records for habits; reviews or trackers for books). By tomorrow you should also have at least some of your POSTs working, and can begin working on updates and deletes.

💁 Make sure you test your endpoints in Insomnia to confirm that they are working as intended. Use show_urls from django-extensions to help you check what urls you have defined.

Is your app deployed to Heroku yet? 👀 🚀

🔖 Resources

• Django REST Framework Docs
• Article on DRF Generic Views
• Classy DRF

Serializers

• Using Different Read and Write Serializers in DRF
• How to Save Extra Data to a DRF Serializer - for example, when you need to associate a user with an object that you are creating.
• Effectively using DRF Serializers

Permissions

• DRF Permissions
• Built-in Permission Classes in DRF
• Custom Permissions in DRF
• Pro Tip about DRF Permissions This shows how to combine permissions with logical operators like and and or

👾 Code

• Example Recipes API

🗓️ Today’s Topics

• Getting data on the page with AJAX
• Troubleshooting AJAX requests
• Using multiple components and conditional rendering to create multiple views of your application

🎯 Project: React Trivia

This project is due next Monday.

React Trivia. Your goal today is to get a list of trivia categories showing on the page.

Remember to take it step by step! Don’t try to do too much at once.

Goals in the order you should tackle them:

1. Get a list of categories from the Trivia API showing up on the page.
2. Make your trivia categories selectable. When a user clicks on a category to select it, you should make a request to get at least 10 questions for that category (note: the API will let you specify how many questions you want to get back and it will let you specify the type – you can limit to the multiple type choice to make it a little easier).
3. If you can get all the questions for the selected category, the next step is to show the questions. Ideally you want to show one question at at a time with answer choices for that question.
   • If this is too hard, just show the first question to start with.
   • Next, show the answer choices for that question (don’t worry about the order at first; you can change that later)
   • When you can show one question with its answer choices, then make it possible for the user to see the next question in the list of questions by clicking a button
4. Make it possible for the user to select their answer choice. You will need to know what answer they selected, and you will need to know the correct answer. They got the answer right if the answer they selected is the same as the correct answer (so you’ll need to compare those two values somehow).
5. Tell the user if they got the question right.
   • OR keep track of questions answered correctly and tally them at the end (something like, “You got 6 out of 10 questions right!”).
6. Have a way for the quiz to end and optionally go back to the list of categories to start another quiz.

Don’t skip steps! They build on each other. You may find that you need to break these steps down even further, and that is OK. Make this as easy as you can on yourself!

By Thursday you should aim to have the first three goals done – or at least, the first two and the third in progress.

🔖 Resources

• Using the Effect Hook
• React Conditional Rendering
• 5 Ways to Implement Conditional Rendering in React
• Lifting State Up – This is the official doc page. To see it with hooks, watch the video Lifting State Up with Hooks.

🦉 Code & Notes

• React Devs for Hire App

🗓️ Today’s Topics

Today we dive into Django REST Framework. 🤿

🎯 Project: Choose Your Own Adventure 🐪 🐫

Choose one of the following options.

The application must be deployed to Heroku, whichever option you choose. 🚀

🐪 OPTION ONE: Add an API to Habit Tracker

Add a new app to your existing Habit Tracker project and call it api. Your app should provide CRUD endpoints that return JSON responses.

By Friday afternoon, you should be able to do the following via the API – that is, by making requests using Insomnia.

• list habits
• create a new habit
• view a habit
• update a habit
• delete a habit

By Monday, you should be able to complete all CRUD tasks through the API:

• list habits
• create a new habit
• view a habit
• update a habit
• delete a habit
• list records for a habit (this should be on the habit detail API endpoint)
• create a record for a habit for today (stretch: create a record for any date)
• update a record for a habit
• delete a record from a habit

Write up a list of endpoints you think you will need before you start doing this!

You should develop and test your endpoints using Insomnia. (You can also use the browsable API that DRF gives you in the browser, but you should be comfortable using Insomnia.)

🐫 OPTION TWO: Django Library API

Link to assignment invitation.

Create a new API-only application that lets users keep track of books they are reading, want to read, or have read, and take private or public notes on books. More details about project requirements are included in the assignment README.

You should not make forms or templates for this app, but you will need models, urls, views, and serializers. You should use class-based views and return JSON responses.

📖 Read | 📺 Watch | 🎧 Listen

• 📖 REST Resource Naming Guide This resource will be very helpful in thinking about how to structure your urls.
• 🎧 DjangoChat Podcast: DRF
• 📖 DRF class-based views This talks about APIView.
• 📖 Class-based vs. function-based views This is about Django views in general, not specific to DRF.
• 📺 What You Should Know About DRF, Lacey Williams Henschel, PyCascades 2021

🔖 Resources

• Django REST Framework Documentation
  • Installation
  • Serializers
  • ModelSerializer
  • Serializer SlugRelatedField
• 💜 Classy Django REST Framework This is exceptionally useful for working with classes in DRF.
• Python pprint module docs
• Django docs: Introduction to class-based views

Blog articles that go with Lacey Williams Henschel’s talk

• What You Should Know About DRF, Part 1: ModelViewSet attributes and methods
• What You Should Know About DRF, Part 2: Customizing built-in methods
• What You Should Know About DRF, Part 3: Adding custom endpoints

🦉 Code

• Recipes App