My project idea was very simple and straightforward. I was trying to make a React app that has multiple audio files inside it. There are several buttons and when the user clicks on the button a certain audio is played.

My project stack was

• TypeScript

• React

• Tailwind

JavaScript takes care of the types but with TypeScript you gotta watch your step.

Till now I have only worked with images in React so I googled how to use audio files and two libraries shot up.

https://www.npmjs.com/package/react-sound

https://www.npmjs.com/package/use-sound

use-sound is a relatively new package compared to react-sound so I picked that up.

The work of libraries is to make the implementation simple and these perfectly do that. I implemented as it says in the docs.

import useSound from 'use-sound';

import boopSfx from '../../sounds/boop.mp3';

const BoopButton = () => {
  const [play] = useSound(boopSfx);

  return <button onClick={play}>Boop!</button>;
};

The implementation was straightforward and I started using it.

After some days when I was making an update to the sound component I was talking to one of my friends about using and storing sound files in React, and he told me to use HTML5 <audio> component. I was like “Will that work in React? 😲”.

Now one thing to note here is that React also uses HTML, and React is just an abstraction of the complex JavaScript functions that convert your JSX into HTML so almost all the HTML tags and stuff work by default in React.

I was skeptical about whether HTML <audio> tag will work on not but then I read about the Tag on MDN (best resource).

The <audio> tag takes in an srcand some attributes like controls, muted, etc. The <audio> tag does not have any such visual output, so if you hide the controls, nothing will be visible to you. This is perfect if you want to play audio when clicking on a custom button.

Coming to importing audio files. Many places including use-sound docs suggest to import audio files like

import boopSfx from '../../sounds/boop.mp3';

Well, this doesn’t work, at least not in my case with TypeScript. 🥲

This answer from StackOverflow worked for me https://stackoverflow.com/a/59456219/9715289

The solution is to use ES5 require()

const mySound = require("../assets/file_name.mp3");

This imports the file nicely. ✌️

Now the final task was to add a click event to the button to play audio when the button was clicked.

For that my implementation is simple. I used a onClickevent to trigger the playand pause function of the audio.

const AudioPlayer = () => {

  const audio = document.getElementById("audio_tag");
  const [play, setPlay] = useState(false);

  return(
     ...
      <button
        onClick={() => {
          play ? setPlay(false) : setPlay(true);
          play ? audio.pause() : audio.play();
        }}
      >
      ...
     </button>
     <audio id="audio_tag" src={mySound} />
  )
}

This sums up the implementation

TLDR;

This little incident made me realize that basic things like HTML and CSS are feature-packed and they are very well-suitable for simple tasks. In my case I just wanted to play audio upon clicking so I don’t need to add an external library for that I can just use the built-in tools to achieve what I want.

This in no way means that external libraries are bad. They are excellent at providing you with a simple implementation and provide additional features. But first, we should also look at what the default tools are providing us.

Conclusion

In the current state of the web new libraries are coming up every day and it is tempting to put them into our projects but first, we should try to assess whether that library actually provides some value or that work can be done using the built-in tools only.

That’s it
ENJOY and <CODE/>

About me:*I am **Shubh Agrawal**, a Full Stack Developer and I love to code, write, read and click pictures. 😁
[https://www.theshubhagrwl.in/*](https://www.theshubhagrwl.in/)

This technique is used on many websites, especially those with a feed, e.g. YouTube.

So how does this thing works?

Let's discuss the basic idea of Infinite Scrolling.

In an Infinite Scroll, the user is shown a single page with limited results. When the user reaches the end of those results, more content is loaded, and this goes on.

So what actually happens here?

For an Infinite Scroll, we prefer an API that has pagination enabled. So first, we simply request the first page from the API. Now when the user reaches the end of the page, a new API call is made with the next page number.

As you might have noticed from the above paragraph, we make the API call when we reach the end of the page. There are two ways to detect the end of the page. Either the page is fully scrolled, or the last element is fully visible on the screen. In this article, we are going to learn how to exactly do this.

We will discuss two methods of implementing Infinite Scroll

Prerequisites

• Knowledge of React Hook: useState, useRef, useEffect

• A basic react application setup

Implementation - #1

In this method, we will use the different values of windows that are provided by the browser.

We need to attach a scroll event listener to the window. This will be done inside useEffect because the listener needs to be attached as soon as the component is mounted.

useEffect(() => {
    window.addEventListener("scroll",handleInfiniteScroll);
    return () => window.removeEventListener("scroll", handleInfiniteScroll);
},[])

When the component is loaded, we have attached a Scroll Event listener to the page which will run handleInfiniteScroll the method. Then we remove that event listener in the cleanup method of useEffect.

Try to remove the cleanup method (return) in the useEffect and run the code. Observer carefully how the requests are being made then.

Let's define handleInfiniteScroll method

//states
const [page, setPage] = useState(1);
const [loading, setLoading] = useState(true);

//method
const handleInfiniteScroll = async () => {
    try {
      if (
        window.innerHeight + window.document.documentElement.scrollTop + 1 >=
        window.document.documentElement.scrollHeight
      ) {
        setLoading(true);
        setPage((prev) => prev + 1);
      }
    } catch (error) {
      console.error(error);
    }
  };

We have declared two states here, page keeps track of the page number because our API supports pagination so we need to pass a page number to it.

In the handleInfiniteScroll method, we are checking for the condition that, the sum of window.innerHeight and window.document.documentElement.scrollTop + an additional number of pixels is greater than equal to window.document.scrollHeight.

window.innerHeight: Returns the interior height of the window in pixels
window.document.documentElement.scrollTop : Returns the number of pixels that are scrolled vertically
window.document.documentElement.scrollHeight: Returns the total height of content (which is yet not visible on the screen)

So when innerHeight and scrollTop are added together they will always result in scrollHeight. You can verify this by doing a console log of these values and checking them manually.

This method will make changes to the state page. So we will add an useEffect which will call our API.

//state
const [card, setCard] = useState([])

//method
const getCardData = async () => {
    const res = await fetch(
      `https://jsonplaceholder.typicode.com/posts?_limit=9&_page=${page}`
    );
    const data = await res.json();
    //solved: the first page is repeated twice
    if (page !== 1) {
      setCard((prev) => [...prev, ...data]);
    } else {
      setCard([...data]);
    }
    setLoading(false);
  };

//useEffect
useEffect(() => {
  getCardData();
}, [page]);

This piece of code is really simple. All we have done here is called the API and stored the data in setCard() (probably not a good name 😅)

Now that we have all the main code setup we can simply pass our data which is in card to a component that will render the items.

And THAT'S IT!!

You get an infinite scroll there.

Here is a live demo of the app that I created: https://effortless-granita-f1a33d.netlify.app/

And you can get the code here: https://github.com/theshubhagrwl/infinite-scroll-react-window

Implementation - #2

In this... well let's continue this is next article.

To give you a hint, in the second approach we will use the IntersectionObserver API

Good Day!

“How I read a book a week?” this is one of the many internet glories we see nowadays. This is grown with the fact that people who read books are considered smart. Yeah, they are smarter than the average because books provide a different perspective to the individual. So it increases the knowledge of the reader.

But there is one thing made famous by the online “influencers” that you should read plenty of books. This is a good piece of advice. Reading for knowledge is a good thing, but reading for the sake of reading or increasing the count to show off on social media is dumb.

Through a simple YouTube search, you can find a ton of people who will tell you how to read a book per week. These people can be right in their ways of doing things because they have to get views and show others the numbers and be considered “smart”. But learning is not a number game.

I have two main concerns for reading a book a week:

1.Learning

Let’s say you read a book per week. I don’t think most books are simple enough to be understood in a single read.

I read a tweet by Kunal Shah where the gist was: Reading a book is not about remembering everything you read. It’s more about acquiring a new perspective.

One read cannot change the perspective. To get the whole about the book you have to go a little slow and deep and think about it.

This takes me to the next point,

2.Time

Reading is time-consuming. Unless you are reading a short book like “Who moved my cheese?” you can’t just wrap up a book in a week. The majority of the books are decently long and need a focused mind to read.

I don’t think you are free enough to read the whole day. As a developer and a student, I have to manage time between work, college, and personal things. The people making videos are also taking out time to make videos. Right?

3.Are you a Scanner?

When I started reading books, YouTube suggested videos on how to read a book quickly. These are seductive titles and as Naval said in Joe Rogan Podcast “You have to buy that stupid car to understand it is stupid”.

The main point of them(videos) was that you don’t have to read every single line. You just have to SKIM/SCAN the book and read the interesting things.

This may be applied to highly repetitive titles like “The Power of Your Subconscious Mind”, but I don’t get what these smart folks can learn by scanning or skimming “The Psychology of Money”. They’re probably smarter than the writer… I don’t know.

What's my way?

I am sharing my way, but I strongly recommend finding your way rather than blindly following someone. While writing this article I was reading “The Psychology of money”.

I sit, read the book without a highlighter or pencil and read for about 30mins. You can do it chapter-wise as well.

The main thing is that you just need to read the book and don’t care too much about understanding everything you are reading. It may sound counterintuitive, but give it a try. It’s like skimming and scanning but at a lot slower pace.

This will give you an idea about what is interesting and what is not. This can take you approx. a week or two depending on the book. Then you can post on social media LOL

After the initial phase, take a break of a day or two and after that, Take a pencil or highlighter, start reading the book with full focus and start marking the important quotes, lines, ideas, vocab. This will be helpful as you already have an idea of what is important. Also, sometimes you don’t get what the writer is trying to say in the first go but when you re-read with concentration you get the point. You can get that Aha moment.

I do this for around 30mins, again depends on the book and you. This is the part where you extract the most out of a book.

One more thing I do is write the small points I find in the book in the Sticky Notes app, then later tweet them. This increases my understanding and also writing skills, this helps me to understand and write better.

Whenever you are learning something it is better to follow “Spaced repetition”. The tweets or the small notes you will make will support that. This way you don’t have to read the whole book again, but will be able to get all the useful information out of it whenever you want.

Playing the number game is not always a good idea and people on social media are obsessed with this game. Reading for fun and learning is what you should look for, not for Social Validation.

A tweet about social validation I wrote after watching a video by Mark Mason.

Thanks for putting your valuable time on this article. If you enjoyed this article then consider supporting me. Thanks Again!

You made an app with Django. Great! , and you are excited to show it to everyone on the planet. For that, you need to put it somewhere online so that others can access it.

Okay, you did some research and selected Heroku. Great Choice!👍

Now you started to deploy your app and did your research online and now you have many different resources to follow which suggest millions of ways to do it. So you are confused, frustrated and stuck and somehow managed to put host it but after that, to your surprise, you found that your CSS files didn't show up.🤦‍♂️

OK, Now let's solve your problems. This article covers almost everything that you will need.

Roadmap

• Install Required Tools
• Create Required Files
• Create a Heroku app
• Edit settings.py
• Make changes for static files

Install the required tools

For deploying to Heroku you need to have Heroku CLI (Command Line Interface) installed.

You can do this by going here: https://devcenter.heroku.com/articles/heroku-cli

CLI is required because it will enable us to use features like login, run migrations etc.

Next we will need gunicorn and whitenoise

pip install gunicorn
pip install whitenoise

We will use Postgres Heroku so we will also need dj_database_url (https://pypi.org/project/dj-database-url/)

pip install dj-database-url

Add it in MIDDLEWARE in settings.py file

MIDDLEWARE = [
  # 'django.middleware.security.SecurityMiddleware',
  'whitenoise.middleware.WhiteNoiseMiddleware',
  # ...
]

Use of gunicorn?

The Django and Flask web frameworks feature convenient built-in web servers, but these blocking servers only process a single request at a time. If you deploy with one of these servers on Heroku, your dyno resources will be underutilized and your application will feel unresponsive.

Gunicorn is a pure-Python HTTP server for WSGI applications. It allows you to run any Python application concurrently by running multiple Python processes within a single dyno. It provides a perfect balance of performance, flexibility, and configuration simplicity.

https://devcenter.heroku.com/articles/python-gunicorn

Use of WhiteNoise

With a couple of lines of config WhiteNoise allows your web app to serve its own static files, making it a self-contained unit that can be deployed anywhere without relying on nginx, Amazon S3 or any other external service. (Especially useful on Heroku, OpenShift and other PaaS providers.)

http://whitenoise.evans.io/en/stable/

Create files required by Heroku

After installing the CLI let's create all the files that Heroku needs.

Files are :

1. requirements.txt

   Requirements.txt is the simplest to make. Just run the command

    pip freeze > requirements.txt
   

   This command will make a .txt file which will contain all the packages that are required by your current Django Application.

   Note: If you add any package further then run this command again, this way the file will be updated with the new packages

   What is the use of requirements.txt? As you can see that it contains all the dependencies that your app requires. So when you put your app on Heroku it will tell Heroku which packages to install.

2. Procfile

   After this make a new file name Procfile and do not put any extension in it. It is a file required by Heroku

   According to Heroku :

   Heroku apps include a Procfile that specifies the commands that are executed by the app on startup. You can use a Procfile to declare a variety of process types, including:

   • Your app’s web server
   • Multiple types of worker processes
   • A singleton process, such as a clock

   • Tasks to run before a new release is deployed

     For our app we can write the following command

     web: gunicorn name_of_your_app.wsgi —log-file -
     

     If you are confused about your app name, then just go to wsgi.py file in your project and you will find your app name there.

3. runtime.txt

   After this make a new text file called runtime.txt and inside it write the python version you are using in the following format

   python-3.8.1

   That's all the files we require. Now we have to start editing our settings.py file.

Create a Heroku app

This is a simple step and can be done in 2 ways, either by command line or through the Heroku Website.

Let's use the Heroku Website for now.

• After making Heroku Account you will see an option to create a new app
• It will ask you for a name, the name should be unique. After hit and trials, you will be redirected to your app dashboard.
• There are many options to play with here but let's go to the settings tab and there click on Reveal Config Vars
• In the KEY write SECRET_KEY and in VALUE paste the secret key from the settings file and you can change it because only this key will be used.

That's all for now. We will revisit it soon.

Edit settings.py

There are quite a few changes that should be made in this file.

Lets' start

First change

DEBUG = False

In the allowed hosts enter the domain of your Heroku app

eg.

ALLOWED_HOSTS = ["your_app_name.herokuapp.com", "127.0.0.1"]

Replace the SECRET_KEY variable with the following (assuming that you have setup the secret key in heroku from the previous step)

SECRET_KEY = os.environ.get('SECRET_KEY')

What this does is, it gets the SECRET_KEY from the environment. In our case, we can set the secret_key in Heroku and it will provide the key here through environment variables.

Setup static files

In settings file, you will find

STATIC_URL = '/static/'

Replace this with the following code

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

Basically this will create a folder named static which will hold all the static files (like CSS files).

If your App contains images that you have stored on it or the user has the ability to store then add the following lines

MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

This is pretty much the same as the above

There is one more thing you need to do.

If you have media files then to allow Django to server them you have to add a line to your urls.py file of the project (top-level urls file)

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # ... the rest of your URLconf goes here ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

I highly recommend you have a look at this documentation.

https://docs.djangoproject.com/en/3.1/howto/static-files/

So we have completed the 2 most important steps for deploying

Adding Code to Github

Make a new Github Repo and add all of your code in it. Use this post a reference

After that go to Heroku and under the Deploy tab, you will see an option to connect Github.

Connect your repo and you can hit the deploy button to deploy your app.

Using Heroku Postgres

But What is the Need? I am using SQLite already!

The problem is that

The Heroku filesystem is ephemeral - that means that any changes to the filesystem whilst the dyno is running only last until that dyno is shut down or restarted. Each dyno boots with a clean copy of the filesystem from the most recent deploy. This is similar to how many container-based systems, such as Docker, operate. In addition, under normal operations, dynos will restart every day in a process known as "Cycling". (https://help.heroku.com/K1PPS2WM/why-are-my-file-uploads-missing-deleted)

Basically all the data you will store will get deleted every 24hrs.

To solve Heroku suggest using either AWS or Postgres. Heroku has made it very simple to use Postgres.

Let's do this,

Go to your app dashboard and in the Resources section search for Postgres. Select it and you will get something like this

Now go to the settings tab and reveal the config vars

You will see a DATABASE_URL key there. It means that Heroku has added the database and now we have to tell our app to use this database.

For this, we will need dj_database_url.

Now paste the following code below DATABASES in settings file

db_from_env = dj_database_url.config(conn_max_age=600)
DATABASES['default'].update(db_from_env)

That's it, now your database is setup!

Currently, your database is empty and you might want to fill it.

• Open terminal
• type → heroku login
• After the login run the following commands

heroku run python manage.py makemigrations
heroku run python manage.py migrate
heroku run python manage.py createsuperuser

Now your app is ready to be deployed

either use CLI or push it through GitHub

git push heroku master

OK, so it's finally done. It is a bit long but quite easy to do because you have to make only some minor changes, nothing too big.

If there is any kind of improvement then please tell me in the comments.

Check Out my other articles

https://theshubhagrwl.hashnode.dev/the-world-of-css-should-you-write-your-own-css-or-use-any-library

https://theshubhagrwl.hashnode.dev/custom-user-model-in-django-3

Visit my website and let's get connected on Social Platforms :)

https://theshubhagrwl.vercel.app/

To a newcomer or even an experienced person glancing at the choices available can be too much confusing and overwhelming. There is literally a framework or library for everything. In JavaScript, you even have one for checking if the number is even and you will be amazed by its popularity Check here

Anyways, coming to the topic in the midst of so much pre-written code that can reduce a lot of work for you, writing all the code from scratch can look like a stupid question.

In short, the answer is totally dependent. There is no clear answer to this question. The answer totally depends on you and this is what I have tried to explain in the rest of this post. I have tried to keep it ASAP (As Short As Possible)

Let's Discuss more.

Advantages of Libraries & Frameworks

• Pre Written Code → Lot less work to do
• Consistency → Styles look the same across the website

The biggest and the most obvious advantage of the prewritten code is that it is "pre-written" so you have to do a lot less work in writing everything from scratch. Like if you are using React and you use Material UI then you get a ton of subtle animations already in the button styles, the Grid System which is one of the most useful things in MUI and for the most part you don't have to worry about your site being responsive.

Another awesome thing you can achieve is "consistency", i.e. your design looks the same on your whole website. This is because you are mostly referring to the same components.

Disadvantages of Libraries and Frameworks

• Pre-written Code → Can be hard to modify code
• Consistency → Code can be consistent across many 'other' websites
• External Libraries can sometimes be bulky

It is a fact that everything has advantages and disadvantages unless it's VSCode (No more bad jokes ahead!) so does this.

One thing to note here is that these are the disadvantages according to me, so it is subjective and may or may not apply to you, I have tried to give you a general idea from my experience.

The first negative point according to me is the "pre-written" code. This is a subjective point as it totally depends on the person doing the thing. For a beginner, it can be difficult for her to make a lot of customizations. I have personally felt this while working with MUI for the first time, it took me a good amount of time to figure out the customizations I wanted to make. But if you are a bit experienced then you can get along with this pretty easily.

The other disadvantage that I think, and is a norm among the people who use Bootstrap is that the sites made with Bootstrap look like "Bootstrapped Sites". What I think is, this is true for a beginner but an experienced person can easily get around this. So again it depends.

Another issue can be that the extra libraries can be "bulky", I guess this was the case with Bootstrap because Bootstrap 4 used jQuery which was quite heavy. I think jQuery is removed in the later version of Bootstrap. Feel free to correct me if I am wrong.

Addressing the Elephant in the Room

Personally, I have used both ways to create websites. I one project I used MUI and tried to customize it a lot (https://github.com/theshubhagrwl/MyMovieTime) while in the other I used only Custom CSS (https://theshubhagrwl.vercel.app/) and as a user, you won't be able to spot the difference but the main difference comes in the development time and the knowledge of CSS you have.

My advice is, if you are a web developer then you shouldn't be afraid of CSS, actually, I used to hate CSS at one time, but then I met JavaScript (I promise this was the last one). Writing your own CSS can drastically improve your CSS knowledge.

The other and sometimes more important thing is the amount of time you want to spend on a project. If you want to get some project done quickly and not caring a lot about the design then it is better to use some framework or library because it will have a ton of stuff done for you.

So I hope this post proved helpful for you. Give it a like if it helped you and share it with others.

Connect with me on Twitter: https://twitter.com/theshubhagrwl

You can see my work on my website: https://theshubhagrwl.vercel.app/

Thanks for spending your valuable time on this post.🙏

The reason behind this post

About 6 months ago during my college life, I was watching a lot of productivity videos on YouTube and tried to follow the advice in them. Time tracking is one of the most common advice which many YouTubers give. The main reason for this is by doing so we get to know where our time is going and we kind of learn to estimate time more precisely. Humans are very bad at estimating and this is the reason this is a famous approach.

I used Toggl which is an awesome app to start time tracking. There are also several other but this not a place to discuss which one to choose.

I tracked my time for around 6 months. Daily. It was the most consistent thing that I did. LOL

Benefits

Whenever you start a new thing you are generally more excited about it but slowly the fun goes away. This is a normal thing.

For analogy you can consider it like a Soda Bottle, it has tremendous energy but once you shake and open it after a few seconds it becomes like normal water. This is the same thing that happens with humans.

When I started tracking the time I was excited and tried to track almost every single task. This was way too much as I am a Human, not a Robot 🤖 , and in the world where the average attention span is 15seconds, it is harder to focus on one thing.

To counter this problem I made a threshold. I started tracking all those tasks that took more than or equal to 30mins. This was helpful and due to this, I was also not in the hurry to make an entry in the app. That was too much.

So I continued this and after I week when I was gazing at my weekly summary I was able to see the tasks which I did the most or in other words where my time went. One more thing that was the time when there was a lockdown due to a pandemic and I had too much time, so it was kind of necessary to keep a track where I am spending my time.

This went well for 3 months, I was motivated to spend more time on a single task so that I can put it on the app and it was working. A kind of habit developed in me.

Problems you might face

Now if you follow the last paragraph and want to start tracking your time then it is good, go on, give it a try. Don’t read further, Experiment it.

If you are reading this then here I would like to tell you some problems that I faced.

When maintaining a time log becomes your habit and if somehow you are unable to get the hours that you spend the last day or week then there comes an element of frustration. It may sound a little silly but it will happen when you do this consistently for around 3 months. And if this frustration repeats then our mind comes up with the brilliant strategy of cheating. This happened to me, I increased 5–10mintues on tasks just to meet that goal. This can make you less predictive about how much time you need.

Another big disadvantage, what happened to me was that I was racing against the clock and not the work. If I had some side task which I wasn’t tracking but it was necessary then I was delaying it and I know it’s a little hard to explain but it was not doing too good for me.

So I decided to give it a break.

So What Happened after that?

After facing some issues I decided to not track time for a week. This was very helpful for me. After 6 months of consistently marinating a log now, I was free. I did whatever, whenever and for how long I want to do and it was a good feeling. I had one less thing to worry about. I also analyzed that I was even more productive than before.

TL;DR

The best advice that I can give is Start Tracking your time. Do it till you don’t face the above-mentioned problems.

Time tracking taught me to give time to a task and not to rush through many things at a time. This was going great but when I found I was cheating with myself I had to do some change. So I quit time tracking and it helped me. Probably after some time, I will start it again.

Thanks for giving your valuable time to this post!

Give it a Like if you liked it.

A little about me

I am a Full Stack Developer and a Technology lover. Other than technology I love reading and gaming.

Checkout my portfolio: https://theshubhagrwl.netlify.app/ and let’s connect on social platforms.😉

Hi, in this post we will learn to make a Custom User Model in Django 3 and we will also change the default login functionality of the Django Admin. We will use Email and Password to log in.

Motivation

I had to make a Custom User for my app, I was able to make the model but the problem was createsuperuser command was not working. To debug it I had to do a lot of research and the problem was most of the resources at that time were outdated, so I decided to write this post.

I have made a GitHub repo, so if you want you can directly use that (instructions are there)

Let's Get Started

First of all, make a Django Project and create an app called users

Now we can start editing the models.py file inside our users app

Before editing let's do some theory.
What are managers in Django?

A Manager is an interface through which database query operations are provided to Django models. At least one Manager exists for every model in a Django application.- Django Docs

Simply speaking Managers provide us a way to manage our model. We can implement this by making our model a subclass of the Manager Class. The manager class is the place where commands like createsuperuser can be edited. Now open up the models.py and put the following code in it

The most important thing to note here is the is_staff and is_superuser attributes. Making a typo in this can cause a hard time debugging.

What have we done here?

We have made a manger for our user model. Inside of this, we have made 2 functions called create_user and create_superuser. create_user, as the name suggests, creates a new user, and create_superuser is used to create a superuser by setting is_staff and is_superuser to true.
After the manager, we have our usual model.
We have set username to None because we do not want to include a username.
USERNAME_FIELD in it indicated which we declare 'email'. This should be unique.
session_token is an optional field. I have it there because I was making my custom token.
The last line of the models.py indicates that the CustomUser is an object of UserManager.

Important Thing

After you have made the model, Open settings.py file and add a line in it

AUTH_USER_MODEL = 'users.CustomUser'

Django allows you to override the default user model by providing a value for the AUTH_USER_MODEL setting that references a custom model. This dotted pair describes the name of the Django app (which must be in your INSTALLED_APPS), and the name of the Django model that you wish to use as your user model. -Django Docs

Last Steps

Now you can run the migrations commands and create superuser also.

py manage.py makemigrations
py manage.py migrate
py manage.py createsuperuser

It will ask for your email and password. Give it the details.

Don't Forget to register the app in admin

admin.site.register(CustomUser)

Now you can run the server and login with your email and password in the admin panel
Enjoy 😎
If you have any suggestions then please let me know
Check out my portfolio: https://theshubhagrwl.netlify.app/

Connect with me on Social Platforms:

LinkedIn: https://www.linkedin.com/in/theshubhagrwl/

Twitter: https://twitter.com/theshubhagrwl/

GitHub: https://github.com/theshubhagrwl

Instagram: https://www.instagram.com/theshubhagrwl/

This post was originally written on Medium