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
- ✨ Full-Stack React Purity PRO - LIVE Demo
- ✨ Full-Stack React Purity PRO - product page
- ✨ React Node JS Purity - the open-source version 🚀🔥
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-PerfectUI 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.
Step #1 - Clone/download the sources
Step #2 - Install Dependecies
Step #3 - Set up the SQLite database (create tables)
Step #4 - 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:
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.
Full-Stack React Purity - Charts Page
Full-Stack React Purity - Calendar Page
Full-Stack React Purity - Widgets Page
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.
Thanks for reading! For more resources, please access: