DEV Community: Deepak Singh Kushwah

React Protected Routes - Role based

Deepak Singh Kushwah — Thu, 07 Dec 2023 15:41:56 +0000

Introduction

Hi developers, in this tutorial, we will go through how to created protected routes in ReactJs. For this, I have create Node+Express+MongoDB server for user login/registration. You can use any other backend stack like PHP/Python or any other. For frontend state management I have used Zustand, you can choose any other library you prefer.

Requirements

You should have basic understanding of ReactJS.

Project Setup

npm create vite@latest
after above command, you will see wizard, choose react and javascript

For CSS and styling, I have used tailwindcss. I assume you know how to include tailwindcss in react projects. If not, please follow instruction on tailwindcss site.

Dependencies

npm i react-router-dom axios prop-types zustand

Code and Explanation

App.jsx

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Error from "./pages/Error";
import Layout1 from "./components/Layouts/Layout1";
import ProtectedRoute from "./components/Auth/ProtectedRoute";
import Dashboard from "./pages/member-pages/Dashboard";
import Login from "./pages/Login";
import Unauthorized from "./pages/Unauthorized";
function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout1 />}>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/login" element={<Login />} />
            <Route path="/unauthorized" element={<Unauthorized />} />
            <Route path="*" element={<Error />} />
            <Route element={<ProtectedRoute allowedRoles={['registered']}/>}>
              <Route path="/dashboard" element={<Dashboard/>}/>
            </Route>
          </Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

Auth/ProtectedRoute.jsx

import { Navigate, Outlet, useLocation } from "react-router-dom";
import { useUserStore } from "../../store/useStore";
import PropTypes from "prop-types";
const ProtectedRoute = (props) => {
  const user = useUserStore((state) => state.user);
  const location = useLocation();
  return props.allowedRoles.includes(user?.role)
  ? <Outlet /> 
  : user ? <Navigate to="/unauthorized" state={{from: location}} replace /> 
  : <Navigate to="/login" state={{ from: location }} replace />

};

ProtectedRoute.propTypes = {
  allowedRoles: PropTypes.array,
};

export default ProtectedRoute;

Layouts/Layout1.jsx

import { Outlet } from "react-router-dom";
import Footer from "../page-parts/Footer";
import Header from "../page-parts/Header";

const Layout1 = () => {
  return (
    <>
      <div className="m-auto max-w-5xl border border-black bg-blue-950 text-white my-10 rounded-xl">
        <Header />
        <div className="p-10">
          <Outlet />
        </div>
        <Footer />
      </div>
    </>
  );
};

export default Layout1;

page-parts/Header.jsx

import { Link } from "react-router-dom";
import { useUserStore } from "../../store/useStore";

const Header = () => {
  const user = useUserStore((state) => state.user);
  const signOut = useUserStore((state) => state.signOut);
  return (
    <div className="bg-gray-300 text-black rounded-t-xl">
      <nav className="flex justify-between">
        <img src="https://picsum.photos/100/50.jpg" />
        <ul className="flex gap-5 p-3">
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
          <li>
            <Link to="/services">Services</Link>
          </li>

          {user ? (
            <>
              <li>
                <Link to="/dashboard">Dashboard</Link>
              </li>
              <li>
                <button onClick={() => signOut()}>Logout</button>
              </li>
            </>
          ) : (
            <li>
              <Link to="/login">Login</Link>
            </li>
          )}
        </ul>
      </nav>
    </div>
  );
};

export default Header;

page-parts/Footer.jsx

const Footer = () => {
  return (
    <div className="text-white w-full ">
      <div className="flex items-center justify-center">Copyright &copy; 2023</div>
    </div>
  );
};

export default Footer;

pages/Home.jsx

const Home = () => {
  return (
    <div className="text-justify">
      <h1 className="text-4xl">Welcome to Home Page</h1>      
    </div>
  )
}

export default Home

pages/About.jsx

const About = () => {
  return (
    <div>About</div>
  )
}

export default About

pages/Error.jsx

const Error = () => {
  return (
    <div>404 - not found</div>
  )
}

export default Error

pages/Login.jsx

import { useState } from "react";
import { useUserStore } from "../store/useStore";
import { useNavigate } from "react-router-dom";

const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const signin = useUserStore((state) => state.signIn);
  const navigate = useNavigate();
  const handleLogin = async() => {
    const status = await signin(email, password);
    if (status) {
      navigate("/dashboard");
    }
  };
  return (
    <>
      <h3 className="text-2xl text-center">Login</h3>
      <hr className="headingHr" />
      <div className="m-auto w-[400px] rounded p-3 flex flex-row justify-center bg-slate-400">
        <table className="">
          <tbody>
            <tr>
              <td>
                <label htmlFor="email">Email</label>
              </td>
              <td>
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  name=""
                  id="email"
                />
              </td>
            </tr>

            <tr>
              <td>
                <label htmlFor="password">Password</label>
              </td>
              <td>
                <input
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  name=""
                  id="password"
                />
              </td>
            </tr>

            <tr>
              <td></td>
              <td>
                <button onClick={() => handleLogin()} className="button">
                  Login
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </>
  );
};

export default Login;

pages/Unauthorized.jsx

import { useUserStore } from "../store/useStore"

const Unauthorized = () => {
  const user = useUserStore(state => state.user);
  console.log(user);
  return (
    <div>You are not allowed to do this action!!!</div>
  )
}

export default Unauthorized

pages/member-pages/dashboard

const Dashboard = () => {
  return (
    <div>Dashboard</div>
  )
}

export default Dashboard

store/axiosHTTP.js

import axios from "axios";

const axiosHttp = axios.create({
  baseURL: 'http://localhost:3000'
});

export default axiosHttp;

store/BaseSlice.js

export const BaseSlice = (set) => ({
  name: 'Base Slice',
  loading: false,
  setLoading: (stat) => {
    set((state) => ({
      ...stat,
      loading: state
    }))
  }
});

store/UserSlice.js

import axiosHttp from "./axiosHttp";

export const UserSlice = (set) => ({
  name: 'User',
  user: null,
  token: null,
  setUser: async(user) => {
    set({user: user});
  },

  getUser: async(id) => {
    const json = await axiosHttp.get(`/user/${id}`);
    return await json.data;
  },
  signIn: async (email, password) => {
    try {
      //await timeout(2000);
      const json = await axiosHttp.post(`${import.meta.env.VITE_SERVER_URL}/api/v1/auth/signin`, { email, password });
      const data = await json.data;
      //console.log(data.user);
      set(() => ({
        user: data.user,
        token: data.token,
      }));
      return true;
    } catch (error) {
      return null;
    }
  },
  signUp: async (form) => {
    try {
      const json = await axiosHttp.post("/register", form);
      const data = await json.data;
      set(() => ({
        user: data.user,
        token: data.accessToken,
      }));
      return {token: data.accessToken, error: null, message: 'User registered'}
    } catch (error) {      
      const errMsg = await error.response;
      console.log(errMsg.data);
      return {message: errMsg.data, error: true, token: null};
    }
  },
  signOut: () => {
    set({
      user: null,
      token: null,
    });
  },

});

store/useStore.js

import { create } from "zustand";
import { createJSONStorage, persist } from "zustand/middleware"
import { BaseSlice } from "./BaseSlice";
import { UserSlice } from "./UserSlice";
import { SongSlice } from "./SongSlice";
export const useBaseStore = create((set, get) => ({
  ...BaseSlice(set, get)
}));

export const useUserStore = create(
  persist((set, get) => ({
    ...UserSlice(set, get)
}),{name: 'userStore',storage: createJSONStorage(() => sessionStorage)}
));

From backend API, we need following format response at time of login.

Once you completed these steps, check your website.

Happy Coding.

How to use multiple layouts in ReactJS app

Deepak Singh Kushwah — Tue, 14 Mar 2023 16:17:07 +0000

Introduction

Hello Developers

Today we are going to see how we can use multile layouts in ReactJS app.

Requirements

This example is for beginners. I hope you know how to setup react project.

Dependencies

Only "react-router-dom" required for page urls. No other dependencies are required.

So lets start with create new project.
npx create-react-app multiple-layouts

Now we have basic project setup. Install 'react-router-dom' for routes.
npm install react-router-dom

Now setup and install tailwindcss.



npm install -D tailwindcss

npx tailwindcss init

=> Now update the tailwind.config.js file with following code.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Once setup complete, we are ready to update our files in project. So create/update files as follows.

App.js



import { Route, Routes } from "react-router-dom";
import Frontend from "./components/frontend/Frontend";
import Backend from "./components/backend/Backend";
import Home from "./components/Home";
import Admin from "./components/Admin";
import About from "./components/About";
import Error from "./components/Error";

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Frontend />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
        </Route>

        <Route path="/admin" element={<Backend />}>
          <Route index element={<Admin />} />
        </Route>
        <Route path="*" element={<Error/>}/>
      </Routes>
    </div>
  );
}

export default App;

index.css



@tailwind base;
@tailwind components;
@tailwind utilities;

components/About.jsx



import React from 'react'

function About() {
  return (
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere aspernatur sit quidem dignissimos ipsum, rerum rem neque perspiciatis, molestias porro sed molestiae aperiam ratione. \.
    </div>
  )
}

export default About

components/Admin.jsx



import React from 'react'

function Admin() {
  return (
    <div className='text-left'>
      <h1>Admin Page</h1>
      <p className=' leading-loose'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo excepturi, eligendi quos, id mollitia cum doloremque qui ipsum maiores suscipit optio?  fugiat.</p>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque dolor ipsam molestias sunt architecto totam facere quo, porro saepe quod autem corporis amet magnam quis, possimus minima fugiat eius numquam praesentium? </p>
    </div>
  )
}

export default Admin

components/Error.jsx



import React from 'react'

function Error() {
  return (
    <div>Page Not Found</div>
  )
}

export default Error

We creating above file so we can show error page if route not found.

components/Home.jsx



import React from 'react'

function Home() {
  return (
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem inventore incidunt, at nostrum ab quas voluptatem iure, iste assumenda, rerum architecto esse fuga! Voluptatibus necessitatibus accusamus aut libero fugiat laudantium, ea exercitationem. Deleniti illum esse iure eligendi eos accusamus !</div>
  )
}

export default Home

Layout files

components/backend/Backend.jsx



import React from "react";
import { Outlet } from "react-router-dom";
import LeftMenu from "./LeftMenu";

function Backend() {
  return (
    <div className="flex items-start gap-3">
      <div>
        <LeftMenu />
      </div>
      <div>
        <Outlet />
      </div>
    </div>
  );
}

export default Backend;

components/backend/LeftMenu.jsx



import React from 'react'
import { Link } from 'react-router-dom'

function LeftMenu() {
  return (
    <div>
      <h1 className='text-2xl'>Admin Layout</h1>
      <ul className='flex flex-col gap-3 px-4 py-2 '>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/admin">Admin</Link></li>
        </ul>
    </div>
  )
}

export default LeftMenu

components/frontend/Footer.jsx



import React from 'react'

function Footer() {
  return (
    <div className='flex gap-3 justify-center bg-blue-300 px-4 py-2 rounded'>
      &copy; 2023, Author: Deepak Singh Kushwah
    </div>
  )
}

export default Footer

components/frontend/Frontend.jsx



import React from 'react'
import { Outlet } from 'react-router-dom'
import Footer from './Footer'
import Header from './Header'

function Frontend() {
  return (
    <div>
        <Header/>
            <Outlet/>
        <Footer/>
    </div>
  )
}

export default Frontend

components/frontend/Header.jsx



import React from 'react'
import { Link } from 'react-router-dom'

function Header() {
  return (
    <div>
        <ul className='flex gap-3 bg-blue-300 px-4 py-2 rounded'>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/admin">Admin</Link></li>
        </ul>
    </div>
  )
}

export default Header

Okay, if you have followed, I hope your application will run same as mine. Run following command from your prompt.

npm install
npm start

If you see menu with multiple layout, congratulations, you have implemented multiple layouts in your react app.

I hope you enjoyed it. Full code can be access here.

https://bitbucket.org/deepaksinghkushwah/dev-to-projects/src/main/multiple-layouts/

Happy Coding

Get started with Zustand

Deepak Singh Kushwah — Sat, 25 Feb 2023 19:18:07 +0000

Hello Developers

Today we are going to see how to use Zustand state manager with react.

Prerequisites

You should have some knowledge of ReactJS

Introduction

React is a great tool to create frontend apps. There are lots of tools available to manage state like Jotai, Redux, Recoil etc. There is one tool I like much is Zustand. It require minimum setup to get started. It follow very simple approach and today we are going through this.

Setup New Project

I am using PNPM & VITE to create and setup new project. You can use npm.
pnpm create vite@latest

Above command ask you to choose framework. Choose React and JavaScript in next step. Now we need to add zustand and other dependencies to our React app.

pnpm add zustand uuid react-icons
pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This will add Zustand to your project and install all dependencies.

Our file structure will be like this.

Very first, we will update the App.jsx file with following code.

import TodoForm from "./components/TodoForm";
import TodoList from "./components/TodoList";

function App() {
  return (
    <div className="App">
      <div className="flex">
        <div className="w-1/2">
          <TodoForm />
        </div>
        <div className="w-1/2">
          <TodoList />
        </div>
      </div>
    </div>
  );
}

export default App;

Now next part is to create store for our react app. Create new file in new "/store/todoStore.js" and put following code in file.

import { create } from "zustand";
import { v4 as uuidv4 } from "uuid";
const todoStore =(set, get) => ({
  todos: [],
  addTodo: (title) => {
    const newTodo = {
      title,
      id: uuidv4(),
      markDone: false,
    };
    set((state) => ({
      todos: [...state.todos, newTodo],
    }));
  },
  markTodoDone: (id, checked) => {
    let newTodos;
    if (checked === true) {
      newTodos = get().todos.map((todo) => {
        return todo.id === id ? { ...todo, markDone: true } : {...todo};
      });
    } else {
      newTodos = get().todos.map((todo) => {
        return todo.id === id ? { ...todo, markDone: false } : {...todo};
      });
    }

    set((state) => ({
      todos: newTodos,
    }));
  },
  removeTodo: (id) => {
    const newTodos = get().todos.filter((todo) => todo.id !== id);
    set(state => ({
      todos: newTodos
    }))
  },
});
const useTodoStore = create(todoStore);
export default useTodoStore;

So we have created our store, now we use this store to manage our todos.

/components/TodoForm.jsx

import React from "react";
import { useState } from "react";
import useTodoStore from "../store/todoStore";
const TodoForm = () => {
  const [title, setTitle] = useState("");
  const addTodo = useTodoStore((state) => state.addTodo);
  const handleAddTodo = () => {
    addTodo(title);
    setTitle("");
  };
  return (
    <div>
      <h1>Todo Form</h1>
      <table className="border-2 w-full">
        <tbody>
          <tr>
            <td>
              <label htmlFor="todo">Todo</label>
            </td>
            <td>
              <input
                placeholder="Todo Text"
                type="text"
                className="border-red-500 border-2"
                name="todo"
                id="todo"
                onChange={(e) => setTitle(e.target.value)}
              />
            </td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>
              <button
                type="button"
                onClick={handleAddTodo}
                className="btn btn-primary"
              >
                Add Todo
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

export default TodoForm;

/components/TodoList.jsx

import React from "react";
import {BsTrash} from "react-icons/bs";
import useTodoStore from "../store/todoStore";
const TodoList = () => {
  const todos = useTodoStore((state) => state.todos);
  const markTodoDone = useTodoStore(state => state.markTodoDone);
  const removeTodo = useTodoStore(state => state.removeTodo);
  return (
    <div className="px-3">
      <h1>Todos</h1>
      {todos?.map((todo) => (
        <div className="flex justify-start items-center" key={todo.id}>
          <div className="w-auto">
            <input type="checkbox" name="markDone" onClick={(e) => markTodoDone(todo.id, e.target.checked)} id="" />
          </div>
          <div className="px-3"><BsTrash title="Remove Todo" className="cursor-pointer" onClick={() => removeTodo(todo.id)}/></div>
          <div className={`px-1 w-full ${todo.markDone === true ? 'line-through text-red-700' : ''}`}>{todo.title}</div>

        </div>
      ))}
    </div>
  );
};

export default TodoList;

/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.btn {
  @apply border-blue-500 bg-blue-800 text-white px-4 py-1 rounded-md;
}

input[type="text"]{
  @apply w-full px-4 py-1 rounded-md;
}
table {
  @apply border-2 border-red-300 shadow-lg w-full;
}
table td{
  @apply px-3 py-2; 
}

table tr:nth-child(even){
  @apply bg-gray-200;
}


table tr:nth-child(odd){
  @apply bg-white;
}

/tailwindcss.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now you can run the project. You will see same screen if you have followed it here.

You can check the code on this link with using of persist middle-ware.

https://bitbucket.org/deepaksinghkushwah/dev-to-projects/src/main/react-zustand-example/

Happy Coding

React todo app using useState

Deepak Singh Kushwah — Thu, 09 Feb 2023 08:53:27 +0000

Hello Developers

Today we are going to create a simple to-do app with add/edit and delete feature using react.

I have used pnpm for dependencies instead of npm. Bootstrap, react-bootstrap for CSS. UUID for unique ids. Here is the folder structure for project.

First we need to create project.

pnpm create vite@latest

Above command will show options to create react app. Select for react js app and crete new folder. Then goto new created folder and run "pnpm install" and "pnpm add react react-bootstrap uuid" commands. New project setup and ready to use for next changes.

Next, in app.js, update it with following code.

import { useState } from 'react'
import './App.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import Todo from './components/todo/Todo'
import { Container } from 'react-bootstrap'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App mt-3">

      <Container>
      <h1>Add/Edit/Delete todo example using state</h1>
      <Todo/>      
      </Container>
    </div>
  )
}

export default App

Next we need to create new folder/files as per folder structure image. In components/todo folder, create Todo.jsx with following code.

import React from 'react'
import TodoForm from './TodoForm'
import TodoList from './TodoList'
import { Row, Col } from 'react-bootstrap'
import { useEffect } from 'react';
import { useState } from 'react'
import {v4 as uuidv4} from "uuid";
const Todo = () => {
    const items = [
        { id:uuidv4(), title: 'Item 1' },
        { id: uuidv4(), title: 'Item 2' }
    ];

    const [todos, setTodo] = useState([]);
    const [editItem, setEditItem] = useState(null);
    useEffect(() => {        
        setTodo(items);
    },[]);
    const handleRemoveTodo = (id) => {
        /*const itemToDelete = todos.findIndex(element => {
            return element.id === id;
        });
        const newItems = todos.splice(itemToDelete, 1);*/

        const newItems = todos.filter(item => item.id !== id);
        setTodo([...newItems]);
        //console.log(todos);
    }

    const handleAddTodo = (form) => {        
        setTodo([...todos, {id: uuidv4(), title:form.title}]);        
    }

    const handleEditTodo = (item) => {
        setEditItem(item);
    }

    const handleSubmitEditForm = (form) => {
        const indexItemToUpdate = todos.findIndex(item =>  item.id == form.id);
        //console.log(indexItemToUpdate);
        const newArr = todos.map(item => {
            if(item.id == form.id){
                item.title = form.title;
            }
            return item;
        });
        setTodo([...newArr]);
        setEditItem(null);
    }
    return (
        <div className=''>
            <Row>
                <Col xs={4}>
                    <TodoForm editItem={editItem}
                    handleAddTodo={handleAddTodo}
                    handleEditTodo={handleEditTodo}
                    handleSubmitEditForm={handleSubmitEditForm}
                    />
                </Col>
                <Col>
                    <TodoList
                        todos={todos}                        
                        handleRemoveTodo={handleRemoveTodo}
                        handleEditTodo={handleEditTodo}
                         />
                </Col>
            </Row>


        </div>
    )
}

export default Todo

Next we need to create todo list components. Create new file in components/todo folder named TodoList.jsx and add following code.

import React from 'react'
import { Row, Col } from 'react-bootstrap'
import { Button } from 'react-bootstrap'

const TodoList = ({ todos, handleRemoveTodo, handleEditTodo }) => {
    return (
        <div className='card'>
            <div className='card-body'>
                {todos?.length > 0 ? (
                    <>
                        {todos.map(item => (
                            <div className='row mb-1'>
                                <div className='col-8'>
                                    {item.title}
                                </div>
                                <div className='col-1'>
                                    <Button onClick={() => handleEditTodo(item)}>edit</Button>
                                </div>
                                <div className='col-2'>
                                    <Button className="ms-2" onClick={() => handleRemoveTodo(item.id)}>x</Button>
                                </div>
                            </div>
                        ))}
                    </>
                ) : 'No todo to display'}
            </div>
        </div>
    )
}

export default TodoList

So we have created list for todo component, next we need to create form component where we can add/edit todos. Create new file in components/todo named TodoForm.jsx with following code.

import React from 'react'
import { useEffect } from 'react';
import { useState } from 'react'

const TodoForm = ({ editItem, handleAddTodo, handleEditTodo, handleSubmitEditForm }) => {
  const [form, setForm] = useState({
    id: null,
    title: ""
  });
  useEffect(() => {
    if (editItem !== null) {
      setForm({ id: editItem.id, title: editItem.title });
    }
  }, [editItem])
  const handleSubmitForm = () => {
    if (form.id !== null) {
      handleSubmitEditForm(form);
    } else {
      handleAddTodo(form);
    }
    setForm(prev => ({ title: "", id: null }));
  }

  const handleFormChange = (e) => {
    setForm({
      ...form,
      [e.target.id]: e.target.value
    });
  }
  return (
    <div className='card'>
            <div className='card-body'>
      {editItem !== null ?
        <div className='row'>
          <div className='col-12'>
            <input className='form-control' placeholder='Title' id="title" type="text" value={form.title} onChange={(e) => handleFormChange(e)} />
          </div>
          <div className='col-12 mt-1'>
            <button className='btn btn-primary' onClick={() => handleSubmitForm(form)}>Save</button>
          </div>
        </div>
        :
        <div className='row'>
          <div className='col-12'>
            <input className='form-control' placeholder='Title' id="title" type="text" value={form.title} onChange={(e) => handleFormChange(e)} />
          </div>
          <div className='col-12 mt-1'>
            <button className='btn btn-primary' onClick={() => handleSubmitForm(form)}>Add</button>
          </div>
        </div>
      }

    </div>
    </div>
  )
}

export default TodoForm

That's it. Our todo app is ready to use. Start your server and see it in action.

Happy Coding :)

React+Express (node)+MongoDB Login/Registration Sample App

Deepak Singh Kushwah — Tue, 15 Mar 2022 14:33:23 +0000

Hello Developers

Today I am sharing an example application for user login/registration and secure pages like member area for profile and other sections.

You can find this application full source code at following url...
https://bitbucket.org/deepaksinghkushwah/react-express-login/src/master/

Application is divided in 2 parts, frontend is create in react app using "npx create-react-app" and contain login/registration/member area pages. I have used localStorage for handling login session.

Backend is created using NodeJS+Express+MongoDB. All get started information is added in readme file. This application is example application for new developers who want to learn react/express and want a ready to use sample application.

You need to create .env file in react frontend application with following content...
REACT_APP_SERVER_HOST="http://localhost:5000/api/v1"

This is api url. You can change it in backend and set it in .env file at backend.

There is a seeder for mongodb to populate user table. You can use it with "node seeder.js -i" to import sample data or "node seeder.js -d" to delete user data. Users will be created with "test<1-100>@localhost.com" and password will be "123456". Or you can update seeder as per your need.

Few screenshots....

Home Page

After Login

Registration Page

This may contain bugs so do not use it for production. It's just for showing how login/registration work with react and how to maintain session.

Hope you like it. Happy Coding.

Setup nginx + multiple php-fpm on Q4OS(Debian10)

Deepak Singh Kushwah — Fri, 25 Feb 2022 12:33:55 +0000

Hello Developers,

Recentely I have used multiple php versions on single installation. Today we are going to see how we can setup full linux + nginx + php on Q4OS(Debian 10) (I am using Q4OS 3, it's based on debian).

First of all we need to setup php repo which provide php verions...

wget https://packages.sury.org/php/apt.gpg
sudo apt-key add apt.gpg

Now add repo to your source list...

echo "deb https://packages.sury.org/php/ $(lsb_release -sc) main" | sudo tee /etc/apt/sources.list.d/php7.list

So first we need to install nginx...
sudo apt install nginx-full -y

Now nignx is installed, we need to setup multiple PHP-FPM verions...

sudo apt install php7.3-fpm php7.3-cli php7.3-curl php7.3-mysql php7.3-xml php7.3-zip php7.3-mbstring php7.3-zip -y

sudo apt install php7.0 php7.0-fpm php7.0-mysql libapache2-mod-php7.0 libapache2-mod-fcgid -y

sudo apt install php7.4-fpm php7.4-cli php7.4-json php7.4-common php7.4-mysql php7.4-zip php7.4-gd php7.4-mbstring php7.4-curl php7.4-xml php7.4-bcmath -y

sudo apt install php8.0-fpm php8.0-cli php8.0-json php8.0-common php8.0-mysql php8.0-zip php8.0-gd php8.0-mbstring php8.0-curl php8.0-xml php8.0-bcmath -y

sudo apt install php8.1-fpm php8.1-cli php8.1-json php8.1-common php8.1-mysql php8.1-zip php8.1-gd php8.1-mbstring php8.1-curl php8.1-xml php8.1-bcmath -y

You can choose other modules for selected php verions as mention above.

Now execute follwing command to check and enable nginx status...

sudo systemctl enable nginx
sudo sustemctl status nginx

Now configure nginx to create new virtual host for your site, I am using test.lcoal as new vhost

First create new directory

mkdir -p /var/www/test.local

Now create index.php in /var/www/test.local dir and add following content in it.

<?php
phpinfo();

Next we create new file /etc/nginx/sites-available/test.local.conf and add following content to it.

server {
    listen 80;
    listen [::]:80;

    server_name mydomain.com www.mydomain.com;
    root /var/www/mydomain.com;
    index index.html index.php;
    location / {
        try_files $uri $uri/ =404;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
    }
}

Similarly, you can choose any installed php version instead of php7.0-fpm

Next create symlink

sudo ln -s /etc/nginx/sites-available/test.local.conf /etc/nginx/sites-enabled/

Add entry in /etc/hosts file.

127.0.0.1    test.local

Save file and test it

sudo nginx -t

It will show you ok if everything correct in nginx config.

Restart nginx to take effect.

sudo systemctl restart nginx

Now it's time to check our virtual host "test.local" in browser.

http://test.local

Something you need to switch PHP on CLI if you are using multiple PHP versions and want to install dependencies (using composer). So to switch PHP, use following command.

sudo update-alternatives --config php

It will show you list of installed php versions, you can pick and press enter to choose default one.

Hope you like this post.

Currency Converter + Rates

Deepak Singh Kushwah — Fri, 18 Feb 2022 03:24:24 +0000

Hello Developers,

This app is my new react project to learn about state + axios + routes in react js. It shows the exchage rates and convert currency value from one to other. I have used following packages to create this app...

Axios
React Router Dom
React Bootstrap + Bootstrap

Use npm install and npm start to run this project

So to create this app, I have used following code.

App.js

import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Navigation from "./components/shared/Navigation";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import CurrencyConverter from "./pages/CurrencyConverter";
import CurrencyRates from "./pages/CurrencyRates";
function App() {
  return (
    <div className="App">
      <Router>
        <Navigation />
        <div className="container">
          <Routes>
            <Route path="/" element={<CurrencyRates />} />
            <Route path="/currency-converter" element={<CurrencyConverter />} />
          </Routes>
        </div>
      </Router>
    </div>
  );
}

export default App;

To style loader in this app, update App.css to following...

.loadingSpinnerContainer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 5000;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .loadingSpinner {
    width: 64px;
    height: 64px;
    border: 8px solid;
    border-color: #00cc66 transparent #00cc66 transparent;
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
  }

Now we need to created pages to load currency exchange rates and converter. So i created pages folder in src. Add following files in pages folder.

pages/CurrencyConverter.jsx

import React, { useEffect, useState } from 'react'
import http from '../components/CustomAxios'
import Spinner from '../components/shared/Spinner';
function CurrencyConverter() {
  const [symbols, setSymbols] = useState([]);
  const [loading, setLoading] = useState(false);

  const [fromCurrency, setFromCurrency] = useState('');
  const [toCurrency, setToCurrency] = useState('');
  const [amount, setAmount] = useState(0);
  const [convertedAmount, setConvertedAmount] = useState(null);
  useEffect(() => {
    setLoading(true);
    const getSymbols = async () => {
      const sys = await http.get("/symbols");
      const data = await sys.data;
      let arr = Array.from(Object.keys(data.symbols), k => [`${k}`, data.symbols[k]]);
      setSymbols(arr);
      setLoading(false);
    };

    getSymbols();
  }, []);



  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);

    const res = await http.get('/convert?from=' + fromCurrency + '&to=' + toCurrency + "&amount=" + amount + "&places=2");
    const data = await res.data;
    //console.log(data);
    setConvertedAmount(data.result);
    setLoading(false);
  }

  const handleSelectChange = (e) => {
    setConvertedAmount(null);
    if(e.target.id === 'toCurrency'){
      setToCurrency(e.target.value);
    }

    if(e.target.id === 'fromCurrency'){
      setFromCurrency(e.target.value);
    }
  }

  if (loading) {
    return <Spinner />
  }
  return (
    <>
      <h1>Convert Currency</h1>
      <form onSubmit={handleSubmit}>
        <table className='table table-borderless table-hover'>
          <tbody>
            <tr>
              <td width="30%">From Currency</td>
              <td width="70%">
                <select className='form-control' id="fromCurrency" onChange={handleSelectChange}>
                  {symbols.length > 0 && symbols.map((item) => (
                    <option value={item[0]} key={item[1].code}>{item[1].code} - {item[1].description}</option>
                  ))}
                </select>
              </td>
            </tr>
            <tr>
              <td>To Currency</td>
              <td>
                <select className='form-control' id="toCurrency" onChange={handleSelectChange}>
                  {symbols.length > 0 && symbols.map((item) => (
                    <option value={item[0]} key={item[1].code}>{item[1].code} - {item[1].description}</option>
                  ))}
                </select>
              </td>
            </tr>
            <tr>
              <td>Amount</td>
              <td><input className='form-control' type="number" onChange={(e) => setAmount(e.target.value)} /></td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td>&nbsp;</td>
              <td><button className='btn btn-primary' type="submit">Convert</button></td>
            </tr>
            {convertedAmount !== null &&
              <tr>
                <td>Converted Amount</td>
                <td>{toCurrency} {convertedAmount}</td>
              </tr>
            }
          </tfoot>

        </table>
      </form>
    </>
  )
}

export default CurrencyConverter

pages/CurrencyRates.jsx

import React, { useEffect, useState } from 'react'
import ExchangeRate from '../components/ExchangeRate'
import http from '../components/CustomAxios'
function CurrencyRates() {
  const [rates, setRates] = useState([]);
  const [baseCurrency, setBaseCurrency] = useState('Eur');
  const [loading, setLoading] = useState(true);
  const [exchangeDate, setExchangeDate] = useState('');
  useEffect(() => {
    const getRates = async () => {

      const response = await http.get('/latest?places=2');
      const data = await response.data;
      //console.log(data);
      let arr = Array.from(Object.keys(data.rates), k => [`${k}`, data.rates[k]]);
      //console.log(arr);
      setRates(arr);
      setLoading(false);
      setBaseCurrency(data.base);
      setExchangeDate(data.date);
    }
    getRates();

  }, [])
  return (
    <>
      <h1>Daily Exchange Rates</h1>
      <div className='text-bold'>
        <span className='float-start'><strong>Base Currency: {baseCurrency}</strong></span>
        <span className='float-end'><strong>Date: {exchangeDate}</strong></span>
        <br />
      </div>
      <ExchangeRate rates={rates} loading={loading} />
    </>

  )
}

export default CurrencyRates

Now we create some components in src/components folder. First is to initlize the axios with base url. I am using "exchangerate.host" website API's for currency services app.

components/CustomAxios.js

import axios from "axios";
const http = axios.create({
    baseURL: 'https://api.exchangerate.host'
});

export default http;

Next we create ExchangeRate.jsx file to show all rates from api.

components/ExchangeRate.jsx

import React from 'react'
import Spinner from './shared/Spinner';

function ExchangeRate({ rates, loading }) {
    if (loading) {
        return <Spinner/>;
    }
    const listing = rates.length > 0 && (
        <div className="row row-cols-5 mt-3">
            {rates.map(item => (
                <div className="col mt-3 mb-1" key={item[0]}>
                    <div className="card bg-dark">
                        <div className="card-body">
                            <div className="card-text text-white">
                                {item[0]} - {item[1]}
                            </div>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    )
    return (
        <>

            {listing}
        </>
    );

}

export default ExchangeRate

Now to load navigation and spinner, create new folder in src/components named "shared" and in src named src/assets. For loader image, you can use any image name in src/assets folder. I've used 'loadeing.gif' name. Update your image name in spinner component

components/shared/Spinner.jsx

import React from 'react'
import spinner from "../../assets/loading.gif";
function Spinner() {
    return (
        <div className='loadingSpinnerContainer'>
            <img src={spinner} alt="Loading..." width="200px" height="200px" />
        </div>
    )
}

export default Spinner

components/shared/Navigation.jsx

import React from 'react'
import { Container, Nav, Navbar, NavDropdown } from 'react-bootstrap'
import { NavLink } from 'react-router-dom'

function Navigation() {
    return (
        <Navbar bg="dark"  variant="dark" expand="lg">
            <Container>
                <Navbar.Brand href="#home">Currency Services</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto">
                        <NavLink className="nav-link" to="/">Home</NavLink>
                        <NavLink className="nav-link" to="/currency-converter">Currency Converter</NavLink>
                        {/**
                        <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                            <NavDropdown.Divider />
                            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                        </NavDropdown> 
                        */}
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>

    )
}

export default Navigation

You can get the full source code at following location.

https://bitbucket.org/deepaksinghkushwah/currencyservices/src/master/

Hope you like this app.

Expense monitor App

Deepak Singh Kushwah — Tue, 15 Feb 2022 11:08:31 +0000

Hello Devs, recently I have learned ReactJS and I am creating apps to learn more. I've create an app "Expense Monitor" which can store expense and income entries in json file and show them as list. It's a beginners project and hope help it will others who are learning ReactJS. Full source code is available at following url.

https://bitbucket.org/deepaksinghkushwah/expense-monitor/src/master/

I have used following packages...
axios, bootstrap,concurrently, json-server, moment, react-bootstrap, react-icons, react-modal, react-moment, react-toastify

Lets start this with updateing App.js file....

App.js

import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import EntryForm from "./components/EntryForm";
import { EntryProider } from "./context/entries/EntryContext";
import EntryList from "./components/EntryList";
import Modal from "react-modal";
import { useState } from "react";

function App() {
  // set app element to root
  Modal.setAppElement("#root");

  // set state for open and close modal
  const [modelIsOpen, setModelIsOpen] = useState(false);

  // open modal function
  const openModal = () => {
    setModelIsOpen(true);
  };

  // close modal function
  const closeModal = () => {
    setModelIsOpen(false);
  };

  return (
    <div className="App">
      {/** Entry provider for entry context */}
      <EntryProider>
        {/** Modal config start */}
        <Modal
          isOpen={modelIsOpen}
          onRequestClose={closeModal}
          className="customModal mt-5 p-2"
        >
          <button
            onClick={closeModal}
            className="btn btn-sm btn-danger float-end"
          >
            close
          </button>
          <EntryForm />
        </Modal>
        <h1 className="mt-3 ms-3">
          Expense Monitor
          <span className="float-end me-3">
            <button
              type="button"
              className="btn btn-primary btn-sm"
              onClick={openModal}
            >
              Add Entry
            </button>
          </span>
        </h1>

        {/** Expense entries module */}
        <EntryList />

        {/** Toast container to show toast notifications */}
        <ToastContainer />
      </EntryProider>
    </div>
  );
}

export default App;

Now update the App.css

.App{    
    width: 800px;
    margin: auto;
    padding: auto;    
}
.customModal{
    top: 50%;
    left: 50%;
    margin: auto;
    width: 400px;
    height: 350px;
    background-color: burlywood;
    text-align: center;    
}

Next create folder name "components" and create following files with code.
compomnents/EntryForm.jsx

import React, { useContext, useState } from 'react'
import { toast } from 'react-toastify'
import { addEntry, getEntries } from '../context/entries/EntryAction';
import EntryContext from '../context/entries/EntryContext';

function EntryForm() {
  /** set states for form */
  const [title, setTitle] = useState("");
  const [amount, setAmount] = useState(0);
  const [item_type, setItemType] = useState("income");

  /** using entry context dispatch */
  const { dispatch } = useContext(EntryContext);


  /** handle form submit function */
  const handleSubmit = async(e) => {
    e.preventDefault();
    dispatch({ type: 'SET_LOADING' });
    if (title === "" || amount === "") {
      toast.error("You must provide the title and amount");
      return false;
    }
    await addEntry(title, amount, item_type);
    toast.success("Entry added");
    setTitle("");
    setAmount("");
    setItemType("income");


    const allEntries = await getEntries();
    dispatch({ type: 'GET_ENTRIES', payload: allEntries });

  }
  return (
    <form onSubmit={handleSubmit}>
      <table className="table table-bordered">
        <tbody>
          <tr>
            <td><input type="text" className='form-control' id="title" name="title" value={title} placeholder="Title" onChange={(e) => setTitle(e.target.value)} /></td>
          </tr>
          <tr>
            <td><input type="number" step=".1" min="0" className='form-control' id="amount" name="amount" value={amount} placeholder="Amount" onChange={(e) => setAmount(e.target.value)} /></td>
          </tr>
          <tr>
            <td>
              <select name="item_type" className='form-control' value={item_type} id="item_type" onChange={(e) => setItemType(e.target.value)}>
                <option value="income">Income</option>
                <option value="expense">Expense</option>
              </select>
            </td>
          </tr>
        </tbody>
      </table>
      <button className='btn btn-primary' type="submit">Send</button>
    </form>
  )
}

export default EntryForm

components/EntryList.jsx

import React, { useEffect } from 'react'
import { useContext } from 'react';
import { getEntries, removeEntry } from '../context/entries/EntryAction';
import EntryContext from "../context/entries/EntryContext";
import { FaTrash } from 'react-icons/fa';
import { toast } from 'react-toastify';
import moment from "moment";
function EntryList() {
    /** use entry context to get fields */
    const { entries, dispatch, totalIncome, totalExpense, loading } = useContext(EntryContext);

    useEffect(() => {
        dispatch({ type: 'SET_LOADING' });
        const fetchEntries = async () => {
            const r = await getEntries();
            dispatch({ type: 'GET_ENTRIES', payload: r });

        }
        fetchEntries();

    }, [dispatch]);

    /** handle delete event */
    const handleDelete = async (id) => {
        if (window.confirm("Are you sure want to remove this entry?")) {
            dispatch({ type: 'SET_LOADING' });
            await removeEntry(id);
            toast.success("Item deleted");
            const r = await getEntries();
            dispatch({ type: 'GET_ENTRIES', payload: r });
        }


    }

    if (loading) {
        return "Loading...";
    }
    return (
        <>
            {/** return entries if entries have rows */}
            {entries && entries.length > 0 ? (
                <table className='table table-hover table-small'>
                    <thead>
                        <tr>
                            <th>Item</th>
                            <th>Amount</th>
                            <th>Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {entries.map((item) => (
                            <tr key={item.id} className={item.item_type === 'expense' ? "table-danger" : "table-primary"} title={item.item_type}>
                                <td>
                                    {item.title}
                                </td>
                                <td>
                                    ${item.amount}
                                </td>
                                <td>{moment(item.date).format("MMMM Do YYYY, h:mm:ss a")}</td>
                                <td>
                                    <span className='float-end pe-3' onClick={() => handleDelete(item.id)}><FaTrash /></span>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                    <tfoot className='table-secondary'>
                        <tr>
                            <th>Total Income</th>
                            <th>${totalIncome}</th>
                            <th></th>
                            <th></th>
                        </tr>
                        <tr>
                            <th>Total Expense</th>
                            <th>${totalExpense}</th>
                            <th></th>
                            <th></th>
                        </tr>

                    </tfoot>
                </table>

            ) : 'No entries found'}
        </>

    )
}

export default EntryList

Now we move to context. Create context folder in src folder and write these files...
context/entries/EntryAction.js

import axios from "axios"
import moment from "moment";
const http = axios.create({
    baseURL: 'http://localhost:5000'
}); 

export const addEntry = async(title, amount, item_type) => {
    const date = moment().format('LLLL');    
    const params = new URLSearchParams({title, amount, item_type, date });
    const response = await http.post('/entries',params);
    const data = await response.data;
    return data;
}

export const getEntries = async() => {
    const r = await http.get('/entries');
    const data = await r.data;
    return data;
}

export const removeEntry = async(id) => {
    const response = await http.delete(`/entries/${id}`)
    const data = await response.data;
    return data;
}

EntryContext.js

import { createContext, useReducer } from "react";
import EntryReducter from "./EntryReducer";

const EntryContext = createContext();

export const EntryProider = ({children}) => {
    const initalState = {
        entries: [],
        totalExpense: 0,
        totalIncome: 0,
        loading: true,
    }
    const [state, dispatch] = useReducer(EntryReducter, initalState);
    return <EntryContext.Provider value={{
        ...state,
        dispatch
    }}>
        {children}
    </EntryContext.Provider>
}

export default EntryContext;

EntryReducer.js

const EntryReducter = (state, action) => {
    let expense = 0;
    let income = 0;
    switch(action.type){
        case 'GET_ENTRIES':
            expense = setTotal('expense', action.payload);
            income = setTotal('income', action.payload)
            return {                
                entries: action.payload,
                loading: false,
                totalExpense: expense,
                totalIncome: income
            }

        case 'SET_LOADING':
            return {
                loading: true
            }
        default:
            return state;
    }
}

function setTotal(type, entries){
    let total = 0.00;
    console.log(entries);
    entries.map((item) => {
        if(item.item_type === type){
            total += parseFloat(item.amount);
        }
    })
    return total;    

}

export default EntryReducter;