Full-Stack Seed project generated by React App Generator top of Soft Ui Dashboard design. The backend logic is provided by a simple, easy-to-extend
API Server that manages the Authentication flow (login, registration, logout) using JSON Web Tokens
(JWT).
๐ Build Timestamp
2022-10-12 10:44
-
React Frontend:
Soft UI Dashboard
(open-source)M-UI
based design crafted by Creative-TimUI Kit
: 70+ components,8 Sample Pages
,3 Customized Plugins
-
API Backend Server:
NodeJS
/Express
/ SQLiteTypeScript
, Joy for validation- DB Layer:
TypeORM
,SQLite
persistence - Auth: Passport /
passport-jwt
strategy - API Definition - the unified API structure implemented by this server
Links
-
๐ React Soft UI Dashboard - LIVE Demo (from a similar product)
-
๐ Free Support (registered users) via
Email
andDiscord
-
โ PRO Version Available -
enhanced UI
and morefeatures
Being a full-stack product, the backend and the frontend should be compiled and started separately. Before starting to compile the product, make sure you have the following tools installed in the environment:
- NodeJS - version
14.x
or higher - GIT - used to clone tjhe sources from Github
- Python3 - used in many tools
Step 1 - Once the project is downloaded, change the directory to
react-ui
.
$ cd react-ui
Step 2 - Install dependencies via NPM or yarn
$ npm i
// OR
$ yarn
Step 3 - Start in development mode
$ npm run start
// OR
$ yarn start
At this point, the app is available in the browser localhost:3000
(the default address).
Step 1 - Change the directory to
api-server-nodejs
$ cd api-server-nodejs
Step 2 - Install dependencies via NPM or yarn
$ npm i
// OR
$ yarn
Step 3 - Run the SQLite migration via TypeORM
$ npm run typeorm migration:run
// OR
$ yarn typeorm migration:run
Step 4 - Start the API server (development mode)
$ npm run dev
// OR
$ yarn dev
The API server will start using the PORT
specified in .env
file (default 5000).
< ROOT / src >
|
|-- config/
| |-- config.ts # Configuration
| |-- passport.ts # Define Passport Strategy
|
|-- migration/
| |-- some_migration.ts # database migrations
|
|-- models/
| |-- activeSession.ts # Sessions Model (Typeorm)
| |-- user.ts # User Model (Typeorm)
|
|-- routes/
| |-- users.ts # Define Users API Routes
|
|
|-- index.js # API Entry Point
|-- .env # Specify the ENV variables
|
|-- ************************************************************************
The SQLite Path is set in .env
, as SQLITE_PATH
Generate migration:
$ yarn typeorm migration:generate -n your_migration_name
run migration:
$ yarn typeorm migration:run
For more components, pages and priority on support, feel free to take a look at this amazing starter:
Soft UI Dashboard is a premium React Design now available for download as a full-stack app. Made of hundred of elements, designed blocks, and fully coded pages, Soft UI Dashboard PRO is ready to help you create stunning websites and web apps.
- ๐ React Soft UI Dashboard PRO - Product Page
- โ
Enhanced UI
- more pages and components - โ
Priority
on support
- โ
React Soft Ui Dashboard - Full-Stack Seed project generated by App Generator.