Flatlogic Templates

What is a Web or Mobile Template

A template is a boilerplate for your future web or mobile application. For example, in Flatlogic templates, we have implemented various already made components that are ready for use in your future application. Using such a template allows you to significantly shorten the path from the idea to the delivery of the product to the market.

 
In other words, imagine a set of ready-to-use pages and elements (like widgets, charts, and icons) that you can push to prod in almost no time instead of getting bogged down in development from scratch. Thatā€™s what templates are made for. Time-saving at its finest!

Types of Templates

In our store, templates are divided into the following types

Technology-wise

You can download for free or buy the following templates:

  • React templates;
  • Angular templates;
  • Vue templates;
  • Vuetify templates;
  • Material UI templates;
  • Bootstrap templates;
  • Node.js templates;
  • Java templates;
  • .NET templates;
  • Laravel templates;
  • React Native templates.

Design-wise

  • Material design templates;
  • Transparent design templates;
  • Classic design templates.

Web Application Templates

  • Admin dashboard templates;
  • Ready-to-use templates.

Mobile Templates

On our website, you can find the most popular template on the market ā€“ React Native Starter. This is a complete mobile cross-platform application with pre-written components.

Templates for a specific task

In our store, you can buy ready solutions for:

  • Ecommerce store;
  • Bookkeeping template;
  • User management template.

Why do you need a Template?

Time is money! And here is quick math: building an admin dashboard from scratch will take roughly 500-1,000 man-hours which is equivalent to $25,000-$50,000, based on the average developer salary in the US. Instead, you can buy a licensed template for as little as $59-$599. How cool is that?

 
But there is more to templates than saving time and costs. When it comes to admin panels, templates (consider premium ones) donā€™t get the one-size-fits-all stigma that is usually stamped on off-the-shelf products. So if you wonder why not use a CMS, hereā€™s the answer. While platforms like Shopify or WordPress are meant to manage narrow tasks such as e-commerce and content management, admin templates tend to address broader and more specific business needs through deep customization and integration.

 
Say, you are building an admin panel to visualize and manage data collected from a network of machines in a one-of-a-kind smart factory setting. And you want it tailored to usersā€™ custom design and functionalities. Unless your developersā€™ needs are covered by one of the ready-made solutions available on the market, going for a customized template will be a good option. Consider it a good rule of thumb for any development project that requires a back-end UI.

User Guidance

PLEASE NOTE: To use our products, you need to possess basic knowledge of web or mobile development or a specific JS framework like React or Vue (depends on what template you tend to use). We regularly post technical tutorials that show real-life examples for our templates or JavaScript development.

 
Let's look through typical template use cases. Those are based on the problem that you want to solve.

Case 1 - you want to learn a new technology

You need to download a template made on top of the technology you want. As an option, you can do reverse coding to learn how we have built our templates. Read the documentation and you will get to know how the application is built with the technology you are going to learn. Thus, you can do some kind of customization and learn new technologies at the same time.

Case 2 - you want to jumpstart a project

Templates can help you quickly start building an MVP. In case you donā€™t need custom design ā€“ you can simply connect your data to our template and get a basic application with charts, tables, and even user management.

Case 3 - you have data and want to build a fully working application with the ready front and backend

This is the most widespread use case of our templates. We have a beautiful design, already-made front and back-end -- all you need is to connect your data with the template, get rid of the unnecessary components, and start using it! Afterwards, you can customize the template as you wish since the source code belongs to you.

Template Customization and Integration: How Far Can You Go?

The short answer is you can customize your template as much as you need unless it stops being cost-effective for your project. After you purchase the application you get the source code of the application, so you can do whatever you need with it.

What is the difference between a Bootstrap/HTML product and an Angular/Vue/React/Node.js template?

Products developed in Bootstrap / HTML come with static HTML files where we used jQuery for manipulating different elements in the template.

 
The Angular / Vue / React / Back-end versions of our products are those which use one of those frameworks as the core structure and they are built as a Single Page Application. This means that all components, functions, and third-party libraries are written using the specified frameworks. jQuery is not used in these templates.

 
Please note that working with framework-oriented templates requires at least basic knowledge of them.

How to start the template

So youā€™ve downloaded your themeā€™s .zip file, unpacked it, and youā€™re ready to start developing! To view your theme, youā€™ll need to run your themeā€™s build commands to compile source files and create a local server to preview pages.

Setting up a local development environment

In our products, in most cases, we are using npm or yarn but always refer to your template documentation for the actual commands and installation instructions. Thus, the basic process of setting up local development is roughly the same in every theme:

  • Install template dependencies from your command line via npm or yarn. (i.e. npm install or yarn install);
  • Run a ā€˜watchā€™ or ā€˜buildā€™ command. (i.e. npm start or yarn start);
  • Open your browser to your local serverā€™s address - it will be localhost:3000;
  • Edit source files and preview changes instantly with life reload.

If those commands are unfamiliar to you, we recommend you refer to the official docs to get to know more, but letā€™s break it down a little bit here too:

  • npm stands for a node package manager. It is a tool to automate the process of installing and upgrading packages;
  • Webpack is a library that helps to compile template source files and create a local server;
  • A local server is a temporary server environment on your computer.

What are the source, compiled, and static files?

These terms can mean different things in different contexts, but for Web Templates:

  • Source files are files that are meant to be processed by templates build tools;
  • Compiled files are generated as a result of running a compiling process on the source files;
  • Static files are the ones that arenā€™t processed or generated.

How do I know which files are the source, compiled, or static?

Source files are commonly in folders named src/ or app/, while compiled files are often found in /dist, public/, or build/ folders.

 
As always, if things arenā€™t clear to you, we encourage you to reach out to the Flatlogic support team or leave a question on the support and feedback forum.

Does a product work with a particular backend framework?

All Flatlogic templates are based on HTML, CSS, and JavaScript. Unless the product specifically contains a backend framework (Laravel, NodeJS, ASP.net, Python or Java) they work with any back-end language (PHP, Ruby, Java, etc) or any framework (Laravel, Rails, Spring, etc) of your choice. However, you need to integrate those backends by yourself or you can ask Flatlogic to do that custom work for you.

What if I purchase or download a template and it doesn't work?

All our products have been tested by our in-house team, plus, our products are made only by Flatlogic, unlike other marketplaces. However, as always happens in software development, there may have been a bug somewhere. If, nevertheless, you encounter an error during the installation of our products, follow the following paths:

 
If you have a problem while working with our product or website, please read the knowledge centre, the documentation for a specific product or the support forum. Also please note that we provide support primarily for the Premium version of our products.

 
If you have found an issue in our product, such as a missing or malfunctioning feature, please follow these steps:

  • Please search for a similar request on our support forum;
  • If you havenā€™t found relevant info on our forum - open a new issue;
  • If you don't want to disclose your private info you can request sending an email to [email protected].

Prerequisites

Before submitting an issue:

  • Check that youā€™re running the latest version;
  • Check the documentation carefully;
  • Make sure that this issue has not already been raised on support forum;
  • Make a screenshot of an error in developer tools;
  • Describe in detail expected behaviour and note the version of the product;
  • Please provide steps to reproduce the issue.

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions:

  • Device;
  • Operating system;
  • Browser and version;
  • Failure logs;
  • Please include any relevant log snippets or files.

As soon as we receive your issue, we will reply to it. If there is a defect in our products, we will fix it and we will update the impacted products. Additionally, note that we provide the answer in 24 hours on working days.

Example of a good support request

Hi there,

 
I have purchased the Sing App React template and when I try to click on the login button nothing happens.

  • The version of the Sing App React is 8.2.4;
  • I am working on macOS;
  • Browser is Chrome;
  • I have done all the steps described on documentation to start the templates, so basically it is the steps to reproduce :);
  • Please see the log attached and the screenshot from dev tools.

Waiting for your answer!

                                                                         Purchasing and support ā†’