Gamified olive-group-gamified

Gamified is pathway of learner to achive award,badgets and points. Here, admin can created pathway with different component and in each component admin can specify task and each task will be awared with specific point and badget.

System Requirement

• Windows/Ubuntu
• React 18
• Node v17
• npm v8.6.0

npm package installation

Open our command prompt or terminal. In your React project, please install olive-group-gamified npm package

npm install olive-group-gamified --legacy-peer-deps

Gamified Component import in React Application

To use our npm package please open one of your react component. Here, I have shown example to import Components into default App.js react component

import React from 'react'
import {Gamified,ReputationPoint} from 'olive-group-gamified'

function App() {
  return (<div>
              <Gamified>
              <ReputationPoint>
          </div>)

export default Gamified;

Import individual Single Component

import React from 'react'
import {ReputationPoint} from 'olive-group-gamified'

function App() {
  return (<div>
             <ReputationPoint>
          </div>)

export default Gamified;

npm update packages

npm update olive-group-gamified --legacy-peer-deps

Development

• You can make react component on this "src" folder .
• Once you finished develop you need to upload files "src/libary" folder file and paste in "src/olive-group-gamified" folder
• Go on "olive-group-gamified" folder
• Update npm version on "src/olive-group-gamified/package.json" . Ex : "version": "1.0.9" . Every time you update your component you need to update version otherwise it will give you issue while we do publish
• Now we need to build our npm module . Need to do "npm run build" from "src/olive-group-gamified/" folder
• Login into to npmjs "npm login"
• Enter your username "*******"
• Enter your password "******"
• Enter you email address "*******"
• OTP will send into an email address and paste that code on command line
• now you need to do "npm publish" . Now this will update our npm module

Special Thanks for

• React Bootstrap
• Froala Editor
• Multiple Select
• Font Awesome