1612042200

Admin-panel using Reactjs, ExpressJs, NodeJs, MongoDB and Bootstrap

MERN-Admin-Panel

Features

Login-page and Basic layout design done by using Bootstrap
JWT and Passport for Authentication
Datatable with Client-side & Server Side Pagination
Multi-sort
Filters
Minimal design
Fully controllable via optional props and callbacks

Demo

Click Here

Available Script

To start server and client simultaneously

npm run dev

To Build react application

cd client and run

npm run build

Datatable sample usage with static data

import React, { Component, Fragment } from 'react';
import { render} from 'react-dom';
import ReactDatatable from '@ashvin27/react-datatable';

class App extends Component {
    constructor(props) {
        super(props);
        this.columns = [
            {
                key: "name",
                text: "Name",
                className: "name",
                align: "left",
                sortable: true,
            },
            {
                key: "address",
                text: "Address",
                className: "address",
                align: "left",
                sortable: true
            },
            {
                key: "postcode",
                text: "Postcode",
                className: "postcode",
                sortable: true
            },
            {
                key: "rating",
                text: "Rating",
                className: "rating",
                align: "left",
                sortable: true
            },
            {
                key: "type_of_food",
                text: "Type of Food",
                className: "type_of_food",
                sortable: true,
                align: "left"
            },
            {
                key: "action",
                text: "Action",
                className: "action",
                width: 100,
                align: "left",
                sortable: false,
                cell: record => { 
                    return (
                        <Fragment>
                            <button
                                className="btn btn-primary btn-sm"
                                onClick={() => this.editRecord(record)}
                                style={{marginRight: '5px'}}>
                                <i className="fa fa-edit"></i>
                            </button>
                            <button 
                                className="btn btn-danger btn-sm" 
                                onClick={() => this.deleteRecord(record)}>
                                <i className="fa fa-trash"></i>
                            </button>
                        </Fragment>
                    );
                }
            }
        ];
        this.config = {
            page_size: 10,
            length_menu: [ 10, 20, 50 ],
            button: {
                excel: true,
                print: true
            }
        }

        this.state = {
            records: [
              {
                "id": "55f14312c7447c3da7051b26",
                "address": "228 City Road",
                "name": ".CN Chinese",
                "postcode": "3JH",
                "rating": 5,
                "type_of_food": "Chinese"
              },
              {
                "id": "55f14312c7447c3da7051b27",
                "address": "376 Rayleigh Road",
                "name": "@ Thai",
                "postcode": "5PT",
                "rating": 5.5,
                "type_of_food": "Thai"
              },
              {
                "id": "55f14312c7447c3da7051b28",
                "address": "30 Greyhound Road Hammersmith",
                "name": "@ Thai Restaurant",
                "postcode": "8NX",
                "rating": 4.5,
                "type_of_food": "Thai"
              },
              {
                "id": "55f14312c7447c3da7051b29",
                "address": "30 Greyhound Road Hammersmith",
                "name": "@ Thai Restaurant",
                "postcode": "8NX",
                "rating": 4.5,
                "type_of_food": "Thai"
              }
            ]
        }
    }

    editRecord(record) {
        console.log("Edit Record", record);
    }

    deleteRecord(record) {
        console.log("Delete Record", record);
    }

    render() {
        return (
            <div>
                <ReactDatatable
                    config={this.config}
                    records={this.state.records}
                    columns={this.columns}
                />
            </div>
        )
    }
}

render(<App />, document.getElementById("app"));

Download Details:

Author: androidneha

Source Code: https://github.com/androidneha/mern-admin-panel

#reactjs #react #javascript

DashboardKit - Bootstrap 5 Admin Template

DashboardKit Bootstrap 5 Admin Template

Free Download - download

Premium - click here

Live Preview – Video

Embed Video –
<iframe width="560" height="315" src="https://www.youtube.com/embed/X1EpcZXcD6A" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Preview Product Demo

Why DashboardKit?
DashboardKit is a Bootstrap 5 based Admin Template that comes with 170+ ready to use conceptual pages. We have made DashboardKit a really powerful backend template with having tons of UI components, form elements, charts, tables along with 7+ admin panels.
• Developer centric : Even a novice developer can customize the DashboardKit. Our code is readable and well optimized for any level of developer.
• Modern design : User experience is the major important part in DashboardKit. We’ve designed each page with conceptual user interface.
• Performance first : Code is handwritten from scratch & doing that we’ve achieved the best performance in DashboardKit.
• Well documented : Detailed documentation guide contains- Quick setup, Integrate into an existing project, How to use components, references, and changelog.
• Responsive : DashboardKit’s design renders fast & perfect on desktop, tablet & mobile without any lagging issue.
• Browsers Compatiblity : DashboardKit is well tested in Chrome, Firefox, Safari(macOS) , Edge & Internet Explorer(>=IE11).
• Regular updates : Any bug fixes, new features, improvements in DashboardKit will always free.
• Support : You can submit us the issues or any new feature request via our email support dashboardkit[at]gmail[dot]com.

Technology Stack
• Bootstrap : Most popular design framework for developing responsive and mobile-first websites.
• Sass : Sass is a preprocessor scripting language that is interpreted or compiled into CSS.
• npm/Gulp : Node Package Manager with Gulp build system for the fast development.

Features
DashboardKit free Bootstrap 5 admin template includes the basic layouts with below listed pages. For more features, please checkout pro version.

• Analytics Dashboard
• All Basic Bootstrap components
• 250+ Feather Icons
• Form Elements
• Bootstrap Basic Table
• Apex charts
• Google Map
• Login/Registration Pages
• Sample Page

We Solved your pain points?
You have seen lots of other admin templates but Is it really convenient for you? Has it resolve all your below pain points? We’re closely working on dashboard making since 2013 & we know the real pain points of our customer base.
• Hassle to start : Quickstart guide for start with DashboardKit. We also cover how to implement DashboardKit into your existing project with minimal effort. Guide for Quickstart
• Hard code structure : DashboardKit has a fully structured code with a well-commented guide that helps to ease your development.
• Hard to buid : We used Gulp build process for minification of CSS/Javascript files, the flexibility of repetitive workflows and compose them into efficient build pipelines. Check our Gulp helper guide.
• Components useability : You can easily access & use the DashboardKit’s all components using one-click code copy/paste mechanism. It will surely save your time.
• Responsive issues : Proper bug-free responsive design is a key factor for any project. DashboardKit is well optimized for that.
• Messy documentation : Simple easy to understand Documentation covers all aspects of setup, components guide, reference links, changelog.

Upgrated to Pro DashboardKit
For more Pages, UI components, forms variants & access to 7+ admin panels check out the Premium version of DashboardKit Bootstrap 5 Admin Template.

Documentation
DashboardKit documentation helps you in all aspects related to setup, how to use components, plugins references & changelog. Please refer this link.

Support
For support please contact us on dashboardkit[at].gmail[dot]com.

#dashboardkit #bootstrap 5 admin template #bootstrap admin template #admin dashboard #admin template #bootstrap

Asp Dot Net Explorer

1608388622

Query of MongoDB | MongoDB Command | MongoDB | Asp.Net Core Mvc

https://youtu.be/FwUobnB5pv8

#mongodb tutorial #mongodb tutorial for beginners #mongodb database #mongodb with c# #mongodb with asp.net core #mongodb

Asp Dot Net Explorer

1608388501

Install MongoDB Database | MongoDB | Asp.Net Core Mvc

#MongoDB
#Aspdotnetexplorer

https://youtu.be/cnwNWzcw3NM

#mongodb #mongodb database #mongodb with c# #mongodb with asp.net core #mongodb tutorial for beginners #mongodb tutorial

dotNET Questions

1612042200