Code With Clinton
Code With Clinton
  • 193
  • 579 021
Django and React Project for Beginners - Build a FullStack Notes App
Learn how to build a full-stack web application using Django and React in this beginner-friendly tutorial. Follow along as we set up a Django backend, create a React frontend, and integrate them to develop a functional notes app. Perfect for newcomers to full-stack development!
Source code:
Frontend: github.com/CodeWithClinton/notes-app-react
Backend: github.com/CodeWithClinton/notes-crud-api
Fullstack: github.com/CodeWithClinton/react-note-app
Timestamps:
00:00:00 - Introduction
00:03:10 - Establishing a Python Virtual Environment
00:05:29 - Initiating a New Django Project
00:09:40 - Developing the Notes Model
00:15:08 - Applying Model Migrations to the Database
00:15:44 - Creating a Superuser for Django Admin
00:17:33 - Serializing the Notes Model
00:20:34 - Building the View for Creating and Retrieving Notes
00:27:39 - Mapping URLs to Views
00:31:24 - Adding New Notes to Django Admin
00:37:40 - Debugging URL Mappings
00:39:45 - Listing Notes
00:42:52 - Retrieving, Updating, and Deleting Notes
00:51:35 - Endpoint Testing Using VSCode Postman
00:57:37 - Introduction to Frontend Development with React
00:58:08 - Setting Up a React Project
01:02:53 - Cleaning Up the React Project
01:04:41 - Displaying "Hello World" in the Browser
01:06:12 - Creating the "NavBar" Component
01:16:22 - Developing the "Filter" Component
01:17:56 - Constructing "NoteContainer" and "NoteCard" Components
01:23:26 - Utilizing React Router Dom for Multiple Pages
01:30:03 - Integrating "NavBar" Across All Pages
01:34:18 - Creating the "Add Note" Page
01:41:04 - Developing the "Note Detail" Page
01:47:25 - Creating the "Edit Note" Page
01:51:08 - Connecting Django with React
01:56:49 - Fetching Notes in the Frontend
02:12:08 - Displaying the First 20 Words of Each Note's Body
02:14:58 - Implementing Dynamic Note Coloring
02:18:59 - Formatting Date and Time in Note Objects
02:21:57 - Adding a Loading Spinner
02:32:20 - Building the Note Detail Page
02:43:28 - Creating a New Note
03:08:40 - Implementing Toast Notifications
03:12:24 - Updating a Note
03:42:10 - Deleting a Note
04:00:07 - Filtering Notes
04:09:41 - Implementing Search Functionality (Backend and Frontend)
04:32:46 - Conclusion
Переглядів: 1 570

Відео

Build a Full Stack Web App - Django and React Project 2024
Переглядів 1,7 тис.Місяць тому
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_bl...
Build a Blog with Django and Tailwind CSS
Переглядів 5892 місяці тому
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: ua-cam.com/video/QCDpBhW8XbM/v-deo.htmlsi=Fhv08ijZ5fmc5xkr Source code: github.com/CodeWithClinton/django_tailwind_blog
Django Rest Framework Full Course 2024
Переглядів 1,2 тис.4 місяці тому
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)
Переглядів 9825 місяців тому
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
Переглядів 2,9 тис.5 місяців тому
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.
Переглядів 4,8 тис.6 місяців тому
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!
Переглядів 2,3 тис.6 місяців тому
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
Переглядів 6977 місяців тому
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.
Переглядів 4847 місяців тому
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
Переглядів 1,4 тис.8 місяців тому
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
Переглядів 4 тис.8 місяців тому
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
Переглядів 1,7 тис.8 місяців тому
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
Переглядів 1 тис.8 місяців тому
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
Переглядів 3,4 тис.8 місяців тому
Deploy a Django Web App on DigitalOcean Droplets | PostgreSQL - Nginx - Gunicorn
Payment Integration - Ecommerce Restful API - Django Rest Framework
Переглядів 2,1 тис.9 місяців тому
Payment Integration - Ecommerce Restful API - Django Rest Framework
Best VSCode Extensions for Django.
Переглядів 3,7 тис.9 місяців тому
Best VSCode Extensions for Django.
Django Tutorial for Complete Beginners - Build your first Django Web App
Переглядів 6599 місяців тому
Django Tutorial for Complete Beginners - Build your first Django Web App
How to Deploy Django Apps on Render - Full Tutorial - Free and Easy
Переглядів 7 тис.10 місяців тому
How to Deploy Django Apps on Render - Full Tutorial - Free and Easy
Django Project for Beginners - Build a Voting App with Django #3
Переглядів 65810 місяців тому
Django Project for Beginners - Build a Voting App with Django #3
Django Project for Beginners - Build a Voting App with Django #2
Переглядів 95510 місяців тому
Django Project for Beginners - Build a Voting App with Django #2
Build an Online Voting System with Django #1- Django Project for Beginners
Переглядів 4,1 тис.10 місяців тому
Build an Online Voting System with Django #1- Django Project for Beginners
Django: Managing Development and Production Settings.
Переглядів 2,5 тис.10 місяців тому
Django: Managing Development and Production Settings.
Django Mastery: 10 Project Ideas to Become an Expert.
Переглядів 72811 місяців тому
Django Mastery: 10 Project Ideas to Become an Expert.
Sending Emails, attach files using Django: Goodbye to Google SMTP!
Переглядів 2,1 тис.11 місяців тому
Sending Emails, attach files using Django: Goodbye to Google SMTP!
Django Best Practices 2023.
Переглядів 1,4 тис.Рік тому
Django Best Practices 2023.
Build a RealTime ChatApp with Django pt4 - Accepting Friend Request.
Переглядів 1 тис.Рік тому
Build a RealTime ChatApp with Django pt4 - Accepting Friend Request.
Build a RealTime ChatApp with Django pt3 - Sending Friend Request.
Переглядів 1 тис.Рік тому
Build a RealTime ChatApp with Django pt3 - Sending Friend Request.
Build a RealTime ChatApp with Django pt2 - Updating Users Profile.
Переглядів 896Рік тому
Build a RealTime ChatApp with Django pt2 - Updating Users Profile.
Build a RealTime ChatApp with Django pt1 - Project Setup and User Authentication
Переглядів 2,7 тис.Рік тому
Build a RealTime ChatApp with Django pt1 - Project Setup and User Authentication

КОМЕНТАРІ

  • @albo181
    @albo181 20 годин тому

    Thanks a lot Clinton, you are a great teacher! I studied the Meta backend developer course, and this is really helping me to understand how to connect to the front end. I really appreciate the help! 🦾

    • @CodeWithClinton
      @CodeWithClinton 20 годин тому

      @@albo181 It is always my pleasure. Thank you.

  • @chartypes
    @chartypes День тому

    Thanks for the video bro, appreciate it

  • @programmingtech6660
    @programmingtech6660 2 дні тому

    Thanks. Your vedio is very helpful to start react and Django

  • @mohammad88200
    @mohammad88200 4 дні тому

    Is there this project in your github?

  • @SangramSubudhi-hn7gj
    @SangramSubudhi-hn7gj 5 днів тому

    dude improve your english dont know what kind of english you speak.. anyway thanks for the video

  • @ronunkwor
    @ronunkwor 5 днів тому

    Thank you so much

  • @fashion_ridewithcrownex9032
    @fashion_ridewithcrownex9032 5 днів тому

    Thsnk you. Please do you have a video on how you built the frontend templates. I mean a tutorial on you put together the TailwindCSS for frontend

    • @CodeWithClinton
      @CodeWithClinton 5 днів тому

      Sorry, I don't have a video on how the frontend was built. But the source code is in the video's description.

  • @melisaaydnc2738
    @melisaaydnc2738 5 днів тому

    if i use db.sqlite3 only,is it still working or not?

  • @amedeuskansankala8690
    @amedeuskansankala8690 6 днів тому

    What theme do you use for your syntax colouring and the background

    • @CodeWithClinton
      @CodeWithClinton 6 днів тому

      @@amedeuskansankala8690 I can't remember, that theme was used on my former computer.

  • @amedeuskansankala8690
    @amedeuskansankala8690 6 днів тому

    Hey bro, what extensions do you use for your VS Code Setup. It looks lit

    • @CodeWithClinton
      @CodeWithClinton 6 днів тому

      I can't remember that theme was on my old pc.

  • @danielndirika6348
    @danielndirika6348 7 днів тому

    The crackerjack himself👑. Great insights✨

  • @user-dj8qr7yx3v
    @user-dj8qr7yx3v 8 днів тому

    I HV a project. I'm developing CMS using python in Django

  • @IamNotCoder
    @IamNotCoder 8 днів тому

    Everything is working for me but my media files are not displaying. What can be the reason ?

    • @CodeWithClinton
      @CodeWithClinton 7 днів тому

      Check your settings.py file and make sure MEDIA_URL, and MEDIA_ROOT are properly configured.

    • @CodeWithClinton
      @CodeWithClinton 7 днів тому

      make sure your MEDIA_URL and MEDIA_ROOT are properly configured.

  • @sandeepkumar-ju4iy
    @sandeepkumar-ju4iy 9 днів тому

    Thank bro. can you pls upload a new videos, how to update an existing image in DRF

  • @Kennerdoll
    @Kennerdoll 12 днів тому

    can you add a search option incase you have a lot of countries

  • @CaptainChunk41
    @CaptainChunk41 13 днів тому

    I followed the steps but I keep getting this error, what could be causing this? "ssl.SSLCertVerificationError: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate in certificate chain (_ssl.c:1129)"

  • @alexiojunior7867
    @alexiojunior7867 14 днів тому

    This is awesome , i also liked the blog tutorial ,keep on creating content of high quality like this

    • @CodeWithClinton
      @CodeWithClinton 14 днів тому

      @@alexiojunior7867 thank you so much, I appreciate dearly.

  • @godwinjames2737
    @godwinjames2737 14 днів тому

    Pls I need a tutorial on how to host an api and database

    • @CodeWithClinton
      @CodeWithClinton 14 днів тому

      @@godwinjames2737 the playlist has a deployment tutorial.

  • @asseeltarish7217
    @asseeltarish7217 14 днів тому

    Is there any settings that should applied after installing the django-intellisense???

  • @alexdin1565
    @alexdin1565 14 днів тому

    why all youtubers donat make authentication when using django + react or nextjs and no one make a video on how we can deploy those projects on servers? its defecult or what I hope any one see my comment give me an answer if he or she have

    • @CodeWithClinton
      @CodeWithClinton 14 днів тому

      @@alexdin1565 this video is for beginners, authentication is quite advanced. On my next django and react video I will include authentication and deployment. Thanks for pointing it out.

  • @user-cr1dh9fw4q
    @user-cr1dh9fw4q 14 днів тому

    Great job, thank you!

  • @hasantareq9394
    @hasantareq9394 16 днів тому

    Great.. Please do something about sound

  • @RanaUmair-sm9lz
    @RanaUmair-sm9lz 18 днів тому

    Can U create a advance level project for apply internship using Django and React 😮

    • @CodeWithClinton
      @CodeWithClinton 18 днів тому

      @@RanaUmair-sm9lz yeah, that will be very soon.

    • @RanaUmair-sm9lz
      @RanaUmair-sm9lz 18 днів тому

      @@CodeWithClinton still waiting

    • @CodeWithClinton
      @CodeWithClinton 18 днів тому

      @@RanaUmair-sm9lz I will create a more advanced course soon.

    • @BatMan-mn7yc
      @BatMan-mn7yc 13 днів тому

      ​@@CodeWithClinton Still waiting

  • @RanaUmair-sm9lz
    @RanaUmair-sm9lz 18 днів тому

    Thanx Clinton

  • @Abdullo_1124
    @Abdullo_1124 19 днів тому

    Thanks for the video

  • @guntarion
    @guntarion 19 днів тому

    This is awesome. Thank you! I learned so much from the react 🙂 It would be great if you could also create react and fastapi (since it's a lot easier to learn) using perhaps mongodb

  • @Samur_upt
    @Samur_upt 19 днів тому

    Thank you very much for helping me

  • @maazshaikh7905
    @maazshaikh7905 19 днів тому

    Thanks for this amazing Project. Is this suitable for react and django rest framework beginners? Does it include authentication and authorization also

  • @anupalone9886
    @anupalone9886 19 днів тому

    In 22 videos will i get whole project.. Please reply me.. So that i can start from today.. Pr tell me which part you have not covered

  • @andersonlontsi299
    @andersonlontsi299 19 днів тому

    Thank you.

  • @Samur_upt
    @Samur_upt 20 днів тому

    Video is great, make a chat website again, send audio and pictures

  • @dilmurodsadullayev8106
    @dilmurodsadullayev8106 21 день тому

    Thanks

  • @maazshaikh7905
    @maazshaikh7905 21 день тому

    is render still free for beginner full stack projects?

    • @CodeWithClinton
      @CodeWithClinton 21 день тому

      Yes it is.

    • @maazshaikh7905
      @maazshaikh7905 21 день тому

      @@CodeWithClinton thanks for the response. what about media files in our project for user uploads. How to configure the url. Please reply.

    • @CodeWithClinton
      @CodeWithClinton 21 день тому

      ​@@maazshaikh7905I don't know if render handles media files but I use aws s3 bucket.

  • @user-he3ud4yd4n
    @user-he3ud4yd4n 23 дні тому

    Can you login directly once your otp has been confirmed

  • @user-gb3zx3hp1q
    @user-gb3zx3hp1q 24 дні тому

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

  • @Abdusshh
    @Abdusshh 25 днів тому

    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 25 днів тому

      Vercel are currently having issues deploying python apps.

    • @Abdusshh
      @Abdusshh 25 днів тому

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

  • @hustlersadda1
    @hustlersadda1 25 днів тому

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

  • @user-cr1dh9fw4q
    @user-cr1dh9fw4q 28 днів тому

    Thanks bro, amazing content!

  • @MatildaCulty
    @MatildaCulty Місяць тому

    Great work man

  • @jamesdarwin-gn7pl
    @jamesdarwin-gn7pl Місяць тому

    Great work

  • @johnrmilton1966
    @johnrmilton1966 Місяць тому

    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.

    • @CodeWithClinton
      @CodeWithClinton Місяць тому

      It is my pleasure, I am glad I could help.