Next.js and Django Fullstack Airbnb Clone - Part 4 - React, Tailwind, Django Rest Framework and more

In this fourth part of the series, we will create an api service which will make it easier to talk to the backend and make the code more reusable/readable. We will also set up authentication, so after this video, you're able to sign up, log in and log out.

The properties will be loaded to the front end and showed on the front page.

Code With Stein Premium

Support me

Important links

---

#codewithstein #nextjs #react #tailwind #django #djangorestframework

[Faybmi]

Best, Newest and Prettiest tutorials with django and other technologies on Youtube

[codernerd]

It is the best web dev tutorial series on the internet right now! Hopefully, you also will do a deploy video :)

[joselucianocastro]

Another great video, seen and made, many things learned from the front with typescript that I didn't know. And with regards to the registration, login and logout, very simple and clean on your part, I thought that this part was going to be cumbersome and complicated, but that was not the case. Thank you very much again, regards

[malvanProductions]

I think you can probably remove the action prop in the form as the function is being called by the button click. Or possibly change the form to use onsubmit instead and remove onclick on the button. Love the tutorial!

[albertomenendezrodriguez]

Amazing video! Can’t wait to see the next one 🙌🙌

[stevemulcahy]

Another great installment, and despite the video mainly covering authentication, I'm surprised that it's not too difficult. The one thing I'm trying to do is make it so when I click logout, it changes setIsOpen back to false, but I'm not sure where to add that!

[etalon-trefoleva]

I have a question. Next.js allows to fetch data async right from the server component. As I understand from your tutorial you use client side to render cards with images. Is it possible to render it on server side in this project? Maybe it would be better for loading time. Correct if I am wrong. Thank you for your answer and your magnificent job.

[kazemqanati]

nice, but how to handle expired access token and resresh for new token

[caglargulucan]

as far as I've finished up to here, let me tell you, it's too complicated :) It is not possible to keep them in mind.

[ander]

Apparently the API is called twice at least the the get method is called. Can you see it in the console tab in your browser, is this normal?

[EmmaSung-jt]

After adding JSON.stringify, I still got the json parse error at 30:28. Could it be because the server returns an empty string and causes an error when it runs to .then(response => response.json()) in apiService?