Image for post
Image for post
drf oauth2

As a beginner , logging/ registering a user with basic email password and google as well as facebook using token based authentication can be a amazing stuff to learn. This step by step guide will help any beginner in django to learn a lot of stuff including custom user in django and also a bonus axios interceptors.

Let me explain what we want and how will authentication happen:

What we want:

  1. We will register a user we need to pass username , email , first_name , password (because of our model) .
  2. We will log in that user and that will authenticate user
  3. We will make authenticated requests to api

How will authentication happen:

Before that let me…


EditorJS might give writers in your blog the same feel writers in medium get,more or less. Want to integrate Django and editorJS together for a blog or something similar? This article might help you.

Image for post
Image for post
DJango With EditorJS

Assumption :

You already have a Ajango project and a app where you are going to use editorjs

Step 1 : Installing django editorjs

pip install django-editorjs

Now add django_editorjs to INSTALLED_APPS in settings.py (Note the underscore here)

Step 2 : Creating the model

Now before we create the model , let me inform you that to upload images you need to setup your own file uploading solution (I have covered that too !)

So here I will…


In our mobile phone , we often see any app when we tap on it, it expands to full screen and when you close it , it shrinks back to its initial position and initial size.

So if you want to recreate those animated transition inside your react website then read this article:

Expand Shrink Cards with react and framer motion
Expand Shrink Cards with react and framer motion

Step 1: Install framer-motion

npm install framer-motion

Step 2 : Creating the Card Component

But first , we import the AnimatedSharedLayout and motion from ‘ framer-motion’

import {AnimateSharedLayout, motion} from 'framer-motion'

Then we write the code for Card Component

function Card({value}) {const [open,setOpen]=useState(false)return <AnimateSharedLayout>{open?{/* DISPLAY EXPANDED CARD */}:{/* DISPLAY NORMAL CARD */}


If you want to show different content or different layout for mobile devices , tablet devices ,laptop and desktop in your React website then please read this article:

Here we create a Breakpoint Observer which observes the media breakpoints we pass in and returns which breakpoint is currently active , it will actually set the breakpoint to the state .

Step 1 : Creating a Breakpoints Object

This breakPoints object will have all the media queries we want to match..

Image for post
Image for post
My breakpoints object

Please Note:

  • You can have as many media queries as you want
  • If you have more than two media queries then except the first and last query…


Want to have Add Friend , Send Friend Request , Accept Friend Requests features in your Django website ? Then please read this article :

Image for post
Image for post
Add Friends in Django Very Easy

Step 1 : Having some sort of profile model or custom user

Why do we need a custom user model or a profile model? This profile model or custom user model will have a friends field where we will store all friends for a particular user

I am using custom user model and it has a ManyToManyField friends which refers back to this user model.


Image for post
Image for post
react firestore firebase

BASICALLY IF YOU WANT TO LOGIN USING GOOGLE IN YOUR REACT-FIREBASE APP AND MAP THE USER TO A COLLECTION , THEN THIS ARTICLE MIGHT HELP YOU!!

I HAVE DIVIDED THEM TO STEPS :-

STEP 1:

CREATE A GOOGLE PROJECT IN CONSOLE DEVELOPERS.COM AND OAUTH CLIENT TO IT (I ASSUME YOU KNOW IT ALREADY)

STEP 2:

GO TO OFFICIAL DOCS OF FIREBASE OR GO TO THIS LINK..

STEP 3 :

CREATE A REACT LOGIN COMPONENT …

import React from "react";
import * as firebase from "firebase/app";
class Login extends React.Component {
state = {
isSignedIn: false // Local signed-in state.};
render()…

Image for post
Image for post
CLOUD FIRESTORE

REFERENCE DATA TYPE IS ONE OF THE MANY DATA TYPES OF CLOUD FIRESTORE . THIS DATA TYPE ACTS LIKE FOREIGNKEY EVEN THOUGH IT IS NOT ACTUALLY A FOREIGNKEY .

THE MAIN ADVANTAGE OF USING IT IS TO REFER A CERTAIN DOCUMENT TO ANOTHER DOCUMENT .

FOR EXAMPLE:

IF WE HAVE A DOCUMENT ‘FIRST FLOOR’ IN COLLECTION OF FLOORS , THEN ALL ROOM DOCUMENTS WHOSE FLOOR IS FIRST FLOOR SHOULD USE REFERENCE DATA TYPE TO DIRECTLY CONNECT TO THE FIRST FLOOR DOCUMENT.


REDUX EXPLAINED

Image for post
Image for post
Photo by Joshua Aragon on Unsplash

WHAT IS REDUX AND WHY IS REDUX USED

‘Redux is a predictable state container for JavaScript apps’ WRITTEN ON OFFICIAL DOCS

SO THAT BASICALLY MEANS REDUX IS A CONTAINER WHERE A STATE IS KEPT WHICH CAN BE ACCESSED BY ANY COMPONENT AND USED BY THEM.

FOR EXAMPLE IF WE HAVE HEADER FOOTER AND CONTENT AS 3 DIFFERENT COMPONENTS AND ONE OF THE DATA IN THE STATE OF CONTENT IS NEEDED TO B SHOWN ON HEADER THEN HOW TO PASS THE VALUE??

THIS CAN B A BIT MESSY IF WE HAVE MANY COMPONENTS ,ROUTES AND BASICALLY A BIGGER APP

Abhik

Interested in frontend developement & UI design

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store