DEV Community: Eugene Stepnov

⚡️⚡️⚡️New React/Vue/Angular CRUD app codebase generator. Need your brutally honest feedback!

Eugene Stepnov — Wed, 07 Sep 2022 12:39:50 +0000

Hello, the community of Dev.to. My name is Eugene, I am one of the partners at Flatlogic - we are helping software developers to start web apps with no hassle. I want to show you what we have been working on for the past year. We made a generator of full-stack CRUD web apps codebases based on the database schema. Our product helps to get rid of repetitive work when creating web applications and saves time and money, of course :) An application based on Flatlogic is a good foundation for further development with user authentication, data management, and a ready-made basic structure.

You can try it for free before reading full description. GENERATE NEW APP.

Prerequisites

A little background. Flatlogic has been in the software development market for over 8 years. During this time we have developed both our own products for starting web application development (static admin templates using different technologies) and several dozens of complex custom web applications.

While working on these projects we noticed 3 very similar things:

Almost all the apps that we created have CRUD functionality under the hood;
All applications consist of tables, forms, widgets, charts, authorization, authentication, and so on;
When creating a CRUD web application, the developer is usually faced with a lot of repetitive tasks (setting up authorization, routing, developing UI components from scratch, etc.).

Based on these three components and after interviewing the potential users of our future tool, we made the MVP of the Flatlogic full-stack web application generator.

What is a Flatlogic web app generator?

Flatlogic full-stack web application generator is a tool for the fast creation of web applications from scratch. The tool provides the UI for creating the database schema from which you generate the application code base. All you have to do is to think about the database schema of your future application.

You can create almost any type of web application with the help of the tool:

CRM;
Headless CMS;
E-commerce CMS;
Admin Panel;
Data management app;
Inventory management application;
UI for the database.

How it works

It won't take you more than 10 minutes to create a basic CRUD web application boilerplate. Creating a full-stack application consists of 3 steps.

Step 1

Choose a name and stack for your future web app. Then choose a template, or what your app will look like. We currently only support material design in each stack + one additional design if you choose to create your app in Vue.

You can build your app on the following technologies:

Front-end

React;
Vue;
Angular;
Tailwind.

Back-end

Node.js Sequilize;
Node.js TypeORM (with Full TypeScript Support);
PHP Laravel.

Database

MySQL;
PostgreSQL.

Step 2

Create a database schema. At this step you can import an SQL file with an existing schema and our application will detect it. Or you can create it from scratch using our UI.

For example, see below how Flatlogic's CEO Philip creates a CRM in 30 minutes.

You can create tables and fields. Fields can be of different types:

String;
String Boolean;
Date Time;
Decimal;
Integer;
Enumeration;
Date;
Images;
Relation (one);
Relation (many).

At this point, to make it easier to understand how to make an application, we also offer the ability to choose a template of a ready-made database schema. You can choose from the following templates:

E-commerce app;
Time tracking app;
Books store;
Chat (messaging) app;
Blog.

Step 3

After you finish creating the database schema our tool will generate a ready-to-use application. This is the final step after which you have several options for further work with the application.

You can see the final application that I have made in 10 minutes by clicking this link: DEV.TO app

Here is also a GitHub repo with the code of the created application:

stepnov / DEV.TO

This repository was created by Flatlogic Platform.

DEV.TO

This project was generated by Flatlogic Platform.

Frontend: Vue.js
Backend: NodeJS(TypeORM)
Database: PostgreSQL

We offer 2 ways how to start the project locally: by running Frontend and Backend or with Docker.

To start the project:

Backend:

Please change current folder: cd backend

Install local dependencies:

yarn install

Copy .env file as a new .env.local. Edit database credentials and anything you need in .env.local file. This file is ignored by git, and won't be uploaded anywhere.

Adjust local db:

1. Install postgres:

MacOS:

brew install postgres

> if you don’t have ‘brew‘ please install it (https://brew.sh) and repeat step `brew install postgres`.

Ubuntu:

sudo apt update

sudo apt install postgresql postgresql-contrib

2. Create db and admin user:

Before run and test connection, make sure you have created a database as described in the above configuration. You can use the psql command to create a user and database.

psql…

View on GitHub

Features

After the creation of the application, you can work with the platform itself as well as with the made application.

Platform

Let's first look at the features of the platform itself.

Code Preview

In your app's cabinet even if you don't have paid access to the tool, you can see a code preview of the created app.

Hosting

You can also host created app on our platform to visually inspect the result. If there is any error when deploying your app our platform will provide you with logs.

Schema editing and adding new entities

You can also add new entities to your app. The UI schema editor tool is available free forever. Then you can redeploy the app once again.

Full access to the code of the created app

You can also download the code of the generated application or run it on GitHub. Our tool gives you full access to the code. If you modified the application by writing your code, we allow you to keep it on our hosting service.

Generated application features

Now let's take a look at how the application itself works and what it is all about.

Project structure

The basic project structure of the full-stack app consists of the:

Backend, where should be the next files: src folder which contains your working files that will be used later to create the build;
Frontend, where should be the next files: src folder which contains your working files that will be used later to create the build and public - is the web-accessible root of the site. Basically whatever is in that folder can be opened from the browser address bar. The server won't provide user access to files outside the public;
the src folder contains folders such as actions, components, contexts, images, pages, reducer, reducer, and themes.
Docker - folder with main Docker files;
README.md - guides how to run locally your application;
Package.json - contains information about your application: name, version, dependencies, etc.

The resulting out-of-the-box application has the following features:

Configured and ready to use authorization and authentication;
Fully ready-to-use application with front-end, back-end parts, and database;
Each app comes with a docker container for quick deployment to any hosting platforms;
Application is fully adaptive across all screen sizes;
For every entity created with the generator, the tool automatically creates an API documented with Swagger;
Ready-made components for the full-stack app. Buttons, tables, forms, and general layout come out of the box;
The app will also contain some basic searching, filtering, and validation;
The build/compilation process is already set up and works without problems;
Image storage implemented;
All back-end and front-end logic is generated automatically according to the previously created database schema.

The tool also has full integration with GitHub, allowing you to add new entities and tables in minutes without writing new code anytime and push it to GitHub and manage your project with other engineers.

Recap

With Flatlogic you can quickly create a complete CRUD full-stack application in minutes. Unlike other low-code and code generation tools, our platform enables you to fully customize the resulting application without getting hung up on us, because we put the resulting code at your disposal.

We will be glad if you try our product and give very honest direct feedback. If you decide to buy access to the platform, for all dev.to users we have prepared a promo code for 70% for access to our platform - DEVTOFL70.

Top React Admin Dashboard Templates

Eugene Stepnov — Tue, 02 Aug 2022 11:12:00 +0000

React.js makes it easy to create an interactive UI. Because it’s developed and supported by Facebook, you don’t have to be concerned about its handling of complex code. Also, It has grown as one of the best libraries in recent years for component-based GUI development. Regardless of the complexity of the data, you can use ReactJS elegantly to create interactive graphics and UI elements. It’s easy for developers to test, making testing possible even from the server side. You have to combine ReactJS with other Model-View-Controller frameworks to work with data.

Why is React so popular?

Easy creation of dynamic applications
Reusable components
Improved performance
Small learning curve
Dedicated tools for easy debugging
Unidirectional data flow

Why are we pushing React forward again & again? React dashboards, and any administration dashboards built on React in general, are significant share, and represent a large part of the market. The world of JavaScript libraries is inexhaustible, however, and we encourage you to keep up to date with trends in web development keeping abreast of recent tech advances.

How to Choose a React Admin Template?

Finding an admin template you like can take a little time. Honestly, most of these React Admin templates are responsive, Figma-ready, well-documented, and have several UI components, so let’s dive into the main criteria by which we determine the best admin template. Of course, you can choose from the user interface and appearance of the admin template, but the dashboard and starter kit linkages are still decisive points to look out for:

Design quality
Quality of code
Ease of installation
Quality of documentation
Number of unique pages
Update policy
Quality of support
Price
Customer feedback

Top React Admin Templates

Light Blue React

Light Blue React is an undeniable find for developers, created using React and Bootstrap 5. The name of this React admin template may seem confusing because what is meant here is not the color of the template, but the “lightness” of the dashboard. It uses server-side rendering for SEO optimization and Node.js for the backend. The light blue React admin template is used to create analytical dashboards, e-commerce applications, CMS, SASS web applications, CRM, and many other web projects.

More Info
Demo

Sing App React

Sing App React is one of our advanced React templates with rich functionality made by Flatlogic. This template has become a true bestseller since 2018 and has been praised by devs worldwide. The Sing App admin template was developed with the help of the popular Bootstrap 5, React 17. It has 8 chart libraries, a user management option, a rich eCommerce panel, a static and hover sidebar, nice-looking users growth, profit and orders sections, and well-detailed documentation. Explore all the perks of the template yourself. Use Sing App React to build online stores, SaaS, CMS, financial dashboards, project management tools, etc.

More info
Demo

EasyDev

EasyDev is a modern and user-friendly React Dashboard Template with impressive features and assets. By incorporating all the latest technological trends to create a tool that will bring you great value. The clean code and detailed documentation enable anyone to create an admin dashboard for their application. FYI, EasyDev supports both web and mobile applications and quickly adapts to your requirements.

In a robust set of utilities, you’ll have more than two hundred user interface elements that you can use as you see fit. EasyDev, moreover, comes with a dark and light layout and more than a hundred pages. Tons of diagrams, forms with validation, e-commerce pages, a creative calendar, and valuable table sets – EasyDev offers it all. Take advantage of all the available features and get your products up and running quickly.

More Info
Demo

Cuba

You can use different administration panels in the Cuba template, including the React panel. The modern and creative look of Cuba instantly attracts attention. The design remains minimalistic so that no one is overwhelmed with unnecessary information. Cuba controls the style.

Bundled with React, Cuba offers you a wealth of materials that will fast-track the creation of your dream admin. Featured items include Redux, chat, animation, React Router, diagrams, map, gallery, and nine applications.

More Info
Demo

Reactify

Reactify gives you all you require to build the perfect admin for your online project. It is a top-notch React dashboard template that sorts you out with an eCommerce and a SaaS solution. Of course, you can use it for other intentions since Reactify readjusts to the desired project in a breeze. Besides, it is also entirely customizable and gives you full permission to tweak it however you fancy.

A mad assortment of features amazes every Reactify user. From over 65 widgets and multilingual support to a horizontal menu, twenty charts, and advanced reports, Reactify is a fully loaded tool. Individualize the web design of Reactify with icons and text editor and enrich it with your personal touch. You can achieve a remarkable outcome only by utilizing all the ready-to-use content.

More Info
Demo

Jumbo

Jumbo React is a React and Material-UI-based admin template that follows Google’s Material Design Concept and helps you build your React web application faster, precisely, and cost-effectively. Apart from the Material-UI, Jumbo has many other powerful libraries like Coremat-Pro, Redux, Storybook, ReCharts, and many more.

Jumbo covers 360-degree premium support after the purchase. Quickly learn with video tutorials, online documentation, and other community members or raise a support ticket that you will always find us right here to help you out.

More Info
Demo

MaterialPro React Redux Admin

MaterialPro React Redux Admin has five main demos for you to choose from for your admin app or dashboard. With multiple demos to check out, you can get a good idea of how your dashboard or admin area could look if you choose MaterialPro React Redux Admin for your project. An extensive library of templates is used in your dashboard and user section for quickly building the interface you need. Because these templates cover a wide range of page types, you’re sure to find something you can use now.

You can use six preset color schemes to quickly change the overall look of your administration pages, to using one of the ready-made modes and choosing templates to your liking. The different sidebar color options add another dimension when it comes to personalizing your layouts. Of course, you can customize your pages in more ways than one, and if you’re looking for an easy way to customize the design and style of your content, the color schemes are sure to come in handy.

If you choose MaterialPro React Redux Admin for your product, you get a nice set of table types to work with, lots of chart styles to display data, and ready-made forms that you can quickly add to your pages. Since all forms can use validation at your will, you can increase your chances of getting the data you want from your users. The list of other ready-to-use components is very long, but some of them include a mailbox, a chat application, and galleries.

Thanks to the online demo for MaterialPro React Redux Admin, you can see exactly how all the components work and how your admin area could look if you choose this pack.

More Info
Demo

Gogo

Gogo aims to deliver a React admin template that’s a good combination of attractive design and quality code. Like many premium React admin templates, Gogo includes many components to add to your pages, such as alerts, icons, buttons, and carousels, just to name a few. Each component comes in several variations, including different color and size options. Gogo stands out from the competition in the design and style of some of these components. For example, the charts and graphs components look good and can help these elements integrate well with the rest of your page content, rather than standing out too sharply, as is sometimes the case with components of this type.

All the page templates you’d expect to see in React admin’s premium template package are available. It makes it easy to add login and registration pages, product listings and their details, and dashboard billing displays to your app. Keyboard shortcuts support improving the user experience, multilingual processing to appeal to a broader audience, and right-click menus that add depth to the interface are a few more reasons to consider Gogo for your project.

If you’re looking for a set of templates with a slightly different design to many of the other options, Gogo is worth checking out.

More Info
Demo

Wieldy

Wieldy has nine dashboards and three different layouts to help launch your new admin area or control panel.

This stylish React admin template and starter kit contain all the libraries you need to build your own small or complex app without too much hassle. To help you get started, Wieldy gives you over 120 pages to use in your project selection of over 100 widgets and metrics making it easy to populate your app pages with elements, including maps, chats, and subscription forms. Applying one of the preset color schemes to your dashboard is also easy with Wieldy. As for the code, everything is well-documented, making it easy to create a custom app.

Another reason to choose Wieldy is the ability to expand your dashboards with the applications provided. Whether you want to add a mailbox, chat, or notes application to your admin area, this product will help you. Storing and managing contacts inside any dashboard created with Wieldy is also possible because of the built-in features of this package, which make these templates a suitable option for creating a CRM system.

More Info
Demo

Enlite

Enlite is a set of React dashboard templates with interesting social elements to create an interactive user experience. Built on the Material UI library, Enlite has a familiar look and feel that will help your dashboard or app stand out from some of the established platforms and services in use today. With designs such as animation effects and complementary color palettes, you can easily make your dashboard look top-notch.

Besides looking nice, Enlite templates cover all the basic types of content you might want to add to your dashboard. There are two types of authentication features that you can use, covering login page templates, and sign-in and lock screen templates. Social templates make it easy to add timelines to user accounts, providing ready-made content for those who want to share their latest photos and status updates. User profile templates are also nicely designed to help support contact sharing, making it easy to make connections and use location services.

Enlite’s many different maps and components make it easy to display a variety of information and data.

More Info
Demo

Nazox

Nazox is a full-featured premium admin panel template based on React Redux Saga with firebase & fack-backend authentication and developer-friendly code. It didn’t use jQuery, cause it’s a clear ReactJs admin panel template based on components only.

Nazox is an admin panel template that is a nicely made, clean and minimally designed admin template with a dark and light layout with RTL options. You can create all kinds of web applications such as Saas interface, e-commerce, CRM, CMS, project management applications, admin panels, etc.

More info
Demo

Qovex

Qovex is a simple and beautiful admin template created using the latest React Js and Bootstrap 5. It has more than 6 different layouts and 3 modes (Dark, Light, and RTL), which are managed only with SCSS. You can simply switch to any layout or mode by changing a couple of lines of code. You can start small and large projects or update a design in an existing project with Qovex – it is very fast and easy as it is beautiful, slick, and provides the ultimate user experience.

More info
Demo

Tabler react

Tabler React is a free bootstrap React admin template. It is an easy-to-use control panel. It also has a simple but elegant design and many custom components. Tabler React is constructed using React and Bootstrap.

It has minimalistic and clean components, widgets, and elements. Specifically, it has cards, charts, price cards, maps, icons, forms, pages, and galleries. It also has a profile, login, registration, forgot password, email, RTL, and more.

More Info
Demo

DeviasKit

DeviasKit is a React material dashboard created using Material UI, React, and create-react-app components that speed up the app development process! Moreover, this free version offers 7 demo pages. It also supports authentication through Google or Facebook, so your users can easily sign up. In addition, this template uses different fonts and icons. Material design technology makes this dashboard intuitive, interactive, and ready to use. In addition, most of the UI Elements code is available for free use.

More Info
Demo

ArchitectUI

Fully control the entire application to succeed the way you want with ArchitectUI, a React Dashboard Template that specializes not only in design but in functionality too. In the kit, there are a variety of templates to choose from, all of which support mobile devices that are cross-browser compatible, and compatible with retina screens. More specifically, ArchitectUI supplies 9 dashboard templates that you can use and enhance until they match your application.

ArchitectUI showcases the latest innovations in web admin design, such as powerful integrations, bulk elements, updated tools, improved navigation, and reduced white space. ArchitectUI includes 150 components, 23 button styles, five drop-down styles, five icon packs, eight color skins, and more. Reach your full potential with ArchitectUI.

More Info
Demo

Conclusion

React admin templates are quite popular because they are extremely useful, responsive and a good choice for starting your react project. Since there are many React admin templates, we have listed the best react admin dashboard templates to save you time.

With these templates, you can make any kind of web application like CRM, E-Commerce, CMS, etc. We hope this collection will help you choose the best one for your next react project.

On the Flatlogic platform, you can also find ready-to-use stylish with modern Javascript and HTML React Admin Templates, and you can create a powerful application using the platform. Flatlogic is also a hosting platform on which you can host your full-featured web applications. Starting with this approach to building a CMS, you create and host any web application, reducing the time and cost of web development.