DEV Community: Julfikar Haidar

Building a Responsive, Drag-and-Drop Image Gallery with React and Tailwind CSS 🎨

Julfikar Haidar — Fri, 25 Oct 2024 18:08:00 +0000

In my latest project, I tackled an engaging challenge: building a dynamic image gallery in React that supports drag-and-drop functionality, image uploads, and image selection. Here's a rundown of what I did, the technical challenges I faced, and how I overcame them.

🎯 Project Goal
To create a user-friendly gallery where users can:

Upload multiple images at once.
Select and delete specific images.
Drag and rearrange images dynamically.
Provide a responsive layout that adapts across various screen sizes.
🛠 Technologies Used
React for building the user interface.
TypeScript for type safety and improved development experience.
Tailwind CSS for rapid styling.
HTML5 Drag-and-Drop API for implementing intuitive drag-and-drop functionality.

💻 Code Overview
Here's a breakdown of some of the core components and functionality that make up this gallery:

Image Uploading I used a simple element to allow users to upload multiple images simultaneously. When images are uploaded, they are previewed in the gallery by generating a URL using URL.createObjectURL(file). The uploaded images are stored in the component state, making it easy to manage and render them dynamically.

const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
  if (event.target.files) {
    const newImages = Array.from(event.target.files).map((file, index) => ({
      id: images.length + index + 1,
      url: URL.createObjectURL(file),
      selected: false,
    }));
    setImages((prev) => [...prev, ...newImages]);
  }
};

Selecting and Deleting Images Each image in the gallery has a checkbox that allows users to select it. The selected images can be deleted in bulk with a simple click. The state management for this is straightforward, with a selected property for each image to track its selection status.

const toggleSelection = (id: number) => {
  setImages((prevImages) => {
    const updatedImages = prevImages.map((img) =>
      img.id === id ? { ...img, selected: !img.selected } : img
    );
    const newSelectedCount = updatedImages.filter(
      (img) => img.selected
    ).length;
    setSelectedCount(newSelectedCount);
    return updatedImages;
  });
};

Drag-and-Drop Sorting Using the HTML5 Drag-and-Drop API, I implemented a simple way to rearrange images by dragging and dropping them. This makes the gallery interactive and fun to use.

const handleDragStart = (index: number) => {
  setDraggedIndex(index);
};

const handleDrop = (e: React.DragEvent<HTMLDivElement>, index: number) => {
  e.preventDefault();
  if (draggedIndex !== null && draggedIndex !== index) {
    const updatedImages = [...images];
    const [movedImage] = updatedImages.splice(draggedIndex, 1);
    updatedImages.splice(index, 0, movedImage);
    setImages(updatedImages);
    setDraggedIndex(index);
  }
};

Responsive Layout with Tailwind CSS I utilized Tailwind CSS to create a responsive grid layout for the gallery. The images adjust their sizes dynamically based on the screen size, ensuring a seamless experience across all devices.

<div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2 max-h-[500px] overflow-y-auto'>
  {/* Image Items Here */}
</div>

🎨 User Experience and Design
To enhance the user experience:

I added an overlay that appears when hovering over images, showing the checkbox for selection.
The layout adapts to screen size changes, offering a clean, organized look on any device.
An "Add Images" button is always visible, enabling easy uploads without disrupting the current view.

📝 Key Takeaways

State Management: Efficiently managing component state with React hooks was crucial for handling image uploads, selections, and deletions.
Drag-and-Drop: Leveraging the native HTML5 API made implementing drag-and-drop relatively straightforward without additional dependencies.
User Interface: Tailwind CSS proved to be an invaluable tool for quickly creating a responsive and visually appealing design.
File Handling: Previewing images before uploading by using URL.createObjectURL is a handy trick for a better user experience

🚀 Next Steps
I plan to enhance the gallery by:

Adding a lightbox effect to view images in larger sizes.
Integrating a backend to save uploaded images permanently.
Adding filters and sorting options to manage large image collections easily.

📸 Demo & Code
If you're interested in the complete code, check out my GitHub repository here. Feel free to clone, fork, and play around with it!
Live
💬 Feedback
I’d love to hear your thoughts! What do you think of this image gallery? What features would you like to see added? Feel free to leave a comment or connect with me on LinkedIn!

Thanks for reading, and happy coding! 🎉

Redux-Toolkit CRUD example with React Hooks

Julfikar Haidar — Mon, 06 Jun 2022 19:32:17 +0000

Redux Redux is a open-source Javascript library for managing application stae.In this article,I will show you how to build a React Redux Hooks consume Rest API with axios.

Note: I assume that you are familiar with redux concepts. If you are new to redux,I strongly solicitation you to learn basic concept of redux.

Before we jump into the article, let me show you what we are going to create in this article.

Why to choose Redux Toolkit

Easy way to setup store
Support some build in dependency as like Immer js, Redux,Redux thank,Reselect,Redux devtools extension.
No more write boilerplate

How to setup Create-React-App With Redux

For this redux tutorial lets start with setup new react application:

npx create-react-app my-app
cd my-app
npm start

Next we will add redux with:

npm install @reduxjs/toolkit react-redux

Add React Router

npm install react-router-dom

Let’s install axios with command:

npm install axios

import axios from "axios";
const API = axios.create({baseURL: process.env.REACT_APP_BASEURL});

API.interceptors.request.use((req) => {
    if (localStorage.getItem("user")) {
      req.headers.Authorization = `Bearer ${
        JSON.parse(localStorage.getItem("user")).token
      }`;
    }
    return req;
  });

export default API

You can change the baseURL that depends on REST APIs url that your Server configures.

Firstly configure store. Create file src/redux/store.js containing:

import { configureStore } from "@reduxjs/toolkit";
import TourReducer from "./features/tourSlice";

export default configureStore({
  reducer: {
    tour: TourReducer,
  },
});

Then we need to connect our store to the React application. Import it into index.js like this:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import store  from './redux/store';
import reportWebVitals from './reportWebVitals';
import './index.css';
import App from "./App";

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Create Slice Reducer and Actions

Instead of creating many folders and files for Redux (actions, reducers, types,…), with redux-toolkit we just need add one file: slice.

A slice is a collection of Redux reducer logic and actions for a single feature.Reducer are pure function which handle all logic on action type.
For creating a slice, we need:

name to identify slice
initial state
one or more reducer functions to define how the state can
be updated
Once a slice is created, we can export the generated Redux action creators and the reducer function for the whole slice.
Redux Toolkit provides createSlice() function that will
auto-generate the action types and action creators for you,
based on the names of the reducer functions you provide.

Example:

import { createSlice } from '@reduxjs/toolkit'
export const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    // add your non-async reducers here
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    }
  },
  extraReducers: {
    // extraReducers handles asynchronous requests, which is our main focus.
  }
})
// Action creators
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

Redux requires that we write all state updates immutably, by making copies of data and updating the copies. However, Redux Toolkit's createSlice and createReducer APIs use Immer inside to allow us to write "mutating" update logic that becomes correct immutable updates.

Let's create a Slice for src/redux/feature/slice

We need to use Redux Toolkit createAsyncThunk which
provides a thunk that will take care of the action types
and dispatching the right actions based on the returned
promise.
Asynchronous requests created with createAsyncThunk accept
three parameters: an action type string, a callback
function (referred to as a payloadCreator), and an options
object.

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import API from "../api";

export const createTour = createAsyncThunk(
  "tour/createTour",
  async ({ updatedTourData, navigate, toast }, { rejectWithValue }) => {
    try {
      const response = await API.post("/tour", updatedTourData);
      toast.success("Added Successfully");
      navigate("/dashboard");
      return response.data;
    } catch (err) {
      return rejectWithValue(err.response.data);
    }
  }
);


export const getToursByUser = createAsyncThunk(
  "tour/getToursByUser",
  async (userId, { rejectWithValue }) => {
    try {
      const response = await API.get(`/tour/userTours/${userId}`);;
      return response.data;
    } catch (err) {
      return rejectWithValue(err.response.data);
    }
  }
);


export const updateTour = createAsyncThunk(
  "tour/updateTour",
  async ({ id, updatedTourData, toast, navigate }, { rejectWithValue }) => {
    try {
      const response = await API.patch(`/tour/${id}`, updatedTourData);
      toast.success("Tour Updated Successfully");
      navigate("/dashboard");
      return response.data;
    } catch (err) {
      return rejectWithValue(err.response.data);
    }
  }
);

export const deleteTour = createAsyncThunk(
  "tour/deleteTour",
  async ({ id, toast }, { rejectWithValue }) => {
    try {
      const response = await API.delete(`/tour/${id}`);
      toast.success("Tour Deleted Successfully");
      return response.data;
    } catch (err) {
      return rejectWithValue(err.response.data);
    }
  }
);


const tourSlice = createSlice({
  name: "tour",
  initialState: {
    tour: {},
    tours: [],
    userTours: [],
    tagTours: [],
    relatedTours: [],
    currentPage: 1,
    numberOfPages: null,
    error: "",
    loading: false,
  },
  reducers: {
    setCurrentPage: (state, action) => {
      state.currentPage = action.payload;
    },
  },
  extraReducers: {
    [createTour.pending]: (state, action) => {
      state.loading = true;
    },
    [createTour.fulfilled]: (state, action) => {
      state.loading = false;
      state.tours = [action.payload];
    },
    [createTour.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.payload.message;
    },
    [getToursByUser.pending]: (state, action) => {
      state.loading = true;
    },
    [getToursByUser.fulfilled]: (state, action) => {
      state.loading = false;
      state.userTours = action.payload;
    },
    [getToursByUser.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.payload.message;
    },

    [updateTour.pending]: (state, action) => {
      state.loading = true;
    },
    [updateTour.fulfilled]: (state, action) => {
      state.loading = false;
      const {
        arg: { id },
      } = action.meta;
      if (id) {
        state.userTours = state.userTours.map((item) =>
          item._id === id ? action.payload : item
        );
        state.tours = state.tours.map((item) =>
          item._id === id ? action.payload : item
        );
      }
    },
    [updateTour.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.payload.message;
    }
    ,
    [deleteTour.pending]: (state, action) => {
      state.loading = true;
    },
    [deleteTour.fulfilled]: (state, action) => {
      state.loading = false;
      const {
        arg: { id },
      } = action.meta;
      if (id) {
        state.userTours = state.userTours.filter((item) => item._id !== id);
        state.tours = state.tours.filter((item) => item._id !== id);
      }
    },
    [deleteTour.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.payload.message;
    },

  },
});

export const { setCurrentPage } = tourSlice.actions;

export default tourSlice.reducer;

tour/createTour is the action type string in this case. Whenever this function is dispatched from a component within our application, createAsyncThunk generates promise lifecycle action types using this string as a prefix:

pending: tour/createTour/pending
fulfilled: tour/createTour/fulfilled
rejected: tour/createTour/rejected

On its initial call, createAsyncThunk dispatches the tour/createTour/pending lifecycle action type. The payloadCreator then executes to return either a result or an error.
In the event of an error, tour/createTour/rejected is dispatched and createAsyncThunk should either return a rejected promise containing an Error instance, a plain descriptive message, or a resolved promise with a RejectWithValue argument as returned by the thunkAPI.rejectWithValue function (more on thunkAPI and error handling momentarily).
If our data fetch is successful, the posts/getPosts/fulfilled action type gets dispatched.

This is how I handle rest of the requests similar way.

Now we move on to the component section

By using useSelector and useDispatch from react-redux, we can read state from a Redux store and dispatch any action from a component, respectively.

Let’s set up a component to dispatch createTour when it mounts:
File AddEditTour.js:

import React, { useState, useEffect } from "react";
import { toast } from "react-toastify";
import { useNavigate, useParams } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { createTour, updateTour } from "../redux/features/tourSlice";
// import TagInput from '../components/TagInput'
import '../components/Tags.css';

const initialState = {
  title: "",
  description: "",
  tags: [],
};

export default function AddEditTour() {
  const [tourData, setTourData] = useState(initialState);
  const [tagErrMsg, setTagErrMsg] = useState(null);
  const { error, userTours } = useSelector((state) => ({
    ...state.tour,
  }));
  const { user } = useSelector((state) => ({ ...state.auth }));
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { id } = useParams();

  const { title, description, tags } = tourData;


  useEffect(() => {
    if (id) {
      const singleTour = userTours.find((tour) => tour._id === id);
      console.log(singleTour);
      setTourData({ ...singleTour });
    }

  }, [id]);

  useEffect(() => {
    error && toast.error(error);
  }, [error]);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!tags.length) {
      setTagErrMsg("Please provide some tags");
    }
    if (title && description && tags) {
      const updatedTourData = { ...tourData, name: user?.result?.name };

      if (!id) {
        dispatch(createTour({ updatedTourData, navigate, toast }));
      } else {
        dispatch(updateTour({ id, updatedTourData, toast, navigate }));
      }
      handleClear();
    }
  };

  const onInputChange = (e) => {
    const { name, value } = e.target;
    setTourData({ ...tourData, [name]: value });
  };

  const handleClear = () => {
    setTourData({ title: "", description: "", tags: [] });
  };

  const removeTagData = deleteTag => {

    setTourData({
      ...tourData,
      tags: tourData.tags.filter((tag) => tag !== deleteTag),
    });
  };

  const addTagData = event => {

    setTagErrMsg(null);
    if (event.target.value !== '') {
      setTourData({ ...tourData, tags: [...tourData.tags, event.target.value] });
      event.target.value = '';
    }
  };


  const onImageChange = event => {
    console.log(event.target.files[0]);
    let files = event.target.files;
    let reader = new FileReader();
    reader.readAsDataURL(files[0]);

    reader.onload = (e) => {

      setTourData({ ...tourData, imageFile: e.target.result })
    }


  };

  return (


    <>
     <div className="container-fluid">
        <div className="form-box">
          <h1>Add</h1>

          <form onSubmit={handleSubmit}>
            <div className="form-group">
              <label htmlFor="name">Name</label>
              <input className="form-control" id="name" type="text" value={title || ""} name="title" placeholder="Name" onChange={onInputChange} />
            </div>
            <div className="form-group">
              <label htmlFor="email">Image</label>
              <input className="form-control" accept="image/*" onChange={onImageChange}  type="file" />
            </div>
            <div className="form-group">
              <label htmlFor="message">Tag</label>
              <div className="tag-input">
                <ul className="tags">
                  {tags && tags.map((tag, index) => (
                    <li key={index} className="tag">
                      <span className="tag-title">{tag}</span>
                      <span
                        className="tag-close-icon"
                        onClick={() => removeTagData(tag)}
                      >
                        x
                      </span>
                    </li>
                  ))}
                </ul>
                <input
                  className="tag_input"
                  type="text"
                  onKeyUp={event => (event.key === 'Enter' ? addTagData(event) : null)}
                  placeholder="Press enter to add a tag"
                />
              </div>
            </div>
            <div className="form-group">
              <label htmlFor="message">Message</label>
              <textarea className="form-control" id="message" value={description} name="description" placeholder="description" onChange={onInputChange} />
            </div>

            <input className="btn btn-primary" type="submit" defaultValue="Submit" />
          </form></div>


      </div>
    </>
  )
}

First, we define and set initial state.

Next, we create handleInputChange() function to track the values of the input and set that state for changes.

We have local state and send the POST request to the Web API. It dispatchs async Thunk createTour() with useDispatch(). This hook returns a reference to the dispatch function from the Redux store.We check dashboard component then see the difference new data added.When we updated existence data click edit button we go through the same component AddEdittour.js file now we get id and conditionally render data and finally updated data.we have deleted in the same way.

file Dashboard.js

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";
import { deleteTour, getToursByUser } from "../redux/features/tourSlice";
import Spinner from "../components/Spinner";
import { toast } from "react-toastify";

export default function DashBoard() {

  const { user } = useSelector((state) => ({ ...state.auth }));
  const { userTours, loading } = useSelector((state) => ({ ...state.tour }));
  const userId = user?.result?._id;
  const dispatch = useDispatch();

  useEffect(() => {
    if (userId) {
      dispatch(getToursByUser(userId));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [userId]);

  const excerpt = (str) => {
    if (str.length > 40) {
      str = str.substring(0, 40) + " ...";
    }
    return str;
  };

  if (loading) {
    return <Spinner />;
  }

  const handleDelete = (id) => {
    if (window.confirm("Are you sure you want to delete this tour ?")) {
      dispatch(deleteTour({ id, toast }));
    }
  };

  return (
    <>

      <div className="container mt-5">
        <div className="row">
          <div className="col-md-12 text-center ">
          <Link to={`/add`} href="#" className="card-link">Add Data</Link>
            {userTours.length === 0 && (
              <h3 className="text-center">No tour available with the user: {user?.result?.name}</h3>

            )}

            {userTours.length > 0 && (
              <>
                <h5 className="text-center">Dashboard: {user?.result?.name}</h5>
                <hr style={{ maxWidth: "570px" }} />
              </>
            )}
          </div>

          {userTours &&
            userTours.map((item,index) => (
              <div className='col-md-3' key={index}>
                <div className="card mb-3" >
                  <img src={item.imageFile} className="card-img-top img-thumbnail rounded" alt={item.title} />
                  <div className="card-body">
                    <h5 className="card-title">{item.title}</h5>
                    <p className="card-text"> {excerpt(item.description)}</p>
                    <Link to={`/edit/${item._id}`} href="#" className="card-link">Edit</Link>
                    <Link  to="#" className="card-link" onClick={() => handleDelete(item._id)}>Delete</Link>
                    <Link to={`/view/${item._id}`} href="#" className="card-link">View</Link>

                  </div>
                </div>

              </div>
            ))}

        </div>
      </div>

    </>
  )
}

I hope you guys liked this simple Redux-toolkit crud operation.You can find complete code repository presented in this article at GitHub.

Using axios in Vue.js with separate service?

Julfikar Haidar — Mon, 13 Dec 2021 16:57:33 +0000

Why is this necessary?

It is little bit messy when so many API calls in a single component
You make your components bigger and filled with lot more logic that has nothing to do with the component itself which violates Single Responsibility Principle(SRP).Single Responsibility Principle is one of the most important aspect in writing good maintainable code.Writing great code is an art, but some principles can always help give your development work the direction it needs to head towards to produce robust and maintainable software.
Same API methods could be used in different components which may causes code duplication and violates DRY principle.
You will need to manually change all the places while you are going to modified your API.Really it's time consuming.
OK,let's get started...

Service.js



import axios from "@/axios";

export async function getUserList() {

    const response = await axios
        .get(`/sign-up`)
    return response.data.users;

}

export async function userPost(rcv_data) {
    const response = await axios
        .post(`/sign-up/`, rcv_data)
    return response.data;

}
export async function getUserData(id, rcv_data) {
    const response = await axios
        .get(`/sign-up/${id}/`, rcv_data)
    return response.data.user;

}

export async function userUpdate(id, rcv_data) {
    const response = await axios
        .put(`/sign-up/${id}`, rcv_data)
    return response.data;

}
export async function userDelete(id) {
    const response = await axios
        .delete(`/sign-up/${id}`)
    return response.data;

}

In this scenario

You can simply handle module wise API service in your component.
One single module all API located in one place so it's easier to make any changes and resuse them in different component without duplicating code.

UserList.vue



<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1 class="text-center">User List</h1>
        <router-link to="/create-user">
          <button type="submit" class="btn btn-primary">Cerate User</button>
        </router-link>
        <table class="table table-striped table-dark">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">First Name</th>
              <th scope="col">Last Name</th>
              <th scope="col">Email</th>
              <th scope="col">Action</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(user, i) in user_list" :key="i">
              <th scope="row">{{ i }}</th>
              <td>{{ user.firstName }}</td>
              <td>{{ user.lastName }}</td>
              <td>{{ user.email }}</td>
              <td>
                <router-link
                  :to="{
                    name: 'EditUser',
                    params: { id: user.id },
                  }"
                >
                  <button type="submit" class="btn btn-primary">Edit</button>
                </router-link>

                <button
                  @click="userDelete(user.id)"
                  type="submit"
                  class="btn btn-danger"
                >
                  Delete
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserList, userDelete } from "./Service";
export default {
  name: "UserList",
  data() {
    return {
      user_list: null,
    };
  },
  methods: {
    getUser: function () {
      getUserList().then((result) => {
        console.log("45", result);
        this.user_list = result;
      });
    },
    userDelete: function (id) {
      userDelete(id)
        .then((response) => {
          console.log("response", response.message);
          this.getUser();
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
  },
  created() {
    this.getUser();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

In our component we are just dealing our data.If something went wrong simply return promise.

EditUser.vue



<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1 class="text-center">User List</h1>
        <form>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input
              type="email"
              class="form-control"
              v-model="input_data.email"
              id="exampleInputEmail1"
              aria-describedby="emailHelp"
              placeholder="Enter email"
            />
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Fist Name</label>
            <input
              type="firstName"
              class="form-control"
              placeholder="First Name"
              v-model="input_data.firstName"
            />
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Last Name</label>
            <input
              type="last_name"
              class="form-control"
              placeholder="Last Name"
              v-model="input_data.lastName"
            />
          </div>

          <button
            type="submit"
            class="btn btn-primary"
            @click.prevent="userUpdate"
          >
            Submit
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserData, userUpdate } from "./Service";
export default {
  name: "EditUser",
  data() {
    return {
      input_data: {
        firstName: null,
        lastName: null,
        email: null,
      },
    };
  },
  methods: {
    getUserData: function () {
      getUserData(this.$route.params.id, this.input_data)
        .then((response) => {
          console.log("response", response);
          this.input_data.firstName = response.firstName;
          this.input_data.lastName = response.lastName;
          this.input_data.email = response.email;
          // this.$router.push("/");
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
    userUpdate: function () {
      userUpdate(this.$route.params.id, this.input_data)
        .then((response) => {
          // console.log('response',response.message)
          this.$router.push("/");
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
  },
  created() {
    this.getUserData();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Epilogue

I hope this helps you.Do not hesitate to leave a comment if you have any query feel free to ask.Thank you for reading.Happy coding...

https://github.com/Julfikar-Haidar/separate_service

Rest APIs example with Sequelize ORM with Node.js and Express

Julfikar Haidar — Tue, 29 Jun 2021 14:25:01 +0000

This article assumes you have a fair knowledge of the basic setup of project and connection sequelize database.

Let's make a sequelize-app Node application and install Sequelize. First off all,create a directory for our project, enter it, and create a project with the default settings:



$ mkdir sequelize-app 
$ cd sequelize-app

Initialize a NodeJS application by running the following command:



$ npm init -y

This will create a package.json file with a basic config. You can manually add the configuration by omitting the -y flag.

Next we'll create the application file with a basic Express server. Let's call it app.js to and run the following command line within the project folder.



$ npm i express

Add the following codes in the newly created app.js file



const express = require('express');
const morgan = require('morgan');
const bodyParser = require('body-parser');


// router import
const user = require('./routes/user')




const app = express();


app.use(express.json())
app.use(morgan('tiny'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));


// Routing
app.use('/api', user)


// simple route
app.get("/", (req, res) => {
  res.json({ message: "Welcome to  application." });
});



// set port, listen for requests
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}.`);
});

Morgan is a HTTP request logger middleware for Node. js. It simplifies the process of logging requests to your application



$ npm i morgan

In order to get access to the post data we have to use body-parser . Basically what the body-parser is which allows express to read the body and then parse that into a Json object that we can understand



$ npm install body-parser

When we make changes, we'll have to kill the process and restart to see the effect. So, we'll install a package that will save us that stress: Nodemon



$ npm i nodemon

Edit scripts in package.json file to look like this:



"scripts": {
    "start": "nodemon app.js"
  },

Sequelize Setup in Express JS App
In this article I will be using Postgres DB but you can use any DB you are comfortable with such as MySQL, SQLite, etc.



$ npm install -g sequelize-cli

$ npm install sequelize-cli

Install Sequelize and Postgres packages by running the command:



$ npm i sequelize pg

Next, we initialize Sequelize in the project.



$ sequelize init

The command creates the necessary folders and files for Sequelize ORM.

If you look at sequelize-app/models/index.js,Let's look the snnipet



'use strict';

const fs = require('fs');
const path = require('path');
const Sequelize = require('sequelize');
const basename = path.basename(__filename);
const env = process.env.NODE_ENV || 'development';
const config = require(__dirname + '/../config/config.json')[env];
const db = {};

let sequelize;
if (config.use_env_variable) {
  sequelize = new Sequelize(process.env[config.use_env_variable], config);
} else {
  sequelize = new Sequelize(config.database, config.username, config.password, config);
}

fs
  .readdirSync(__dirname)
  .filter(file => {
    return (file.indexOf('.') !== 0) && (file !== basename) && (file.slice(-3) === '.js');
  })
  .forEach(file => {
    const model = require(path.join(__dirname, file))(sequelize, Sequelize.DataTypes);
    db[model.name] = model;
  });

Object.keys(db).forEach(modelName => {
  if (db[modelName].associate) {
    db[modelName].associate(db);
  }
});

db.sequelize = sequelize;
db.Sequelize = Sequelize;

module.exports = db;

Create a DB and update the config/config.json file accordingly:
We really care about development process change username, password and database,dialect name don't headache other process



{
  "development": {
    "username": "dream99",
    "password": "dream99",
    "database": "sequlizeApp",
    "host": "127.0.0.1",
    "dialect": "postgres"
  },
  "test": {
    "username": "root",
    "password": null,
    "database": "database_test",
    "host": "127.0.0.1",
    "dialect": "postgres"
  },
  "production": {
    "username": "root",
    "password": null,
    "database": "database_production",
    "host": "127.0.0.1",
    "dialect": "postgres"
  }
}

All is now set to create models and migration.
Let's create a model and migration for users.

Run the command:



npx sequelize-cli model:generate --name User --attributes firstName:string,lastName:string,email:string

This command creates a User model and migration table in the corresponding folders. The attributes are the fields we want to have on the table.

The user model looks like this:



'use strict';
const {
  Model
} = require('sequelize');
module.exports = (sequelize, DataTypes) => {
  class User extends Model {
    /**
     * Helper method for defining associations.
     * This method is not a part of Sequelize lifecycle.
     * The `models/index` file will call this method automatically.
     */
    static associate(models) {
      // define association here
    }
  };
  User.init({
    firstName: DataTypes.STRING,
    lastName: DataTypes.STRING,
    email: DataTypes.STRING
  }, {
    sequelize,
    modelName: 'User',
  });
  return User;
};

Next, we run the migration to create the DB tables:



sequelize db:migrate

And migrations like this:



'use strict';
module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.createTable('Users', {
      id: {
        allowNull: false,
        autoIncrement: true,
        primaryKey: true,
        type: Sequelize.INTEGER
      },
      firstName: {
        type: Sequelize.STRING
      },
      lastName: {
        type: Sequelize.STRING
      },
      email: {
        type: Sequelize.STRING
      },
      createdAt: {
        allowNull: false,
        type: Sequelize.DATE
      },
      updatedAt: {
        allowNull: false,
        type: Sequelize.DATE
      }
    });
  },
  down: async (queryInterface, Sequelize) => {
    await queryInterface.dropTable('Users');
  }
};

Suppose we want to insert some data into a few tables by default. Seed files are some change in data that can be used to populate database table with sample data or test data.

Let's create a seed file which will add a demo user to our User table following command:



$ npx sequelize-cli seed:generate --name demo-user

Seed file look like this :



'use strict';
module.exports = {
  up: async (queryInterface, Sequelize) => {



      await queryInterface.bulkInsert('Users', [{
        firstName: 'John',
        lastName: 'Doe',
        email: 'example@example.com',
        createdAt: new Date(),
        updatedAt: new Date()
      }], {});

  },

  down: async (queryInterface, Sequelize) => {

      await queryInterface.bulkDelete('Users', null, {});

  }
};

In last step you have create a seed file. It's still not committed to database. To do that we need to run a simple command.



$ npx sequelize-cli db:seed:all

Our database is now created.Now let's make Route and Controllers
Create a controllers folder in sequelize-app and add user.js file to it. That's where our user management logic will reside.
Add the following code to create user controller with logic:



const User = require('../models').User





module.exports = {

    // create account
    signUp: (req, res) => {
       let { firstName, lastName, email} = req.body
       User.create({
           firstName,
           lastName,
           email
       }).then((user) => {
           return res.status(201).json({
               "message": "User created successfully",
                user
           }).catch(err => {
               return res.status(400).json({err})
           })
       })
    },

    updateSignUp: (req, res) => {
        let { firstName, lastName, email} = req.body
        let id = req.params.id

        User.findOne({
            where: {id:id}
        }).then( user => {
            if (user){
                user.update({firstName, lastName, email})
                .then((updateUser) => {
                    return res.status(202).json({
                        "message": "User updated successfully",
                         updateUser
                    })
                })
            }else{
                return res.status(206).json({
                    "message": "User not found"
                })
            }
        }).catch(error => {
            return res.status(400).json({
                "error": error
            })
        })
    },


    // get all users

    getAllUsers: ( req, res ) => {

        User.findAll( {
            attributes: ['id', 'firstName', 'lastName', 'email'],
            limit: 5,
            order: [['id', 'DESC']]
        }).then(users => {
            return res.status(200).json({
                users
            })
        }).catch(err => {
            return res.status(400).json({err})
        })
    },

    // get single user by id

    getSingleUser:(req, res) => {
        let id = req.params.id

        User.findByPk(id)
        .then((user) => {
            return res.status(200).json({user})
        }).catch(err => {
            return res.status(400).json({err})
        })
    },

// delete user by id

deleteSingleUser: (req, res) => {
    let id = req.params.id

    User.destroy({
        where: {id: id}
    }).then(() =>{
        return res.status(200).json({
            "message": "User Deleted successfully"
        })
    }).catch(err =>{
        return res.status(400).json({error})
    })

},

// delete all users

deleteAllUsers: (req, res) => {
    User.destroy({
        truncate: true
      }).then(() => {
        return res.status(200).json({
            success: true,
            "message": "All Users deleted"
        })
      }).catch(err => {
          return res.status(400).json({
              err
          })
      })
},






}

Create the routes folder with user.js file inside and add the following code:



const express = require('express')
const router = express.Router()
const {
     signUp,
     updateSignUp ,
     getAllUsers,
     getSingleUser,
     deleteSingleUser,
     deleteAllUsers,

    } = require('../controllers/user')

// -------------------------CUSTOM ROUTE-------------------------
router.post('/sign-up',
    signUp
)

router.put('/sign-up/:id',
    updateSignUp
)

router.get('/sign-up/',
    getAllUsers
)

router.get('/sign-up/:id',
getSingleUser
)

router.delete('/sign-up/:id',
deleteSingleUser
)

router.delete('/sign-up/',
deleteAllUsers
)



// -------------------------EXPORT ROUTER-------------------------
module.exports = router

Let's take a look at some static images postman:
Get All user:

Get single user:

Actually this is basic set-up of Express JS REST API, Postgres, and Sequelize ORM

If you have any information you can comment below please.Happy coding...
Feel free to check out the code on:
https://github.com/Julfikar-Haidar/sequelize-app

How to build reusable layouts in React JS with Router

Julfikar Haidar — Fri, 18 Dec 2020 06:21:50 +0000

This is a common problem I couldn't do the common layout when I started to learn React. The problem is getting bigger as the scope of work increases. That is why there is a need for a common layout and we will use it again and again. Let's get started

Here is a simplified implementation of what I did.

This layout component will accept to get props such as title, description, className, children by default use some property here but we will be able to pass these properties from any other bases where we use this layout and that way we can dynamically display these content. We put inside single div and title, description these are headings but they will have the entire content. So with the last name of let's say let's asset class name as well so you might want different layout for different pages. Here classname send as props and content avaiable in children props . So this our layout now we should be able to use this layout any of the pages.Let's try in the Home page to begin with.

So let's say load from home page then we can use layout instead of using the div all we can do in layout. Now pass the title,desciption and send the content at the moment let's send anything let's just leave empty.Now if you go to the home page you can see we have the target achieve

So this way you can use this component and use any other component as your need For example if you don't send anything as props then you'll see the default title and description of what we have given

The similar way I use on another page before we do that let's further to go on and make it.

Here the code base whatever pass as props to get it and show output will be shown as we send.

RouterJs file here

If I made a mistake forgive me for seeking advice on how to do a better way thank you guy's and let's make it easy.

https://github.com/Julfikar-Haidar