DEV Community: Mohit Maroliya

my-notebook using MongoDB

Mohit Maroliya — Wed, 12 Jan 2022 15:23:14 +0000

Overview of My Submission

Today, writing notes is very important in order to stay organised. Especially in Corperate sector, When you write all your tasks in form of notes, they seem more manageable. When you've got a clear outline of the tasks you've got to do and those you've completed, it helps you stay focused. Also it works as a reminder for you.

my-notebook is a web application that is used to keep your notes securly. Each user can create, edit and delete its own notes. It also authenticates the user before performing any CRUD operations.

Submission Category: Prime Time

Link to Code

mohitm15 / my-notebook

my-notebook is a web application that is used to keep your notes securely.

my-notebook

Handy tool to make your notes
Explore the docs »

View Demo

About The Project

my-notebook is a web application that is used to keep your notes securly. Each user can create, edit and delete its own notes. It also authenticates the user before performing any CRUD operation.

Built With

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

Package.json file mentioned the requirements you need to use the software and how to install them.

npm
```
npm install npm@latest -g
```
Any code editor of your choice (VScode preferable )

Installation

Clone the repo

git clone https://github.com/mohitm15/my-notebook.git

Install NPM packages and requirements
```
npm install
```

Running the code

To run the frontend server , go to terminal and run
```
    cd frontend
```
and then

…

View on GitHub

Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

Technologies Used :

FrontEnd : ReactJS & Framer Motion
Backend : ExpressJS & NodeJS
DataBase : MongoDB

ScreenShots

[Note:] # Screenshots/demo videos are encouraged!

SignUp Page

Login Page

Home Page

Theme : Dark

Theme : High Contrast

Theme : Dark Teal

Theme : Rainbow

Demo video

video

PS: Project is built and hosted with MongoDB ecosystem and ❤️

Creating Super Radio Buttons

Mohit Maroliya — Fri, 31 Dec 2021 14:31:36 +0000

In the last post , I had shared to create SuperLike, SuperShare and SuperSubscribe buttons.

In this post, I will show how to create a cool html-css radio button that represents the feeling of animated radio-button.

For this we require a html file index.htmland a css file style.cssonly.

The end result for Radio-button is like this:

Setting up the input structure

Lets get started by setting up the basic structure in index.html file. We had used <input/> of type radio here which we wrap in main_wrapper class.

So for our index.html file, all we need is the following code:

<body>
    <div class="main_wrapper">
      <div class="buttons_wrapper">

        <input type="radio" id="radio1" name="inputs" />
        <label class="entry" for="radio1">
          <div class="circle"></div>
          <div class="entry-label">Yes</div>
        </label>

        <input type="radio" id="radio2" name="inputs" />
        <label class="entry" for="radio2">
          <div class="circle"></div>
          <div class="entry-label">No</div>
        </label>

        <input type="radio" id="radio3" name="inputs" />
        <label class="entry" for="radio3">
          <div class="circle"></div>
          <div class="entry-label">May Be</div>
        </label>

        <div class="highlight"></div>
      </div>
    </div>
  </body>

Since, we have defined the ids and classes for the html components, so now its time to add some styling and animations to them. 😄

Adding the Styles

We first add styling to main_wrapper and buttons_wrapper classes, label of radioButton and the circle in front of each option.


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Outfit", sans-serif;
  font-size: 28px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f7f7f7;
  color: #cacaca;
}

.main_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 260px;
  padding: 50px;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.82);
  border-radius: 20px;
  position: relative;
}

.buttons_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  width: 160px;
  overflow: hidden;
  position: relative;
}

.entry {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin: 10px;
  width: 100%;
  position: relative;
  transition: 0.5s;
}

.circle {
  height: 32px;
  width: 32px;
  top: 50%;
  border: 3px solid #cacaca;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.5s;
}

.entry-label {
  font-weight: 700;
  padding-left: 15px;
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
}

Note: I have used the Outfit Google Font. You can import the font by writing the following code on top of the CSS file.
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200&display=swap");

Now I will add some styling to the highlight class that will appear when an input is selected.

.highlight {
  height: 18px;
  width: 18px;
  top: 19px;
  left: 7px;
  position: absolute;
  border-radius: 59%;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateY(-55px);
}

And finally add the styling and animation to the input options

input {
  display: none;
}

input:nth-child(1):checked ~ .highlight {
  transform: translateY(0);
  background: green;
}

input:nth-child(3):checked ~ .highlight {
  transform: translateY(55px);
  background:red;
}

input:nth-child(5):checked ~ .highlight {
  transform: translateY(110px);
  background: blue;
}
input:nth-child(1):checked + .entry .circle {
  border-color: #056b16;
  color: #056b16;
}
input:nth-child(3):checked + .entry .circle {
  border-color: rgb(160, 2, 2);
  color: rgb(160, 2, 2);
}
input:nth-child(5):checked + .entry .circle {
  border-color: rgb(0, 0, 185);
  color: rgb(0, 0, 185);
}
input:nth-child(1):checked + .entry {
  color: #056b16;
}
input:nth-child(3):checked + .entry {
  color: rgb(160, 2, 2);
}
input:nth-child(5):checked + .entry {
  color: rgb(0, 0, 185);
}

Conclusion

Cheers! 🍻, you have build the SuperRadio button.

Now you can come up with as many stylings and make this small application more fantastic.

Thank you for your time. Please share your valuable feedbacks in comments also.

☘️ Happy Coding & Happy New Year 2k22 ☘️

Creating Super Buttons for Like, Share and Subscribe

Mohit Maroliya — Tue, 07 Dec 2021 12:46:59 +0000

Whenever you watches any YouTube video, I'm sure you have come across the terms Like, Share and Subscribe.

I wanted to create a cool html-css button that represents the feeling of Like-Share-Subscribe.

For this we require a html file index.html, css file style.css and javaScript file index.js.

The end result for Like button is like this:

Setting up the input structure

Lets get started by setting up the basic structure. We had used <input/> of type checkbox here which is also known as toggle.

So for our index.html file, all we need is the following code:

  <body>
    <label id="Likebtn" for="myBtn" class="star-button" onclick="fillheart()">
      <input type="checkbox" id="myBtn" />
      <div class="heart">
        <i id="un-filled-heart" class="far fa-heart"></i>
      </div>
      <div class="btn-text">
        <span>Like</span>
        <span>Liked</span>
      </div>
      <div class="active-heart">
        <i class="fas fa-heart"></i>
      </div>
    </label>
    <br />
    <script src="src/index.js" type="text/javascript"></script>
  </body>

Note: just define the fillheart() function with a console.log statement as of now in index.js or under script tag.

Since, we have defined the ids and classes for the html components, so now its time to add some styling and animations to them. 😄

Adding the Styles

We first add styling to input checkbox, label (star-button) and the icon.

Note: I have used the cdn link of FontAwesome to use the icons. Check here for the cdn link.

body {
  height: 50vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgb(218, 216, 216);
}

input {
  display: none;
}

.star-button {
  position: relative;
  width: 250px;
  height: 85px;
  margin-top: 70px;
  border-radius: 15px;
  cursor: pointer;
  background: rgb(255, 255, 255);
  z-index: 2;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.096);
}

.heart {
  position: absolute;
  left: 15%;
  top: 55%;
  font-size: 45px;
  transform: translateY(-50%);
  color: rgb(196, 196, 196);
  z-index: 1;
}

Now we add some styling to the text over the button and on the span component of it.

.btn-text {
  position: absolute;
  left: 50%;
  width: 130px;
  height: 100%;
  background: rgb(228, 51, 66);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  overflow-x: hidden;
}

.btn-text span{
  color: rgb(255, 255, 255);
  transform: translateX(55%);
  font-size: 35px;
  padding: 20px;
  font-family: "sans-serif";
  transition: 0.2s;
  user-select: none;
}

.active-heart {
  position: absolute;
  right: 15%;
  top: 20%;
  font-size: 50px;
  z-index: -1;
  color: rgb(219, 219, 219);
}

Now we add the styling to all the corresponding components when the input checkbox is checked.

input:checked + .heart {
  animation: move 0.7s ease-in forwards;
  color: rgb(228, 51, 66);
}

input:checked ~ .active-heart {
  color: rgb(228, 51, 66);
  transition-delay: 0.7s;
  animation: shake 0.8s 0.2s forwards;
  animation-delay: 0.7s;
}

input:checked ~ .btn-text span {
  transform: translateX(-45%);
  transition-delay: 0.7s;
}

input:checked ~ .btn-text {
  left: 0;
}

In the above code, you observed that we have used two types of animation named move and shake for the icon heart. So now we define the above-mentioned animation using keyframes.

move animation

@keyframes move {
  10% {
    transform: translateX(-330%) scale(1.2);
    left: 20%;
    opacity: 1;
  }
  30% {
    transform: translateY(150%);
  }
  50% {
    transform: translateX(300%);
    opacity: 1;
  }
  75% {
    transform: translateY(200%);
    left: 65%;
    opacity: 1;
  }
  85% {
    left: 70%;
  }
  100% {
    transform: translateY(-600%);
    left: 70%;
    opacity: 0;
  }
}

shake animation

@keyframes shake {
  0% {
    transform: scale3d(1, 1, 1);
    text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
    text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
    text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
    text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
    text-shadow: 0 0 2px #ff0000, 0 0 5px #0000ffb7;
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
    text-shadow: 0 0 1px #ff0000, 0 0 5px #0000ff83;
  }
  100% {
    transform: scale3d(1, 1, 1);
    text-shadow: 0 0 1px rgb(153, 151, 151), 0 0 5px rgb(174, 174, 179);
  }
}

Now we only left to add javascript.

Adding JavaScript Logic

Either create a seperate index.js file or write within <script> in index.html .

Add the following code.

    let myBtn = document.getElementById("myBtn");

    function fillheart() {
      if (myBtn.checked === 1) {
        document
          .getElementById("un-filled-heart")
          .setAttribute("class", "fas fa-heart");
      } else {
        document
          .getElementById("un-filled-heart")
          .setAttribute("class", "far fa-heart");
      }
    }

Conclusion

Cheers! 🍻, you have build the SuperLike button.

Now you can come up with as many stylings to this small application. You can take up some challenges by making SuperShare and SuperSubcribe button as given below.

SuperShare

SuperSubscribe

Thank you for your time. Since this is my second post, please share your valuable feedback in comments also.

Happy Coding ! ☘️

Starting with React-Redux

Mohit Maroliya — Sun, 21 Nov 2021 14:45:55 +0000

Hello everyone, this is my first post on Dev.to. In this post, I am trying to explain the use of Redux in ReactJS with an example. Here, I have taken some references from YouTube and Google for information. I will first explain to you the need for Redux and explain it with the code. For reference, you can check out Github to view the code anytime.

View Live Demo

View on Github

Why do we need Redux ?

When a JavaScript Application grows big, it becomes difficult to manage its state. For example, in the given architecture, if I want to use the state defined in Child_C of the Contact.js in the Child_B of the Home.js, then I had to do prop-drilling, where I have to pass the state as props over various components.

But Redux solves this problem by managing the application's state with the help of a single global object called Store. This provides consistency to the application and makes testing easy.

Redux -Architecture

The Architecture consists of 4 components mainly - Action, Reducer, Store and View. And believe me, they work in the same way as their name suggests.

Action is a plain object that describes the intention to cause change, like adding or deleting a task in a To-do-List app.
Reducer is a function that determines changes to an application state. Like in the To-do-List app, action will trigger a change in the value of state task_Array that the reducer will determine. It returns the new state and tells the store how to do it. Simply, it uses the action it receives to determine the change.
Store projects all the state variables to the view, which is the UI of the application.

Now, let's make our hands dirty and start coding with an example to understand Redux more deeply. I will tell you the concept and later, you can start with your stuff to do with it. Also, I have added some tasks for deep understanding in the end.

Example - Redux Boilerplate.

Here we try to create a webApp where we define the states in different components and perform onclick events from different components. The states we define are the countValue and darkMode enabling.

If you directly want to see the whole code, you can view it on Github. 🤠

View on Github

1. Setting Up React App

Create a folder in your desktop named redux-boilerplate and open it in the VSCode. Now, open the terminal and create the react app.

npx create-react-app redux-boilerplate

Note: You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine.

Now add the Bootstrap by using the CDN link of CSS (here) and script link (here) .

If you are new , just simply copy the <link> and <script> from both the links and paste it to the public>>index.html file at appropriate place.

ProTip:To check bootstrap added successfully, just simply paste the code to App.js file and see red colored font.
import './App.css';
function App() {
  return (
    <>
      <h1 className="text-danger"> Hello World!</h1>
    </>
  );
}
export default App;

2. Creating NavBar and Shop Component

Create a folder components in src folder. Now create a file Navbar.js & another file Shop.js both in components folder.

NavBar.js

import React from "react";

const Navbar = () => {

  return (
    <div>
      <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
        <div className="container-fluid">
          <a className="navbar-brand" href="/">
            Redux BoilerPlate
          </a>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <a className="nav-link active" aria-current="page" href="/">
                  Home
                </a>
              </li>
              <li className="nav-item">
                <a className="nav-link" href="/about">
                  About
                </a>
              </li>
            </ul>
          </div>
          <div>

                <div className="form-check form-switch mx-4">
                  <input className="form-check-input" type="checkbox" id="flexSwitchCheckDefault" />
                  <label className="form-check-label text-light" htmlFor="flexSwitchCheckDefault">Darkmode</label>
                </div>
            </div>
          <div>
            <button className="btn btn-info mx-1">CountValue : 0 </button>
          </div>
        </div>
      </nav>
    </div>
  );
};

export default Navbar;

Shop.js

import React from 'react';

const Shop = () => {

    return (
        <>
        <div className="container p-3"> 
        <div className={`alert alert-success` } role="alert">
            <h2>Redux BoilerPlate</h2>
        </div>
            <h3 className="my-5">Simple Starter template for redux-store</h3>

            <div className="container my-5">
                <h1 className="display-1">This is LightMode</h1>
            </div>

            <div className="container d-flex">
                <button className="btn-lg btn-success mx-4" > + </button>
                    <h1 className="display-6">You Count Value = 0 </h1>
                <button className="btn-lg btn-danger mx-4" > - </button>
            </div>
        </div>
        </>
    )
}

export default Shop;

Paste the above code in Navbar.js & Shop.js respectively .Add the components in App.js using

import Navbar from './components/Navbar';
import Shop from './components/Shop';
.
.
.
  return (
    <>
      <Navbar />
       <div className="container p-3">
        <Shop />
      </div>
    </>
  );
}

This will show the navbar at top and Shop component on screen.

3. Installing Redux

To install the redux , just open a new tab in terminal and run
npm i redux
npm i react-redux
npm i redux-thunk

Get more info here .

4. Creating Action-Creator and Reducers

Now we'll create action-creators and reducers function which will change the countValue and enable darkMode.

As discussed, action-creators create the action to change the state variable and reducer is a pure function that takes action & the previous state of the application and returns the new state.

Action consists of type and payload to be supplied to Reducer function. The type defines the action-type and the payload defines the value to be substituted with the previous one.

To do this, we will create a folder name state inside the src folder. Inside the src folder, we create two more folders :

action-creators
reducer

Now we create index.js file in action-creators folder and write code for action-creator. We will create action here.

export const increaseCount = (countValue) => {
    return (dispatch) => {
        dispatch ({
            type: 'increase',
            payload: countValue
        })
    }
}

Here, increaseCount is a function that returns a function named dispatch which dispatches type & payload.

Try to write action-creators for decreaseCount, enableDarkMode and enableLightMode in the same file.

You can compare your code with the full code of state/action-creators/index.js from here.

Now we make Reducers. Reducers need not to be a single one, for the different states, we have different reducers. Like here, we'll create two reducers file named countReducer.js and darkmodeReducer.js inside reducer folder, which will look after the countValue and darkMode state variables.

Let's create countReducer.js to change the count value.

const reducer = (state=0, action) => {
    if(action.type === 'increase') {
        return state +  action.payload;
    }
    else if(action.type === 'decrease') {
        return state - action.payload
    }
    else {
        return state;
    }

}

export default reducer;

As you can see above, it takes the state variable and action from the action creator as a parameter and returns the modified state with the help of the action payload.

Try to create darkModeReducer.js by own first and compare your results from below.

const reducer = (state= 'OFF', action) => {
    if(action.type === 'darkmode') {
        state = action.payload;
    }
    else if(action.type === 'lightmode') {
        state = action.payload;
    }
    return state;
}

export default reducer;

Bonus

Since for large complex applications, we know that we require many reducers and handling them individually is a messy task. So redux provides us combineReducers, which combines all the reducer functions and export them as a single reducer function.

For this, create a file index.js in reducer folder and paste the below code.

import { combineReducers } from "redux";
import countValueReducer from './countReducer';
import darkmodeReducer from './darkmodeReducer';

//combinnig all the reducers here
const reducer = combineReducers({
    countValue: countValueReducer,
    darkmode: darkmodeReducer
})

export default reducer;

5. Creating Store

To recall, a store is a global place where all the things defined is exposed to all the application. Simply, every part of the application gets access to the store.

Here, we will create a file store.js inside the state directory. Use to code below for store.js.

import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk";
import reducer from "./reducer";

export const store = createStore(reducer,{}, applyMiddleware(thunk));

You have seen many new things here, let's understand them one by one.

createStore : It takes the reducers, preloaded state and enhancer function(optional) to create the store. It returns an object that holds the complete state of your app.
applyMiddleware : Returns a store enhancer that applies the given middleware.
redux-thunk: Helps to execute asynchronous functions.

Hurray! store is created. ✨

Now I want to give access of store to the overall application. So we go to the file src/index.js (main index.js file) and import the store here. The file will look like

import React from 'react';
.
.
.
import { Provider } from 'react-redux';
import { store } from './state/store';

ReactDOM.render(
 .
 .
    <Provider store={store}>
    <App />
    </Provider>
 .
 .
);

See complete file here.

Also we create a file index.js inside state directory.

This will increase the accessbility of action-creators as we export all the action-creators from here to all the components like Navbar.js.

export * as actionCreators from './action-creators/index';

6. Second Last Step

As far as now, we have not added any function to the +/ - button and darkmode toggle, but now we got access to the state variables through store, we can use them to display their values on the UI.

To access the state, we use useSelector hook. In the navbar.js file we import the hook first using

import { useSelector } from "react-redux";

and then use it as

.
.
 const countValue = useSelector((state) => state.countValue);
 const darkmode = useSelector((state) => state.darkmode);
.
.

And change the value of countValue from 0 to {countValue}, like this

<button className="btn btn-info mx-1">CountValue : {countValue}</button>

So far we have use the countValue state, we also need to use darkMode state in App.js and Shop.js.

App.js

import { useSelector } from "react-redux";
import './App.css';
import Navbar from './components/Navbar';
import Shop from './components/Shop';

function App() {

const darkmode = useSelector(state => state.darkmode);

let darkmodeStyle = {
        backgroundColor:'#2d2d2d',
        color:'whitesmoke'
    }

  return (
    <>
      <Navbar />
      <div className="container p-3" style={darkmodeStyle}>
        <Shop />
      </div>
    </>
  );
}

export default App;

In shop.js, just simply import the useSelector hook like in Navbar.js using

import { useSelector } from "react-redux";

and then use it as inside Shop component.

.
.
 const darkmode = useSelector((state) => state.darkmode);
.
.

7. Last Step

Now we have access to the variables that we use to bring the changes on view.

Here, state values will be first changed by the user from the front-end. Then, we need to generate those actions, which triggers reducer functions and finally alter the values of the state on view.

To do this we use useDispatch hook, which dispatches the action-creators and bindActionCreators to bind all action creators.

Time to use them!

In Navbar.js and Shop.js, import them as

import { useSelector, useDispatch } from "react-redux";
import { bindActionCreators } from 'redux';
import { actionCreators } from '../state/index';

And in Navbar.js, we use enableDarkMode action-creator to dispatch.

const dispatch = useDispatch();//to dispacth the action creator functions
  const {enableDarkMode} = bindActionCreators(actionCreators, dispatch);

We will add this darkMode functionality to toggle button present in navbar like this

<input className="form-check-input" onClick={()=>{darkmode === 'OFF'?enableDarkMode('ON'):enableDarkMode('OFF')}} type="checkbox" id="flexSwitchCheckDefault" />

And add the styling in the App.js as

.
.

const darkmode = useSelector(state => state.darkmode);
let darkmodeStyle = {}

if(darkmode === 'ON') {
    darkmodeStyle = {
        backgroundColor:'#2d2d2d',
        color:'whitesmoke'
    }
}

  return (
    <>
.
.

Also change a div component in Shop.js to switch the title on the main page from LightMode to DarkMode.

Shop.js

<div className="container my-5">
                <h1 className="display-1">This is {darkmode === "ON" ? "DarkMode" : "LightMode"}</h1>
            </div>

Now you will be able to change background color.

To use countValue action-creator to dispatch, we need to code in Shop.js.

const dispatch = useDispatch();
const balance = useSelector(state => state.countValue);
const {increaseCount, decreaseCount} = bindActionCreators(actionCreators,dispatch);

We will add this increaseCount/decreaseCount functionality to + and - buttons present in screen like this.

<div className="container d-flex">
                <button className="btn-lg btn-success mx-4" onClick={()=>(increaseCount(1))}> + </button>
                    <h1 className="display-6">You Count Value = {balance} </h1>
                <button className="btn-lg btn-danger mx-4" onClick={()=>(decreaseCount(1))}> - </button>
            </div>

Now you will be able to change the countValue.

For reference,
Complete Navbar.js file is here.
Complete Shop.js file is here.
Complete App.js file is here.

Conclusion

Cheers! 🍻, you have build the basic template for redux. Now you can come up with as many functionalities and components to the application. You can take up some challenges by trying tasks like adding a login page, displaying the profile page, or categorizing the type of users.

Try to come up with your own ideas and send the PRs over here.

Thank you for your time. Since this is my first post, please share your valuable feedback in comments also.

Happy Coding ! ☘️

DEV Community: Mohit Maroliya

my-notebook using MongoDB

Overview of My Submission

Submission Category: Prime Time

Link to Code

mohitm15 / my-notebook

my-notebook is a web application that is used to keep your notes securely.

my-notebook

Table of Contents

About The Project

Built With

Getting Started

Prerequisites

Installation

Running the code

Additional Resources / Info

Technologies Used :

ScreenShots

SignUp Page

Login Page

Home Page

Demo video

Creating Super Radio Buttons

Setting up the input structure

Adding the Styles

Conclusion

Creating Super Buttons for Like, Share and Subscribe

Setting up the input structure

Adding the Styles

move animation

shake animation

Adding JavaScript Logic

Conclusion

SuperShare

SuperSubscribe

Starting with React-Redux

Why do we need Redux ?

Redux -Architecture

Example - Redux Boilerplate.

1. Setting Up React App

2. Creating NavBar and Shop Component

NavBar.js

Shop.js

3. Installing Redux

4. Creating Action-Creator and Reducers

Bonus

5. Creating Store

6. Second Last Step

App.js

7. Last Step

Shop.js

Conclusion