Sign in Subscribe
fullstack

Full-Stack React Purity - Premium Seed Project

Premium Full-Stack seed project with a modern React UI styled with Chakra, powered by a Node JS API Server.

Editor

• 4 min read
Full-Stack React Purity - Premium Seed Project crafted by AppSeed and Creative-Tim
Full-Stack React Purity - Powered by Node JS API and Chakra for Styling

Hello! This article presents a Full-Stack Seed project that uses a pixel-perfect design styled with Chakra UI and a lightweight Node JS API server for the backend logic. Full-Stack React Purity comes with an impressive number of components, pages, and a production-ready authentication flow powered by JWT (JSON Web Tokens).  For newcomers, React is a popular Javascript Library for coding user interfaces baked by Facebook. Thanks for reading!

GIF animated presentation of Full-Stack Purity React PRO, a premium seed project crafted by AppSeed and Creative-Tim.
Full-Stack React Purity PRO - Premium Seed Project.

What's in the box

The product comes with a development-ready codebase crafted with a secure JWT Authentication flow (login, register, and logout) powered by a Node JS API server that manages the users and authentication tokens. The UI has an impressive number of components, pages, widgets, and pre-configured plugins that should provide a good start for any developer.

  • Pixel-Perfect UI styled with Chakra: Purity React PRO
  • 300+ Components, 32 Sample Pages (see demo)
  • JWT Authentication Flow powered by Node JS API
  • React UI compatible multiple API Servers: Flask/Django
  • Docker support for the backend
  • LIVE Support via Discord -  24/7 LIVE Server

How to use the product

To start the product in a local environment, we need to have the workstation prepared with a short-list of tools accessible in the terminal:

  • NodeJS - a decent version (12.x or above)
  • GIT - in case you are pulling the sources from Github
  • Yarn - a popular package manager for NodeJS (better than NPM)
  • A modern editor like VSCode or Atom

Once all the tools are properly installed we can move forward and start the product (backend and the frontend). In this article, we will use a NodeJS API server but the product can be used with other API servers like Flask or Django based on the Unified API Definition implemented by all servers.

Start the Backend Server

The API server is written in Typescript on top of Express, Passport Library (for JWT authentication), and TypeORM over SQLite for persistence.

Node JS API - Product Image.
Node JS API - Product Image

Step #1 - Clone/download the sources

$ git clone https://github.com/app-generator/api-server-nodejs.git
$ cd api-server-nodejs
Full-Stack React Purity - Clone the API Server

Step #2 - Install Dependecies

$ npm i
// OR
$ yarn
Full-Stack React Purity - Install API Server Dependencies

Step #3 - Set up the SQLite database (create tables)

$ yarn typeorm migration:run
Full-Stack React Purity - Set Up the Database

Step #4 - Start the API Server

$ npm dev
// OR
$ yarn dev
Full-Stack React Purity - Start the API Server

The API interface used by the API is a simple JWT authentication layer that exposes the following methods:

  • /api/users/register: create a new user
  • /api/users/login: authenticate an existing user
  • /api/users/logout: delete the associated JWT token
  • /api/users/checkSession: check an existing JWT Token for validity
  • /api/users/edit - edit the information associated with a registered user

At this point, we should be able to use the API server using POSTMAN or any other compatible client ( curl or another React UI).

Start the React UI

The React frontend once is downloaded, can be started and used using the classic compilation flow: 

$ yarn        # install modules
$ yarn start  # start for development (with LIVE reload)
$ yarn build  # production build
Full-Stack React Purity - Start the frontend

By default, the React UI redirects guest users to the login page to authenticate and this is the reason we should see the Sign IN as the first page loaded in the browser. After successful registration and login, all private pages are unlocked and we can access all pages shipped by the Purity UI Kit.

Login page provided by React Purity PRO, a premium Full-Stack product crafted by AppSeed and Creative-Tim.
Full-Stack React Purity - Login Page. 
Full-Stack React Purity - Charts Page
Charts Sample Page provided by React Purity PRO, a premium Full-Stack product crafted by AppSeed and Creative-Tim.
Full-Stack React Purity - Charts Page.
Full-Stack React Purity - Calendar Page
Calendar Sample Page provided by React Purity PRO, a premium Full-Stack product crafted by AppSeed and Creative-Tim.
Full-Stack React Purity - Calendar Page.
Full-Stack React Purity - Widgets Page
Widgets Sample Page provided by React Purity PRO, a premium Full-Stack product crafted by AppSeed and Creative-Tim.
Full-Stack React Purity - Widgets Page.

Open-Source Version

Full-Stack Purity React comes with an open-source version that provides an identical set of features (JWT authentication, Docker Support) powered by open-source API servers crafted in different flavors: Flask, Django, and Node JS.

React Node JS Purity - Free Product
React Node JS Purity - Free Product
Thanks for reading! For more resources, please access: