Welcome to the world of MERN Admin Panel! This blog post will take you through the features, setup, and coding details of a robust admin panel built with the MERN stack. We will break down complex concepts into simple analogies, installed package details, and troubleshooting tips to help you efficiently navigate this powerful tool.

Features of the MERN Admin Panel

• Login-page and Basic layout design created using Bootstrap
• Authentication via JWT and Passport
• Datatable with both Client-side and Server Side Pagination
• Multi-sort and Filter capabilities
• Minimal design for a clean interface
• Flexible and controllable via optional props and callbacks

Getting Started with the MERN Admin Panel

Setting up the MERN Admin Panel is as easy as pie! Here’s how you can do it:

1. Demo

To get a peek at the admin panel in action, you can check out the demo here: Click Here

2. Available Scripts

To start the server and client simultaneously, use:

npm run dev

To build the React application, navigate to the client directory and run:

cd client
npm run build

Implementing the Datatable with Static Data

Now, let’s dive into the code snippet for using a Datatable with static data.

Think of implementing the Datatable like creating a recipe for a delicious dish. Each ingredient represents a column, while the data is the final plate served to your guests. Here’s how you can prepare this recipe:

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 => (
                
                     this.editRecord(record)} style={{ marginRight: 5 }}>
                        
                    
                     this.deleteRecord(record)}>
                        
                    
                
            ) },
        ];

        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' },
            ]
        };
    }

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

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

    render() {
        return (
            

                
            
        );
    }
}

render(, document.getElementById('app'));

Troubleshooting Tips

Here are some common issues you might encounter during the setup or use of the MERN Admin Panel, along with their solutions:

• Problem: Unable to connect to the backend.
  Ensure your backend server is running and correctly configured. Check your console for any error messages.
• Problem: Data not displaying on the datatable.
  Confirm that your records are correctly defined in the state. Inspect the console to make sure you’re fetching the data correctly.
• Problem: Styling issues with Bootstrap components.
  Verify that Bootstrap is included in your project and imported properly. Check for conflicting CSS styles.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.