For customer projects Need Eata meal delivery platform located in Nouméa, New Caledonia, Tuan, a junior developer, used react-admin to develop the back office.
The back office has two interfaces:
- admin for administrators to manage orders, customers and restaurants
- store for restaurants to manage orders, products...
React-admin is an open-source JavaScript library that facilitates the creation of a responsive, high-performance back-office. It provides a set of pre-designed components and tools for rapidly developing an administration interface based on React.
To best manage this project, Tuan used react-admin, react-admin enterprise, stripe for the payment method and MongoDB for the document-oriented NoSQL database.
Junior challenge and complex project
For a junior developer, it can be difficult to use react-admin as it's a powerful but complex framework. Functionalities are mostly ready-to-use, but this adds a complication for customizing the appearance and behavior of the user interface according to the customer's needs and expectations. To do this, it is necessary to study the documentation and update the versions of react-admin.
Tuan also went to the react-admin discord to find out more about the obstacles he had encountered.
In our experience, the best solution for a backoffice site is React-admin, as its functionalities enable the use of ReactJS, and several possibilities are possible, including search filters, customizable dashboards and online editing views. Developers can also manage their application data and models efficiently, without having to code everything from scratch.
Framework from react-admin
Here, Tuan demonstrates a code example for the Back office administration interface:
The Admin component is a main entry point for configuring and organizing all the elements required to build an administration interface with React-Admin, including the theme, login page, dashboard, data and authentication providers, resources to be displayed, as well as custom components.
The interface will look like this on the Need Eat website:
Back office: from frontend to backend
For further information, visit React-Admin App (Frontend): This is theapplication administration app built with React-Admin. It represents the frontend of the architecture, where the administration interface is developed and executed in the user's browser.
- Components (UI, Layout) : These components are responsible for the user interface and layout ofapplication . They include elements such as dashboards, lists, menus, etc.
- Data Provider: This component acts as an intermediary layer between theapplication administration tool and the API backend. It facilitates communication between the two by providing methods and functions to manage requests between the frontend and backend.
- Backend API Integration: This part of the architecture manages integration between theapplication administration interface and the backend API. It implements network calls, authentication and data synchronization between the interface and the backend.
For a project like Need Eat, it is It's essential to integrate React-admin, as it offers a number of ready-to-use functions such as components, themes and hooks.
Here, we can see that despite the complexity of the project and the use of React-admin, Tuan simply needs to consult all the online resources, and he can also benefit from an active community, which will enable him to improve his expertise in software development.
Use React Admin, our agency can create quality applications faster, with less complexity and a better understanding of development principles.
If you have a similar project in mind, don't hesitate to contact us!
