Bootstrap 4ReactjsReactjs Crud

Create Beautiful User Crud Template in React js Application

Create Beautiful User Crud Template in React js Application

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Create Beautiful User Crud Template in React js Application.

Guys in this post we will cover below things:

  1. Create Responsive Template in React Js.
  2. React js Responsive Modal Popup Form.

Guys please watch below video to check react crud template working and responsiveness:

React Crud Template

Create Beautiful User Crud Template in React js Application
Create Beautiful User Crud Template in React js Application
Reactjs User Crud Template Add User Popup
Reactjs User Crud Template Add User Popup

For reactjs new comers, please check the below link:

Reactjs Basic Tutorials


Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

npx create-react-app reactcrudtemplate

cd reactcrudtemplate

2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

Guys I use jquery just because of bootstrap so please don’t mind or you can avoid it:

npm install bootstrap --save

npm install jquery --save //for bootstrap modal popup

npm start //For start project again

3. Finally for the main output, we need to add below code into our reactcrudtemplate/src/App.js file or if you have fresh setup then you can replace reactcrudtemplate/src/App.js file code with below code:

import React from "react";

import './App.css'
//for bootstrap styles and scripts
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';


class App extends React.Component {
  render() {
    return (
      <div className="main_container">
          <div class="container">
        <div class="row flex-lg-nowrap">
        <div class="col-12 col-lg-auto mb-3" style={{width: "200px"}}>
            <div class="card p-3">
            <div class="e-navlist e-navlist--active-bg">
                <ul class="nav">
                <li class="nav-item"><a class="nav-link px-2 active" href="#"><i class="fa fa-fw fa-bar-chart mr-1"></i><span>Overview</span></a></li>
                <li class="nav-item"><a class="nav-link px-2" href="#"><i class="fa fa-fw fa-th mr-1"></i><span>CRUD</span></a></li>
                <li class="nav-item"><a class="nav-link px-2" href="#"><i class="fa fa-fw fa-cog mr-1"></i><span>Settings</span></a></li>
                </ul>
            </div>
            </div>
        </div>

        <div class="col">
            <div class="e-tabs mb-3 px-3">
            <ul class="nav nav-tabs">
                <li class="nav-item"><a class="nav-link active" href="#">Users</a></li>
            </ul>
            </div>

            <div class="row flex-lg-nowrap">
            <div class="col mb-3">
                <div class="e-panel card">
                <div class="card-body">
                    <div class="card-title">
                    <h6 class="mr-2"><span>Users</span><small class="px-1">Details</small></h6>
                    </div>
                    <div class="e-table">
                    <div class="table-responsive table-lg mt-3">
                        <table class="table table-bordered">
                        <thead>
                            <tr>
                            <th class="align-top">
                                <div class="custom-control custom-control-inline custom-checkbox custom-control-nameless m-0">
                                <input type="checkbox" class="custom-control-input" id="all-items" />
                                <label class="custom-control-label" for="all-items"></label>
                                </div>
                            </th>
                            <th>Photo</th>
                            <th class="max-width">Name</th>
                            <th class="sortable">Date</th>
                            <th> </th>
                            <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                            <td class="align-middle">
                                <div class="custom-control custom-control-inline custom-checkbox custom-control-nameless m-0 align-top">
                                <input type="checkbox" class="custom-control-input" id="item-1" />
                                <label class="custom-control-label" for="item-1"></label>
                                </div>
                            </td>
                            <td class="align-middle text-center">
                                <div class="bg-light d-inline-flex justify-content-center align-items-center align-top itemdiv" ><i class="fa fa-fw fa-photo" ></i></div>
                            </td>
                            <td class="text-nowrap align-middle">Jssa Jas</td>
                            <td class="text-nowrap align-middle"><span>09 Apr 2021</span></td>
                            <td class="text-center align-middle"><i class="fa fa-fw text-secondary cursor-pointer fa-toggle-on"></i></td>
                            <td class="text-center align-middle">
                                <div class="btn-group align-top">
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button" data-toggle="modal" data-target="#user-form-modal">Edit</button>
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button"><i class="fa fa-trash"></i></button>
                                </div>
                            </td>
                            </tr>
                            <tr>
                            <td class="align-middle">
                                <div class="custom-control custom-control-inline custom-checkbox custom-control-nameless m-0 align-top">
                                <input type="checkbox" class="custom-control-input" id="item-2" />
                                <label class="custom-control-label" for="item-2"></label>
                                </div>
                            </td>
                            <td class="align-middle text-center">
                                <div class="bg-light d-inline-flex justify-content-center align-items-center align-top itemdiv" ><i class="fa fa-fw fa-photo" ></i></div>
                            </td>
                            <td class="text-nowrap align-middle">Pauline Jas</td>
                            <td class="text-nowrap align-middle"><span>26 Jan 2021</span></td>
                            <td class="text-center align-middle"><i class="fa fa-fw text-secondary cursor-pointer fa-toggle-off"></i></td>
                            <td class="text-center align-middle">
                                <div class="btn-group align-top">
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button" data-toggle="modal" data-target="#user-form-modal">Edit</button>
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button"><i class="fa fa-trash"></i></button>
                                </div>
                            </td>
                            </tr>
                            <tr>
                            <td class="align-middle">
                                <div class="custom-control custom-control-inline custom-checkbox custom-control-nameless m-0 align-top">
                                <input type="checkbox" class="custom-control-input" id="item-3" />
                                <label class="custom-control-label" for="item-3"></label>
                                </div>
                            </td>
                            <td class="align-middle text-center">
                                <div class="bg-light d-inline-flex justify-content-center align-items-center align-top itemdiv" ><i class="fa fa-fw fa-photo" ></i></div>
                            </td>
                            <td class="text-nowrap align-middle">Sherilyn Metzel</td>
                            <td class="text-nowrap align-middle"><span>27 Jan 2021</span></td>
                            <td class="text-center align-middle"><i class="fa fa-fw text-secondary cursor-pointer fa-toggle-on"></i></td>
                            <td class="text-center align-middle">
                                <div class="btn-group align-top">
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button" data-toggle="modal" data-target="#user-form-modal">Edit</button>
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button"><i class="fa fa-trash"></i></button>
                                </div>
                            </td>
                            </tr>
                            <tr>
                            <td class="align-middle">
                                <div class="custom-control custom-control-inline custom-checkbox custom-control-nameless m-0 align-top">
                                <input type="checkbox" class="custom-control-input" id="item-4" />
                                <label class="custom-control-label" for="item-4"></label>
                                </div>
                            </td>
                            <td class="align-middle text-center">
                                <div class="bg-light d-inline-flex justify-content-center align-items-center align-top itemdiv" ><i class="fa fa-fw fa-photo" ></i></div>
                            </td>
                            <td class="text-nowrap align-middle">Terrie Boaler</td>
                            <td class="text-nowrap align-middle"><span>20 Jan 2021</span></td>
                            <td class="text-center align-middle"><i class="fa fa-fw text-secondary cursor-pointer fa-toggle-on"></i></td>
                            <td class="text-center align-middle">
                                <div class="btn-group align-top">
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button" data-toggle="modal" data-target="#user-form-modal">Edit</button>
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button"><i class="fa fa-trash"></i></button>
                                </div>
                            </td>
                            </tr>
                            <tr>
                            <td class="align-middle">
                                <div class="custom-control custom-control-inline custom-checkbox custom-control-nameless m-0 align-top">
                                <input type="checkbox" class="custom-control-input" id="item-5" />
                                <label class="custom-control-label" for="item-5"></label>
                                </div>
                            </td>
                            <td class="align-middle text-center">
                                <div class="bg-light d-inline-flex justify-content-center align-items-center align-top itemdiv" ><i class="fa fa-fw fa-photo" ></i></div>
                            </td>
                            <td class="text-nowrap align-middle">Rutter Pude</td>
                            <td class="text-nowrap align-middle"><span>13 Jan 2021</span></td>
                            <td class="text-center align-middle"><i class="fa fa-fw text-secondary cursor-pointer fa-toggle-off"></i></td>
                            <td class="text-center align-middle">
                                <div class="btn-group align-top">
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button" data-toggle="modal" data-target="#user-form-modal">Edit</button>
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button"><i class="fa fa-trash"></i></button>
                                </div>
                            </td>
                            </tr>
                            <tr>
                            <td class="align-middle">
                                <div class="custom-control custom-control-inline custom-checkbox custom-control-nameless m-0 align-top">
                                <input type="checkbox" class="custom-control-input" id="item-6" />
                                <label class="custom-control-label" for="item-6"></label>
                                </div>
                            </td>
                            <td class="align-middle text-center">
                                <div class="bg-light d-inline-flex justify-content-center align-items-center align-top itemdiv" ><i class="fa fa-fw fa-photo" ></i></div>
                            </td>
                            <td class="text-nowrap align-middle">Clifford Benjamin</td>
                            <td class="text-nowrap align-middle"><span>25 Jan 2020</span></td>
                            <td class="text-center align-middle"><i class="fa fa-fw text-secondary cursor-pointer fa-toggle-on"></i></td>
                            <td class="text-center align-middle">
                                <div class="btn-group align-top">
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button" data-toggle="modal" data-target="#user-form-modal">Edit</button>
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button"><i class="fa fa-trash"></i></button>
                                </div>
                            </td>
                            </tr>
                            <tr>
                            <td class="align-middle">
                                <div class="custom-control custom-control-inline custom-checkbox custom-control-nameless m-0 align-top">
                                <input type="checkbox" class="custom-control-input" id="item-7" />
                                <label class="custom-control-label" for="item-7"></label>
                                </div>
                            </td>
                            <td class="align-middle text-center">
                                <div class="bg-light d-inline-flex justify-content-center align-items-center align-top itemdiv" ><i class="fa fa-fw fa-photo" ></i></div>
                            </td>
                            <td class="text-nowrap align-middle">Thedric Romans</td>
                            <td class="text-nowrap align-middle"><span>12 Jan 2019</span></td>
                            <td class="text-center align-middle"><i class="fa fa-fw text-secondary cursor-pointer fa-toggle-off"></i></td>
                            <td class="text-center align-middle">
                                <div class="btn-group align-top">
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button" data-toggle="modal" data-target="#user-form-modal">Edit</button>
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button"><i class="fa fa-trash"></i></button>
                                </div>
                            </td>
                            </tr>
                            <tr>
                            <td class="align-middle">
                                <div class="custom-control custom-control-inline custom-checkbox custom-control-nameless m-0 align-top">
                                <input type="checkbox" class="custom-control-input" id="item-8" />
                                <label class="custom-control-label" for="item-8"></label>
                                </div>
                            </td>
                            <td class="align-middle text-center">
                                <div class="bg-light d-inline-flex justify-content-center align-items-center align-top itemdiv" ><i class="fa fa-fw fa-photo" ></i></div>
                            </td>
                            <td class="text-nowrap align-middle">Haily Carthew</td>
                            <td class="text-nowrap align-middle"><span>27 Jan 2018</span></td>
                            <td class="text-center align-middle"><i class="fa fa-fw text-secondary cursor-pointer fa-toggle-on"></i></td>
                            <td class="text-center align-middle">
                                <div class="btn-group align-top">
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button" data-toggle="modal" data-target="#user-form-modal">Edit</button>
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button"><i class="fa fa-trash"></i></button>
                                </div>
                            </td>
                            </tr>
                            <tr>
                            <td class="align-middle">
                                <div class="custom-control custom-control-inline custom-checkbox custom-control-nameless m-0 align-top">
                                <input type="checkbox" class="custom-control-input" id="item-9" />
                                <label class="custom-control-label" for="item-9"></label>
                                </div>
                            </td>
                            <td class="align-middle text-center">
                                <div class="bg-light d-inline-flex justify-content-center align-items-center align-top itemdiv" ><i class="fa fa-fw fa-photo" ></i></div>
                            </td>
                            <td class="text-nowrap align-middle">Dorothea Joicey</td>
                            <td class="text-nowrap align-middle"><span>12 Dec 2017</span></td>
                            <td class="text-center align-middle"><i class="fa fa-fw text-secondary cursor-pointer fa-toggle-on"></i></td>
                            <td class="text-center align-middle">
                                <div class="btn-group align-top">
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button" data-toggle="modal" data-target="#user-form-modal">Edit</button>
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button"><i class="fa fa-trash"></i></button>
                                </div>
                            </td>
                            </tr>
                            <tr>
                            <td class="align-middle">
                                <div class="custom-control custom-control-inline custom-checkbox custom-control-nameless m-0 align-top">
                                <input type="checkbox" class="custom-control-input" id="item-10" />
                                <label class="custom-control-label" for="item-10"></label>
                                </div>
                            </td>
                            <td class="align-middle text-center">
                                <div class="bg-light d-inline-flex justify-content-center align-items-center align-top itemdiv" ><i class="fa fa-fw fa-photo" ></i></div>
                            </td>
                            <td class="text-nowrap align-middle">Mikaela Pinel</td>
                            <td class="text-nowrap align-middle"><span>10 Dec 2017</span></td>
                            <td class="text-center align-middle"><i class="fa fa-fw text-secondary cursor-pointer fa-toggle-off"></i></td>
                            <td class="text-center align-middle">
                                <div class="btn-group align-top">
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button" data-toggle="modal" data-target="#user-form-modal">Edit</button>
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button"><i class="fa fa-trash"></i></button>
                                </div>
                            </td>
                            </tr>
                            <tr>
                            <td class="align-middle">
                                <div class="custom-control custom-control-inline custom-checkbox custom-control-nameless m-0 align-top">
                                <input type="checkbox" class="custom-control-input" id="item-11" />
                                <label class="custom-control-label" for="item-11"></label>
                                </div>
                            </td>
                            <td class="align-middle text-center">
                                <div class="bg-light d-inline-flex justify-content-center align-items-center align-top itemdiv" ><i class="fa fa-fw fa-photo" ></i></div>
                            </td>
                            <td class="text-nowrap align-middle">Donnell Farries</td>
                            <td class="text-nowrap align-middle"><span>03 Dec 2017</span></td>
                            <td class="text-center align-middle"><i class="fa fa-fw text-secondary cursor-pointer fa-toggle-on"></i></td>
                            <td class="text-center align-middle">
                                <div class="btn-group align-top">
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button" data-toggle="modal" data-target="#user-form-modal">Edit</button>
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button"><i class="fa fa-trash"></i></button>
                                </div>
                            </td>
                            </tr>
                            <tr>
                            <td class="align-middle">
                                <div class="custom-control custom-control-inline custom-checkbox custom-control-nameless m-0 align-top">
                                <input type="checkbox" class="custom-control-input" id="item-12" />
                                <label class="custom-control-label" for="item-12"></label>
                                </div>
                            </td>
                            <td class="align-middle text-center">
                                <div class="bg-light d-inline-flex justify-content-center align-items-center align-top itemdiv" ><i class="fa fa-fw fa-photo" ></i></div>
                            </td>
                            <td class="text-nowrap align-middle">Letizia Puncher</td>
                            <td class="text-nowrap align-middle"><span>09 Dec 2017</span></td>
                            <td class="text-center align-middle"><i class="fa fa-fw text-secondary cursor-pointer fa-toggle-off"></i></td>
                            <td class="text-center align-middle">
                                <div class="btn-group align-top">
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button" data-toggle="modal" data-target="#user-form-modal">Edit</button>
                                    <button class="btn btn-sm btn-outline-secondary badge" type="button"><i class="fa fa-trash"></i></button>
                                </div>
                            </td>
                            </tr>
                        </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-center">
                        <ul class="pagination mt-3 mb-0">
                        <li class="disabled page-item"><a href="#" class="page-link">‹</a></li>
                        <li class="active page-item"><a href="#" class="page-link">1</a></li>
                        <li class="page-item"><a href="#" class="page-link">2</a></li>
                        <li class="page-item"><a href="#" class="page-link">3</a></li>
                        <li class="page-item"><a href="#" class="page-link">4</a></li>
                        <li class="page-item"><a href="#" class="page-link">5</a></li>
                        <li class="page-item"><a href="#" class="page-link">›</a></li>
                        <li class="page-item"><a href="#" class="page-link">»</a></li>
                        </ul>
                    </div>
                    </div>
                </div>
                </div>
            </div>
            <div class="col-12 col-lg-3 mb-3">
                <div class="card">
                <div class="card-body">
                    <div class="text-center px-xl-3">
                    <button class="btn btn-success btn-block" type="button" data-toggle="modal" data-target="#user-form-modal">New User</button>
                    </div>
                    <hr class="my-3" />
                    <div class="e-navlist e-navlist--active-bold">
                    <ul class="nav">
                        <li class="nav-item active"><a href="" class="nav-link"><span>All</span>&nbsp;<small>/&nbsp;32</small></a></li>
                        <li class="nav-item"><a href="" class="nav-link"><span>Active</span>&nbsp;<small>/&nbsp;16</small></a></li>
                        <li class="nav-item"><a href="" class="nav-link"><span>Selected</span>&nbsp;<small>/&nbsp;0</small></a></li>
                    </ul>
                    </div>
                    <hr class="my-3"/>
                    <div>
                    <div class="form-group">
                        <label>Date from - to:</label>
                        <div>
                        <input id="dates-range" class="form-control flatpickr-input" placeholder="01 May 21 - 27 May 21" type="text" readonly="readonly" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Search by Name:</label>
                        <div><input class="form-control w-100" type="text" placeholder="Name" value="" /></div>
                    </div>
                    </div>
                    <hr class="my-3" />
                    <div class="">
                    <label>Status:</label>
                    <div class="px-2">
                        <div class="custom-control custom-radio">
                        <input type="radio" class="custom-control-input" name="user-status" id="users-status-disabled" />
                        <label class="custom-control-label" for="users-status-disabled">Disabled</label>
                        </div>
                    </div>
                    <div class="px-2">
                        <div class="custom-control custom-radio">
                        <input type="radio" class="custom-control-input" name="user-status" id="users-status-active" />
                        <label class="custom-control-label" for="users-status-active">Active</label>
                        </div>
                    </div>
                    <div class="px-2">
                        <div class="custom-control custom-radio">
                        <input type="radio" class="custom-control-input" name="user-status" id="users-status-any" checked="" />
                        <label class="custom-control-label" for="users-status-any">Any</label>
                        </div>
                    </div>
                    </div>
                </div>
                </div>
            </div>
            </div>
 
            {/* Moda */}          
            <div class="modal fade" role="dialog" tabindex="-1" id="user-form-modal">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create User</h5>
                    <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="py-1">
                    <form class="form" novalidate="">
                        <div class="row">
                        <div class="col">
                            <div class="row">
                            <div class="col">
                                <div class="form-group">
                                <label>Full Name</label>
                                <input class="form-control" type="text" name="name" placeholder="John Smith" value="John Smith" />
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                <label>Username</label>
                                <input class="form-control" type="text" name="username" placeholder="johnny.s" value="johnny.s" />
                                </div>
                            </div>
                            </div>
                            <div class="row">
                            <div class="col">
                                <div class="form-group">
                                <label>Email</label>
                                <input class="form-control" type="text" placeholder="user@example.com" />
                                </div>
                            </div>
                            </div>
                            <div class="row">
                            <div class="col mb-3">
                                <div class="form-group">
                                <label>About</label>
                                <textarea class="form-control" rows="5" placeholder="My Bio"></textarea>
                                </div>
                            </div>
                            </div>
                        </div>
                        </div>
                        <div class="row">
                        <div class="col-12 col-sm-6 mb-3">
                            <div class="mb-2"><b>Change Password</b></div>
                            <div class="row">
                            <div class="col">
                                <div class="form-group">
                                <label>Current Password</label>
                                <input class="form-control" type="password" placeholder="••••••" />
                                </div>
                            </div>
                            </div>
                            <div class="row">
                            <div class="col">
                                <div class="form-group">
                                <label>New Password</label>
                                <input class="form-control" type="password" placeholder="••••••" />
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                <label>Confirm <span class="d-none d-xl-inline">Password</span></label>
                                <input class="form-control" type="password" placeholder="••••••" /></div>
                            </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-5 offset-sm-1 mb-3">
                            <div class="mb-2"><b>Keeping in Touch</b></div>
                            <div class="row">
                            <div class="col">
                                <label>Email Notifications</label>
                                <div class="custom-controls-stacked px-2">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="notifications-blog" checked="" />
                                    <label class="custom-control-label" for="notifications-blog">Blog posts</label>
                                </div>
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="notifications-news" checked="" />
                                    <label class="custom-control-label" for="notifications-news">Newsletter</label>
                                </div>
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="notifications-offers" checked="" />
                                    <label class="custom-control-label" for="notifications-offers">Personal Offers</label>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        </div>
                        <div class="row">
                        <div class="col d-flex justify-content-end">
                            <button class="btn btn-primary" type="submit">Save Changes</button>
                        </div>
                        </div>
                    </form>

                    </div>
                </div>
                </div>
            </div>
            </div>
        </div>
        </div>
        </div>
      </div>
    );
  }
}
export default App;

4. Now friends, we need to add below code into our reactcrudtemplate/src/App.css file for some custom styling:

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
body{
    margin-top:20px!important;
    background:#f8f8f8!important;
}
.fa-photo
{
    opacity: 0.8;
}
.itemdiv
{
    width: 35px; height: 35px; border-radius: 3px;
}

Now we are done with html friends and in future I will come with full functional as well with MySQL backend. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

2 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.