-
Console is an Admin template which is basically a set of web pages, built with HTML, CSS, and Javascript or any javascript libraries (in our case ReactJS in conjunction with typescript) used to create the user interface of the backend of a web application. These pre-built pages are integrated with the web application for doing backend tasks like maintaining the website, user and content management, installation and configuration of website software, and tracking data like network traffic and user visits to the website, to improve the performance of the website.
-
REACT JS library Starter repository.
-
ReactJS improves performance due to virtual DOM. The DOM is a cross-platform and programming API which deals with HTML, XML or XHTML. Most of the developers faced the problem when the DOM was updated, which slowed down the performance of the application. ReactJS solved this problem by introducing virtual DOM.
-
ReactJS is choosen by most of the web developers. It is because it offers a very rich JavaScript library. The JavaScript library provides more flexibility to the web developers to choose the approch they want to follow.
Take it for a test drive. We'd love to hear any feedback you have or if you've thought of a new feature.
- With this template, you can easily start a Admin template using Reactjs.
- Rather than spending time on the project setup, get on with the important stuff right away.
- Features
- Getting started
- Project Structure
- Documentation
- Miscellaneous
- Trainings
- Video Tutorials
- Contributing To This Project
- Issues and Discussions
- Stay in touch
- Quick start
- Integrated ESLint, Prettier and Husky
- Simple and Standard scaffolding
- Production-Ready Skeleton
- Common Error Handler
- Authentication and authorization
- Form Validation Using Regex
- Testing: unit and integration tests using Jest
- Environment variables: segregated env files for easier variable management.
- Santizing: sanitize request data against xss and query injection
- CI: Continuous integration
- Docker support
- Git hooks: with husky
- Linting: with ESLint and Prettier
Makes easier to write good redux applications and speeds up development.
- Node https://nodejs.org/en/ use the LTS version
- NPM
Use template strings, object destructuring, arrow functions, Interfaces, JSX syntax and more.
// clone the application
$ git clone https://github.com/NeoSOFT-Technologies/console.git// Install the required npm modules
$ npm installThe env file should be placed in root folder with the following variables.
.env: Default Environment File.env.test: Test Environment File.env.production: Production Environment File.env.staging: Staging Environment File
# .env example
PORT= <port_no_for_application>
REACT_APP_API_BASEURL=<backend_api_base_url>
REACT_APP_CDN_URL=/global
REACT_APP_IMAGES_CDN_URL=<baseurl_where_images_is_situated>
REACT_APP_HOST=<frontend_api_base_url>
# development
$ npm run start
# production mode
$ npm run start:prodFor this project, We chose Jest as our test framework.
# unit tests
$ npm run test
# test coverage
$ npm run test:coverageAll the different build steps are orchestrated via npm scripts.
Npm scripts basically allow us to call (and chain) terminal commands via npm.
This is nice because most JavaScript tools have easy to use command line utilities allowing us to not need grunt or gulp to manage our builds.
If you open package.json, you will see a scripts section with all the different scripts you can call.
To call a script, simply run npm run <script-name> from the command line.
You'll notice that npm scripts can call each other which makes it easy to compose complex builds out of simple individual build scripts.
Below is a list of all the scripts this template has available:
| Npm Script | Description |
|---|---|
start |
Start project in development mode |
start:prod |
this script runs project in production mode |
build |
Full build. Runs ALL build tasks |
clean |
On Run clean the installed node packages |
clean:cdn |
On Run clean css from build |
build:prod |
Runs build and build:css together |
test |
Runs tests using Jest test runner |
eject |
Runs react-scripts eject |
format |
Runs prettier roles on project files |
test:coverage |
Gives the code coverage infrom to table |
lint |
Runs ESLint on project files |
lint:fix |
Runs lint and fix the resolve able errors |
lint:quiet |
Run lint to show errors only |
prepare |
install husky |
precommit |
Runs lint:fix and format before commit |
prepush |
Runs lint before push |
Node Modules folder is the repository of modules/library which you are using inside your project. What ever you are importing in your project that module or library should present inside the mode_module folder.When you do npm install that time that module or the library install inside the node_module folder and one entry added in package.json file. In your case frontend and backend are different project than obviously there will be 2 different node_modules folder for each of them. To check the list of modules used by us in this boilerplate click here
Please find below a detailed description of the app's folder structures:
| Name | Description |
|---|---|
| .github | Contains GitHub settings and configurations, including the GitHub Actions workflows |
| .husky | Contains precommit and prepush rules |
| node_modules | Contains all your npm dependencies |
| public | Contains static files and images |
| public/global/ | Contains static files and images at global scope |
| public/global/css | Contains css files at global scope |
| public/global/images | Contains static images |
| src | Contains your source code that will be compiled to the dist dir |
| src/components/ | Contains the compoments for the template |
| src/pages/ | Contains the template common and specfic pages |
| src/pages/error-pages/ | Contains the all the error pages(400,401,etc) |
| src/pages/features/ | Contains the pages for the admin, tenant & user |
| src/pages/features/admin/ | Contains the pages for the admin |
| src/pages/features/tenant/ | Contains the pages for the tenant |
| src/pages/features/user/ | Contains the pages for the user |
| src/pages/features/login/ | Contains the common login for all |
| src/resources/ | Contains the files for constants and asset |
| src/routes/ | Contain the 3 folders (features , gateway , SaaS) |
| src/routes/features | Contain the routes for the admin, tenant & user |
| src/routes/gateway | Contain the gateway routes for the admin, tenant & user |
| src/routes/saas | Contain the SaaS routes for the admin, tenant & user |
| src/services/ | Contain the api calls and the token sevices |
| src/store/ | Contain the redux toolkit & central store |
| src/store/features | Contain slices for admin, tenant and user |
| src/styles/ | Contain the common sass file for the template |
| src/type/ | Contain the interface for the template |
| src/util/ | Contain the interface for the utilities |
| wiki | Contain concepts and npm modules documentation |
| .eslintignore | Contain the file which are ignored by lint |
| .eslintrc | Config settings for ESLint code style checking |
| .env | contains the enviroment variables |
| .env.production | File that contains enviroment variables at production |
| .env.test | File that contains enviroment variables at testing |
| .env.staging | File that contains enviroment variables at staging |
| Dockerfile | File that contains commands to build docker image |
| docker-compose.yml | File that contains command to build the docker container |
| .dockerignore | Ignore files from adding into an image when building a docker image |
| .gitignore | file specifies intentionally untracked files that Git should ignore |
| .prettierignore | Contain the file which are ignored by prettier |
| prettierrc.json | Config settings for prettier code style checking |
| package.json | File that contains npm dependencies |
| package-lock.json | File that contains complete npm dependency tree |
| tsconfig.json | Config settings for Typescript |
- Axios
- Bootstrap
- compass-mixins
- data-grid
- eslint
- husky
- prettier
- react-dom
- react-redux
- react-router-dom
- react-scripts
- react-toastify
- redux-mock-store
- redux-toolkit
- Concepts Required
- setup
envUsage- How to add a component
- Redux toolkit
- Routes for Page setup
- Routes for SideBar
Contributions are welcome from anyone and everyone. We encourage you to review the guiding principles for contributing
- Website - https://www.neosofttech.com/
- Twitter - @neosofttech
- Meetup - https://www.meetup.com/neosoft-technologies/
- Medium - https://medium.com/@neosofttech-technologies-blog
- GitHub - https://github.com/NeoSOFT-Technologies
- Discord - Nesoft Technologies