Code With Clinton
Code With Clinton
  • 192
  • 560 597
Build a Full Stack Web App with Django and React - 2024
In this tutorial you will learn how to build web apps using Django and React.
Django will be used to build the Rest API and React will be used on the frontend. In this course you will learn how to build a Blog Application with Django and React JS.
Happy learning!!
Source code:
Frontend code: github.com/CodeWithClinton/django_react_blog_template
Backend code: github.com/CodeWithClinton/django_blog_api
Frontend + Backend code: github.com/CodeWithClinton/django_react_fullstack_blog
Follow me: -
Twitter: x.com/CodeWithClinton
LinkedIn: www.linkedin.com/in/clinton-nwachukwu/
Table of Contents:
00:00:00 - Introduction
00:02:37 - Getting the source code
00:03:33 - Creating a React project
00:09:00 - Basic overview of React
00:16:02 - Adding Tailwind to React
00:20:50 - Creating the NavBar component
00:23:04 - Creating the Jumbotron component
00:25:17 - Creating the Blog-Heading component
00:26:23 - Creating the Blog-Container component
00:28:01 - Creating the Blog-Card component
00:30:36 - Creating the Footer component
00:31:51 - Adding multiple pages in React
00:35:08 - Adding the global component
00:36:46 - React Router Dom
00:46:27 - Adding the NotFound(404) page
00:49:32 - Building the Rest API starts
00:50:04 - Backend setup with Django and Django Rest Framework
00:51:42 - Creating the Blog model
00:55:27 - Creating the Blog serializers
00:57:42 - Creating the Blog modelviewset
01:00:19 - Creating the Blog routers
01:04:36 - Django migrations
01:06:20 - Adding Blog objects to the database
01:08:58 - Backend - Blog listing
01:10:00 - Using slug as the lookup_field for blog
01:11:29 - Retrieving 6 of the most recent blogs
01:18:06 - Listing the blog endpoints
01:19:46 - Adding blog detail page
01:29:07 - Adding blog edit page
01:33:58 - Adding the delete blog modal
01:39:06 - Configuring CORS-Headers
01:44:35 - Fetching blog posts on the frontend
02:03:13 - Adding a loading spinner
02:12:16 - Fetching the blog detail page on the frontend
02:33:09 - Adding new blogs from the frontend
02:42:05 - Updating a specific blog from the frontend
03:12:03 - Deleting a specific blog post from the frontend
03:33:25 - The End.
zhlédnutí: 1 345

Video

Build a Blog with Django and Tailwind CSS
zhlédnutí 508Před měsícem
Hi, in this video you will learn how to integrate Tailwindcss into your Django application by building a blog with Django and styling the frontend with Tailwindcss. Happy learning! Django full course: czcams.com/video/QCDpBhW8XbM/video.htmlsi=Fhv08ijZ5fmc5xkr Source code: github.com/CodeWithClinton/django_tailwind_blog
Django Rest Framework Full Course 2024
zhlédnutí 1,1KPřed 3 měsíci
In this Django Rest Framework full course you will learn how to build a sophisticated RESTFUL API with Django Rest Framework. Happy learning! Timestamps: 00:00:00 - Introduction 00:01:46 - Project Setup 00:09:05 - Rest framework Prerequisites 00:11:15 - Serializing the Blog model 00:15:10 - The blog_list "GET" request (Function Based View) 00:23:18 - The blog_list "POST" request (Function Based...
Django Roadmap for 2024 - (Beginners to Advance)
zhlédnutí 904Před 4 měsíci
Hi, here is a Django Roadmap that will help you gain mastery in Django. Timestamps 00:00:00 - Intro 00:00:26 - Roadmap 1 00:02:20 - Roadmap 2 00:03:12 - Roadmap 3 00:05:05 - Roadmap 4 00:07:44 - Roadmap 5 00:10:34 - The End.
Build and Deploy a FullStack Django Web App - Django Full Course 2024
zhlédnutí 2,8KPřed 5 měsíci
Hi everyone, in this tutorial you will learn all you need to know to start building FullStack Web Apps with Django. We won't just build, we will also get our app live on the internet. If you are a beginner or an intermediate Django developer, this course is perfect for you as I will take you from zero to Hero in your Django journey. Happy learning!! 👩‍💻✨ Table of Contents: 📚 00:00:00 - Introduc...
Email Verification in Django using OTP - OTP expires every 5mins.
zhlédnutí 4,1KPřed 5 měsíci
In this video you will learn how to verify users' email in Django using OTP after a user signs up on a website. This OTP expires every 5 minutes and users will be able to generate a new OTP once the current OTP is expired. Let's go. 🚀 Happy learning. ✨ Timestamps: 00:00:00 - Introduction 00:05:02 - Customising the user model 00:06:06 - Signing-up new users 00:08:05 - Django Signals(Creating OTP...
Send emails in Django in less than 5 minutes!
zhlédnutí 1,8KPřed 5 měsíci
In this video you will learn the right way to send emails in Django in 5 minutes or less using Google smtp server, this is fast and reliable.
Build an Ecommerce Web Application with Django 2024 - Intro
zhlédnutí 675Před 6 měsíci
Greetings! This video serves as an intro for my upcoming Django Ecommerce tutorial. Throughout the series, you'll gain insights into building a Modern Ecommerce Web application using Django. Ensure you subscribe to the channel to stay updated on the tutorial series. Live Url: shoppit-x17a.onrender.com/ Source Code: selar.co/884nu2
Build a Dynamic Search Functionality with Django and HTMX.
zhlédnutí 467Před 7 měsíci
In this instructional video, you'll gain insights into the process of constructing a dynamic search component with Django and HTMX. The tutorial specifically focuses on utilizing Django and HTMX to achieve this functionality seamlessly, ensuring a smooth user experience without the necessity for page reloads. Source code: github.com/ClintonCode20/django_htmx_search
Django + Htmx | Build a Todo App with Django and Htmx | Django Project for Beginners
zhlédnutí 1,3KPřed 7 měsíci
Learn how to create a powerful Todo App using Django and htmx! Follow along with this step-by-step tutorial to build a functional and dynamic task management system. Master the integration of Django's backend capabilities with htmx's seamless frontend interactions, and take your web development skills to the next level! 🚀 Source code: github.com/ClintonCode20/dj_htmx_todoapp Follow me: X/Twitte...
Build a Todo App with Django | Django CRUD Tutorial | Django Project for Beginners
zhlédnutí 3,6KPřed 7 měsíci
Embark on a coding adventure with this tutorial as we build a ToDo App using Django! Learn the ins and outs of CRUD operations (Create, Retrieve, Update, Delete) to supercharge your web development skills. Perfect for beginners, this video guides you through each step, making Django a breeze to understand. Happy coding and happy learning! 🚀💡 Source Code: github.com/ClintonCode20/django_todo_app
Build a RealTime ChatApp with Django - Live Demo
zhlédnutí 1,6KPřed 7 měsíci
Dive into the world of Django with my live demo showcasing a real-time chat app! Join me as I walk you through the features, functionalities, and the coding magic behind this project. In this tutorial, I demonstrated the step-by-step process of creating a fully functional chat application using Django. Explore how I implemented real-time messaging and user interactions while leveraging the powe...
Django Authentication using Email Address - Login with Email in Django
zhlédnutí 948Před 7 měsíci
Learn how to implement secure user authentication in Django using email addresses. This tutorial explores step-by-step instructions on setting up and customizing authentication to use emails as login credentials, enhancing your Django web applications with robust user authentication and security measures.
Deploy a Django Web App on DigitalOcean Droplets | PostgreSQL - Nginx - Gunicorn
zhlédnutí 3KPřed 8 měsíci
🌐 Learn to Deploy Django Web Apps with Nginx, Postgres, and Gunicorn on DigitalOcean Droplets! 🚀 In this quick and informative tutorial, I'll guide you through the seamless deployment of your Django Web App using DigitalOcean Droplets, Nginx, Postgres, and Gunicorn. Get your project online and accessible to the world in no time! Watch now to empower your development skills and take your web app...
Payment Integration - Ecommerce Restful API - Django Rest Framework
zhlédnutí 1,9KPřed 8 měsíci
Payment Integration - Ecommerce Restful API - Django Rest Framework
Best VSCode Extensions for Django.
zhlédnutí 3,3KPřed 8 měsíci
Best VSCode Extensions for Django.
Django Tutorial for Complete Beginners - Build your first Django Web App
zhlédnutí 621Před 8 měsíci
Django Tutorial for Complete Beginners - Build your first Django Web App
How to Deploy Django Apps on Render - Full Tutorial - Free and Easy
zhlédnutí 6KPřed 9 měsíci
How to Deploy Django Apps on Render - Full Tutorial - Free and Easy
Django Project for Beginners - Build a Voting App with Django #3
zhlédnutí 611Před 9 měsíci
Django Project for Beginners - Build a Voting App with Django #3
Django Project for Beginners - Build a Voting App with Django #2
zhlédnutí 902Před 9 měsíci
Django Project for Beginners - Build a Voting App with Django #2
Build an Online Voting System with Django #1- Django Project for Beginners
zhlédnutí 3,7KPřed 9 měsíci
Build an Online Voting System with Django #1- Django Project for Beginners
Django: Managing Development and Production Settings.
zhlédnutí 2,3KPřed 9 měsíci
Django: Managing Development and Production Settings.
Django Mastery: 10 Project Ideas to Become an Expert.
zhlédnutí 687Před 10 měsíci
Django Mastery: 10 Project Ideas to Become an Expert.
Sending Emails, attach files using Django: Goodbye to Google SMTP!
zhlédnutí 2KPřed 10 měsíci
Sending Emails, attach files using Django: Goodbye to Google SMTP!
Django Best Practices 2023.
zhlédnutí 1,3KPřed 11 měsíci
Django Best Practices 2023.
Build a RealTime ChatApp with Django pt4 - Accepting Friend Request.
zhlédnutí 1KPřed 11 měsíci
Build a RealTime ChatApp with Django pt4 - Accepting Friend Request.
Build a RealTime ChatApp with Django pt3 - Sending Friend Request.
zhlédnutí 972Před 11 měsíci
Build a RealTime ChatApp with Django pt3 - Sending Friend Request.
Build a RealTime ChatApp with Django pt2 - Updating Users Profile.
zhlédnutí 851Před 11 měsíci
Build a RealTime ChatApp with Django pt2 - Updating Users Profile.
Build a RealTime ChatApp with Django pt1 - Project Setup and User Authentication
zhlédnutí 2,6KPřed 11 měsíci
Build a RealTime ChatApp with Django pt1 - Project Setup and User Authentication
Build a RealTime ChatApp with Django - Introduction
zhlédnutí 2,9KPřed 11 měsíci
Build a RealTime ChatApp with Django - Introduction

Komentáře

  • @user-gb3zx3hp1q
    @user-gb3zx3hp1q Před 11 hodinami

    Thank you so much. Finally i deployed django with postgres fo free

  • @Abdusshh
    @Abdusshh Před dnem

    vercel cant run pip what do you think the reason might be ./build_files.sh: line 1: pip: command not found Traceback (most recent call last): File "/vercel/path0/manage.py", line 11, in main from django.core.management import execute_from_command_line ModuleNotFoundError: No module named 'django' The above exception was the direct cause of the following exception: Traceback (most recent call last): File "/vercel/path0/manage.py", line 22, in <module> main() File "/vercel/path0/manage.py", line 13, in main raise ImportError( ImportError: Couldn't import Django. Are you sure it's installed and available on your PYTHONPATH environment variable? Did you forget to activate a virtual environment? Error: Command "./build_files.sh" exited with 1

    • @CodeWithClinton
      @CodeWithClinton Před dnem

      Vercel are currently having issues deploying python apps.

    • @Abdusshh
      @Abdusshh Před dnem

      @@CodeWithClinton oh no when do you think it will be fixed

  • @hustlersadda1
    @hustlersadda1 Před dnem

    Sir getting error or pip command not found,python3 not found... Build_files.sh existed with 127

  • @user-cr1dh9fw4q
    @user-cr1dh9fw4q Před 4 dny

    Thanks bro, amazing content!

  • @MatildaCulty
    @MatildaCulty Před 6 dny

    Great work man

  • @jamesdarwin-gn7pl
    @jamesdarwin-gn7pl Před 6 dny

    Great work

  • @johnrmilton1966
    @johnrmilton1966 Před 6 dny

    Thank you for walking us through the whole end-to-end deployment process, especially working through the new db (PotgreSQL) connection and static files gotcha errors that crop up on real-world deployments. This video was a big help for me in getting my first Django app deployed to DigitalOcean App Platform.

  • @fernandocoelho1334
    @fernandocoelho1334 Před 9 dny

    Databases Setting, shouldn't it go in the .env file?

    • @CodeWithClinton
      @CodeWithClinton Před 9 dny

      Yeah, database settings should be in the .env file.

  • @the_unplugged_alpha
    @the_unplugged_alpha Před 11 dny

    How can I initialize git in the folder, kindly give me the steps to guide me through sir.

  • @the_unplugged_alpha
    @the_unplugged_alpha Před 11 dny

    How can I push both the frontend and the backend to github as one link, kindly assist on this one with some directions. Thank you sir.

    • @CodeWithClinton
      @CodeWithClinton Před 11 dny

      create a new folder and initialize git in the folder, then you copy the frontend and backend folders into the newly created folder, then you push the new folder to github.

  • @the_unplugged_alpha
    @the_unplugged_alpha Před 11 dny

    Hello, Clinton how can both the frontend and the backend in my github, kindly assist on this one.

    • @CodeWithClinton
      @CodeWithClinton Před 11 dny

      For each repo click the fork button on the top right

  • @khaphongnguyen
    @khaphongnguyen Před 13 dny

    thank you for sharing. roadmap so nice

  • @potrishead
    @potrishead Před 14 dny

    Exactly what I needed. Thanks so much!

  • @HarisIftikhar-eo1hj
    @HarisIftikhar-eo1hj Před 14 dny

    hey. how do I redploy with a fresh pull?

    • @CodeWithClinton
      @CodeWithClinton Před 4 dny

      Good question, cd into your git repository and run a git pull.

  • @kartikpaul3161
    @kartikpaul3161 Před 14 dny

    BackGround Music is op !

  • @MicworldWorld
    @MicworldWorld Před 15 dny

    thanks, great content sir

  • @iviidev
    @iviidev Před 16 dny

    Is this process same for mysql database too?

  • @cmonika9021
    @cmonika9021 Před 18 dny

    Hi, Your work is great... But I have cloned your project trying to run it.... seems no response... Prompt itself not going to backend

    • @CodeWithClinton
      @CodeWithClinton Před 18 dny

      OpenAI made an update and it affected the prompting method I used.

    • @cmonika9021
      @cmonika9021 Před 18 dny

      Thank you for quick response....now what shall I do for prompting and fetching data

    • @cmonika9021
      @cmonika9021 Před 18 dny

      Can you please do a video... To create chatbot only mock response is fine...and how can we store those response or basically chat history in left side... How exactly chatgpt is storing our chat history in left side ... please please please Using python django

    • @CodeWithClinton
      @CodeWithClinton Před 18 dny

      @@cmonika9021 I will try.

    • @cmonika9021
      @cmonika9021 Před 18 dny

      @@CodeWithClinton thank you so much I am confused whether to have session.cookies or something else to like only models are enough to achieve this

  • @carlosrangel4500
    @carlosrangel4500 Před 18 dny

    Awesome work

  • @Goku-lu2wf
    @Goku-lu2wf Před 22 dny

    After a week of trying finally got a solution a lot of new things about rest framework i learn today becouse of u thx a lot and hats off to u made a such short and simple content on this topic once again thx u very much!!

  • @alejandromaggioni
    @alejandromaggioni Před 22 dny

    Thanks Clinton, you're great. Now I'm working on this video about the Blog. But what happened to the videos of the ecomerce project? Greetings

    • @CodeWithClinton
      @CodeWithClinton Před 22 dny

      Thanks for the compliment, there was a change in plan. I am sorry.

  • @pascalsimo8968
    @pascalsimo8968 Před 22 dny

    Thank you for sharing

  • @alexdin1565
    @alexdin1565 Před 23 dny

    thanks Clinton, please if you make a video about the deployment with domain name etc... it will be nice because all CZcamsrs make tutorial without making the most interesting part the deployment you can use hostinger they will give you a discount coupon for your followers and you can make some litlet money

    • @CodeWithClinton
      @CodeWithClinton Před 23 dny

      Wow, thank you so much for this insight. I appreciate dearly.

  • @BenjieBejo
    @BenjieBejo Před 23 dny

    Hello! Why 'Error during template rendering'?

    • @CodeWithClinton
      @CodeWithClinton Před 23 dny

      This is my first time hearing about this error, so sorry about it.

  • @mamurooyiboluawhore
    @mamurooyiboluawhore Před 23 dny

    What is the difference between adding items to cart and creating cart?

  • @brightokoro7073
    @brightokoro7073 Před 24 dny

    Nice work bro

  • @user-wz9tv8oq5t
    @user-wz9tv8oq5t Před 24 dny

    How to solve this problem?

  • @user-wz9tv8oq5t
    @user-wz9tv8oq5t Před 24 dny

    I try to send the data directly through the python file, but I get an error 400 or 415, and a message ="The submitted data was not a file. Check the encoding type on the form."

    • @CodeWithClinton
      @CodeWithClinton Před 24 dny

      Make sure you are sending a file.

    • @user-wz9tv8oq5t
      @user-wz9tv8oq5t Před 24 dny

      @@CodeWithClinton if possible, make a tutorial with code only in python and not with pokman, we will have a better understanding of the drf

  • @user-wz9tv8oq5t
    @user-wz9tv8oq5t Před 24 dny

    cool

  • @oluochian2439
    @oluochian2439 Před 25 dny

    Hello Clinton, How about introducing another party to the frontend and backend. Something with docker and nginx.

  • @parvezsiddique6703
    @parvezsiddique6703 Před 25 dny

    Thanks, Gonna be very useful for me.

  • @CHRISDANIELDAQUIOAG
    @CHRISDANIELDAQUIOAG Před 25 dny

    also when I'm clicking the link it says that something went wrong

  • @CHRISDANIELDAQUIOAG
    @CHRISDANIELDAQUIOAG Před 25 dny

    how to install requirements.txt it doesn't install in my website said that its not inside of my directory, when I'm putting it in the directory it still doesn't install, help me please

    • @CodeWithClinton
      @CodeWithClinton Před 24 dny

      Make sure the requirements file is in the root directory of your Django project.

  • @robertebafua6658
    @robertebafua6658 Před 25 dny

    Saw Egusi and Eba :)🤣

  • @robertebafua6658
    @robertebafua6658 Před 25 dny

    Coming from a NestJS background I am impressed with Django and how you show us how to use these features

  • @santiagofernandez5522

    Thank you for the video! It has been very helpful.

  • @santiagofernandez5522

    Thank you for the video! It has been very helpful!!

  • @abhisheksharma10600
    @abhisheksharma10600 Před 28 dny

    The way you teach is amazing. I am learning a lot from you. Thank you so much.

  • @iliyac-io8up
    @iliyac-io8up Před 28 dny

    if you are a beginner and have been endlessly scrolling to find a good, high level and EASY to follow django tutorial, then NO MORE. this gentlemen has a talent to make complicated stuff seem easy. I am happy to say that i finally "understand" coding, i never thought i will ever be able to learn coding with python. CLINTON ALL RESPECT TO YOU!!!!!!

    • @CodeWithClinton
      @CodeWithClinton Před 28 dny

      Thank you for the kind words, I appreciate dearly.

  • @halitozkaya2885
    @halitozkaya2885 Před 29 dny

    Super useful video that fixes the issue with the "Less Secure Apps" setup that I see everywhere on the internet. Thank you!

  • @rneditz3250
    @rneditz3250 Před 29 dny

    Can anyone tell me here how can i get that Html,css codes of templates???Bcoz he is giving paid not free that too worth 500 rs which is too costly.

  • @alyaaahmed4462
    @alyaaahmed4462 Před měsícem

    first of all , thanks for this tutorial , and i have a question , each time i make a new deployment using (deploy the last commit ) the data stored in the database is deleted , do you know the reason ?

    • @CodeWithClinton
      @CodeWithClinton Před měsícem

      To avoid your database from deleting your can use a live postgres database.

    • @CodeWithClinton
      @CodeWithClinton Před měsícem

      Use a live PostgreSQL database.

    • @alyaaahmed4462
      @alyaaahmed4462 Před 28 dny

      ​@@CodeWithClinton I create a database on render and connect it to the web service using internal url , but still deleted 😔

  • @width19
    @width19 Před měsícem

    you didnt show how to set up the django project at the beginning