Developing Stone Admin #6 | Admin panel for Esmerald | Mikhail Omelchenko

In this tutorial, we will be developing Stone Admin #6, an admin panel designed for Esmerald (a fictional company) using the technology stack recommended by Mikhail Omelchenko. This admin panel will include features such as user management, data visualization, and task tracking.

Before we begin, make sure you have the following tools and technologies installed on your computer:

1. Node.js and npm – Make sure you have Node.js and npm (Node Package Manager) installed on your computer. You can download them from the official Node.js website.

2. React.js – We will be using React.js for building the user interface of our admin panel. You can install React.js by running the following command in your terminal:

npm install -g create-react-app

1. MongoDB – We will be using MongoDB as our database for storing user data and other information. You can download and install MongoDB from the official MongoDB website.

Now that you have all the necessary tools installed, let’s start developing our admin panel:

Step 1: Create a new React app
Open a terminal window and run the following command to create a new React app:

npx create-react-app stone-admin

This will create a new directory called stone-admin with all the necessary files and folders for a React app.

Step 2: Install additional dependencies
Navigate to the stone-admin directory and install the following dependencies:

cd stone-admin
npm install axios react-router-dom react-chartjs-2

These dependencies will help us make API calls, create routes, and visualize data in our admin panel.

Step 3: Design the layout
Create a new folder called components inside the src directory. Inside the components folder, create the following components:

• Navbar.js – This component will contain the navigation bar for the admin panel.
• Sidebar.js – This component will contain the sidebar with links to different sections of the admin panel.
• UserList.js – This component will display a list of users and allow the admin to manage them.
• Dashboard.js – This component will display data visualization charts for the admin panel.

Step 4: Add functionality
In the UserList.js component, write code to fetch user data from the backend using Axios and display it in a table. Add buttons to edit or delete users.

In the Dashboard.js component, use the react-chartjs-2 library to create bar or pie charts displaying data relevant to the Esmerald company.

Step 5: Set up the backend
Create a new directory called backend in the root of your project. Inside the backend directory, create a new Node.js app using Express and MongoDB.

Write code in the backend app to handle user requests from the admin panel, such as creating, updating, or deleting users. Connect the backend to MongoDB to store user data.

Step 6: Connect the frontend to the backend
Set up API endpoints in the backend app to handle requests from the frontend. Use Axios in the frontend to make API calls to these endpoints and fetch or send data.

Update the Navbar.js, Sidebar.js, UserList.js, and Dashboard.js components to interact with the backend and display data accordingly.

Step 7: Test the admin panel
Start both the frontend and backend servers by running the following commands in separate terminal windows:

npm start

Open your web browser and navigate to http://localhost:3000 to access the admin panel. Test all the features, such as user management, data visualization, and task tracking, to ensure everything works as expected.

Congratulations! You have successfully developed Stone Admin #6, an admin panel designed for Esmerald, using the technology stack recommended by Mikhail Omelchenko. Feel free to customize the admin panel further and add any additional features you find useful. Happy coding!