![Code With Clinton](/img/default-banner.jpg)
- 193
- 579 021
Code With Clinton
Nigeria
Приєднався 7 тра 2020
I am Clinton a Django developer with a passion for crafting efficient web applications. With years of experience, I have honed my skills in Python and the Django framework. Clinton is well-versed in database management, RESTful APIs, and front-end integration with React js.
The goal of this channel is to help aspiring developers hone their skills in languages like Python and JavaScript and frameworks like Django and React.js.
So join me as we transform the world together.
The goal of this channel is to help aspiring developers hone their skills in languages like Python and JavaScript and frameworks like Django and React.js.
So join me as we transform the world together.
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
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!
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
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! 🦾
@@albo181 It is always my pleasure. Thank you.
Thanks for the video bro, appreciate it
You are welcome.
Thanks. Your vedio is very helpful to start react and Django
Thank you, it is always my pleasure.
Is there this project in your github?
Yes it is on GitHub.
dude improve your english dont know what kind of english you speak.. anyway thanks for the video
I will improve.
@@CodeWithClinton your English is fine by me
@@leonardemelieze8103 thank you.
Thank you so much
@@ronunkwor you are welcome.
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
Sorry, I don't have a video on how the frontend was built. But the source code is in the video's description.
if i use db.sqlite3 only,is it still working or not?
Try and see.
What theme do you use for your syntax colouring and the background
@@amedeuskansankala8690 I can't remember, that theme was used on my former computer.
Hey bro, what extensions do you use for your VS Code Setup. It looks lit
I can't remember that theme was on my old pc.
The crackerjack himself👑. Great insights✨
@@danielndirika6348 thank you Daniel.
I HV a project. I'm developing CMS using python in Django
Great, go ahead.
But I'm actually trying to use ur templates bt it's not working
Can u please help me out
Everything is working for me but my media files are not displaying. What can be the reason ?
Check your settings.py file and make sure MEDIA_URL, and MEDIA_ROOT are properly configured.
make sure your MEDIA_URL and MEDIA_ROOT are properly configured.
Thank bro. can you pls upload a new videos, how to update an existing image in DRF
Okay, I will work on that.
can you add a search option incase you have a lot of countries
Okay, thank you.
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)"
Are you using a domain name?
This is awesome , i also liked the blog tutorial ,keep on creating content of high quality like this
@@alexiojunior7867 thank you so much, I appreciate dearly.
Pls I need a tutorial on how to host an api and database
@@godwinjames2737 the playlist has a deployment tutorial.
Is there any settings that should applied after installing the django-intellisense???
@@asseeltarish7217 restart vscode.
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
@@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.
Great job, thank you!
@@user-cr1dh9fw4q you are welcome.
Great.. Please do something about sound
I will, thank you.
Can U create a advance level project for apply internship using Django and React 😮
@@RanaUmair-sm9lz yeah, that will be very soon.
@@CodeWithClinton still waiting
@@RanaUmair-sm9lz I will create a more advanced course soon.
@@CodeWithClinton Still waiting
Thanx Clinton
@@RanaUmair-sm9lz you're welcome.
Thanks for the video
@@Abdullo_1124 you are welcome.
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
@@guntarion okay I will try, thank you.
Thank you very much for helping me
Happy to help.
Thanks for this amazing Project. Is this suitable for react and django rest framework beginners? Does it include authentication and authorization also
Thank you.
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
Yeah, you will get all.
Thank you.
you are welcome.
Video is great, make a chat website again, send audio and pictures
Thank you, I will work on that.
Thanks
You're welcome.
is render still free for beginner full stack projects?
Yes it is.
@@CodeWithClinton thanks for the response. what about media files in our project for user uploads. How to configure the url. Please reply.
@@maazshaikh7905I don't know if render handles media files but I use aws s3 bucket.
Can you login directly once your otp has been confirmed
I am not sure, try and see.
Thank you so much. Finally i deployed django with postgres fo free
You're welcome.
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
Vercel are currently having issues deploying python apps.
@@CodeWithClinton oh no when do you think it will be fixed
Sir getting error or pip command not found,python3 not found... Build_files.sh existed with 127
Sorry, it has to do with vercel.
same, did you found a way to get around it?
Thanks bro, amazing content!
You're welcome.
Great work man
Thank you.
Great work
Thank you.
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.
It is my pleasure, I am glad I could help.