FullStack React - Code Examples to start fast
Tags: react, webdev, fullstack, appseed
Published: 2021-07-21 15:05:43

---
title: FullStack React - Code Examples to start fast
published: true
description: A curated list with FullStack React Examples that are more than templates. All mentioned products are provided with authentication, database, and usable APIs.
tags: react, webdev, fullstack, appseed
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q640s9ru93wxv0uizxhn.png
canonical_url: https://www.admin-dashboards.com/fullstack-react-code-examples/
---
Hello Coders!

This article presents a curated list with **[FullStack React Examples](https://www.admin-dashboards.com/fullstack-react-code-examples/)** that are more than templates. All mentioned products come with JWT token authentication, database (SQLite or Mongo), and API backend servers provided in different technologies like Node JS, Flask, and Django. The open-source fullstack starters can be downloaded from Github and used for hobby and commercial products.

> *Thanks for reading!* - Content provided by **[Admin Dashboards](https://www.admin-dashboards.com/)**.

---

- (New) **[Django React](https://appseed.us/product/django-react-datta-able)** - fullstack sample with a Django Back end
- (Free) [React Node JS Berry](https://appseed.us/product/react-node-js-berry-dashboard) - fullstack React sample
- (Free) [React Node JS Datta Able](https://appseed.us/product/react-node-js-datta-able) - fullstack React sample
- (Free) [React Firebase Datta Able](https://appseed.us/product/react-firebase-datta-able) - open-source sample
- [React Node JS Datta PRO](https://appseed.us/product/react-node-js-datta-able-pro) - premium fullstack React sample
- [React Firebase Datta PRO](https://appseed.us/product/react-firebase-datta-able-pro) - commercial project

The above products can be used and combined with more than one Backend because the API interface is common to all servers:

- (Free) [Node JS API](https://github.com/app-generator/api-server-nodejs) - Typescript / SQLite / TypeORM
- (Free) [Django API](https://github.com/app-generator/api-server-django) - simple JWT API server
- (Free) [Flask API](https://github.com/app-generator/api-server-flask) - simple JWT API server
- [Node JS API PRO](https://github.com/app-generator/api-server-nodejs-pro) - comes with more features and MongoDB / Mongoose as database interface, Typescript, and Docker scripts.

---

## [Django React](https://appseed.us/product/django-react-datta-able) Datta Able

Open-source full-stack seed project coded in React and Django on top of a modern design. The **[Django React](https://appseed.us/product/django-react-datta-able-pro)** codebase is already configured with an SQLite database, API (via **DRF**), and JWT token-based authentication flow. **Datta Able** is an open-source **React Dashboard** that provides a colorful and modern design. 

---

- [Django React](https://appseed.us/product/django-react-datta-able) - product page
- **[Django React](https://appseed.us/product/django-react-datta-able) Datta PRO** - the premium version

---

![React Dashboard - Full-stack Datta Able Dashboard, now available wiht Node JS Backend.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3h9fu3hf0by59psgbzi.gif)

---

## [Fullstack React Berry](https://appseed.us/product/react-node-js-berry-dashboard)

Berry is a creative React Dashboard build using the Material-UI. It is meant to be the best User Experience with highly customizable feature-riched pages. It is a complete game-changer React Dashboard Template with an easy and intuitive responsive design as on retina screens or laptops. The product comes with a simple JWT authentication flow: login/register/logout.

- [React Node JS Berry](https://appseed.us/product/react-node-js-berry-dashboard) - product page
- [React Node JS Berry](https://react-node-js-berry-dashboard.appseed-srv1.com/) - LIVE Demo  

---

![Fullstack React Berry - Open-source starter.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9koqomd1iccpomd5oqns.jpg)

---

## [Fullstack React Datta Able](https://appseed.us/product/react-node-js-datta-able)

Datta Able is an open-source React Dashboard that provides a colorful and modern design. Datta Able React Free is the most stylized React Free Admin Template, around all other admin templates in the market. It comes with high feature-rich pages and components with fully developer-centric code. The product comes with a simple JWT authentication flow: login/register/logout.

- [React Node JS Datta Able](https://appseed.us/product/react-node-js-datta-able) - product page
- [React Node JS Datta Able](https://react-node-js-datta-able.appseed-srv1.com/) - LIVE Demo

---

![Fullstack React Datta Able - Open-source starter.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5rax0nb3nxc4cn42i8c.png)

---

## [Fullstack React Firebase Datta](https://appseed.us/product/react-firebase-datta-able)

This open-source sample comes with **Firebase** integration and social login via Google. 

- [React Firebase Datta Able](https://appseed.us/product/react-firebase-datta-able) - product page
- [React Firebase Datta Able](https://react-firebase-datta-able.appseed-srv1.com/) - LIVE Demo

--- 

![Fullstack React Firebase Datta.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mszmulq12l89g6n932er.jpg)

---

## [Fullstack React Datta PRO](https://appseed.us/product/react-node-js-datta-able-pro)

Datta Able is a premium React Dashboard that provides a colorful and modern design. Datta Able React PRO is the most stylized React Free Admin Template, around all other admin templates in the market. It comes with high feature-rich pages and components with fully developer-centric code.

- [React Nodejs Datta Able PRO](https://appseed.us/product/react-node-js-datta-able-pro) - product page
- [React Nodejs Datta Able PRO](https://react-node-js-datta-able-pro.appseed-srv1.com/) - LIVE Demo

---

![Fullstack React Datta Able PRO.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5yokuevfiyyuwdpc8l3.png)

---

## [React Firebase Datta PRO](https://appseed.us/product/react-firebase-datta-able-pro)

This commercial products uses the same premium design as the previous sample and the codebase comes with social login via Google powered, of course by Firebase. 

--- 

- [React Firebase Datta PRO](https://appseed.us/product/react-firebase-datta-able-pro) - product page
- [React Firebase Datta PRO](https://react-firebase-datta-able-pro.appseed-srv1.com/) - LIVE Demo

---

![Fullstack React Firebase Datta PRO.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vi60lia2hiwvxt0ft68.png)

---

As mention before, all the above samples are configured to communicate with a unified simple API interface that shares all necessary actions to manage a simple JWT Authentication:  

- API: login/logout/register
- `editUser` - allows updating user-related information

To make this article really useful, we can build the Node JS API server using the information provided by the project [README](https://github.com/app-generator/api-server-nodejs).

---

![Node JS API Server.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rb2qmrpvr0w5qweo3h2.png)

--- 

> **Step #1** - Clone the sources

```
$ git clone https://github.com/app-generator/api-server-nodejs.git
$ cd api-server-nodejs
```

---

> **Step #2** - Install modules using NPM or Yarn

```
$ npm i
// OR
$ yarn
```

---

> **Step #3** - Run the SQLite migration via TypeORM

```
$ yarn typeorm migration:run
```

---

> **Step #4** - Start the API server  (development mode)

```
$ npm dev
// OR
$ yarn dev
```

At this point, the API server should be up & running and we can use POSTMAN or mentioned React Samples to have a complete fullstack experince. 

--- 

> **Thanks for reading!** For more resources and support feel free to access:

- [Open-source Dashboards](https://appseed.us/admin-dashboards/open-source) - provide by AppSeed
- Free [React Dashboards](https://dev.to/sm0ke/react-dashboards-open-source-apps-1c7j) - a curated list published on Dev.to