Today’s Topics

• How’s QuestionBox coming along? 👀

Today’s class is devoted to getting you past any blockers you may be experiencing and to talk through next steps.

🎯 Project: QuestionBox is due on Thursday

By today you should have a working front-end for:

• login and logout
• registration
• user dashboard/profile
• show all questions
• show all questions for a single user (authenticated user; own questions only (could show on dashboard/profile))
• show all answers for a single user (authenticated user; own answers only (could show on dashboard/profile))
• create a question (authenticated users only)
• show details for a single question
• show all answers for a single question
• create an answer for a question (authenticated users only)

Depending on how you’ve constructed your front-end, you might have separate components for all of the above, or you might have fewer components (for instance, if you nested answers in the question detail component). What matters is that your have a working front-end for users to be able to start creating questions and posting answers.

Go back to the project requirements and make sure you are able to do the things the project requires. Also check to make sure that you are not building features or functionality that you don’t need!

All of the above should be working in production (Netlify)!

Today’s Topics

• How’s QuestionBox coming along? 👀

🎯 Project: QuestionBox

Keep on going. 💪 🚀

Today’s class is devoted to getting you past any blockers you may be experiencing and to talk through next steps.

Today’s topics

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

🎯 Project

Continue planning with your teammates on the Questionbox Project. Please deploy the FE of your app to Netlify once you have finished initial setup.

📖 Read | 📺 Watch | 🎧 Listen

• React Router tutorial video with that quirky guy

🔖 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

Working with React Router

• React Router docs
• Token Authentication Endpoint guide for djoser library -> This is the library being used by the backend

Today’s Topics

• QuestionBox models
• Token authentication in DRF with djoser
• CORS headers

🎯 Project: QuestionBox

Kick QuestionBox into gear! You should be able to return questions and answers at least by tomorrow.

📖 Read | 📺 Watch | 🎧 Listen

• Finally Understand auth in DRF - a Will Vincent talk -> Will isn’t using the djoser library but he does a great job of reviewing different auth strategies and why you would choose one or the other. Watch this for a better understanding and overview of auth.

🔖 Resources

Authentication

• Djoser documentation
• DRF docs: Token-based authentication
• The Ultimate Tutorial for Django REST Framework: Login and Authentication

CORS

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

Permissions

• DRF Permissions
• Pro-Tip: Logical operators with DRF Permissions

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