Giter Club home page Giter Club logo

tree-facet-component-app's Introduction

Tree Facet Component App

Table of contents

General info

Tree Facet Component app is a web based, mobile responsive application to the show tree view of items from a flat array of categories.

Built With

Application is developed using,

  • React
  • Redux
  • Node: v14.15.4
  • SCSS
  • Bootstrap
  • FontAwesome
  • Jest/ enzyme
  • Webpack/ babel

Installation

Make sure that you have Node.js v14.15.4(or above) and NPM version 6.14.10(or above) installed in your local development environment.

Clone this repo to a desired local directory by using

  git clone --depth=1 https://github.com/ImChamZ/tree-facet-component-app.git <YOUR_PROJECT_NAME>

Extract and navigate into the project folder by using

  cd <YOUR_PROJECT_NAME>

Open a new terminal or open the project in a desired IDE.

For the first time use install NPM dependencies and serve application in the local env by using,

  npm run app:setup

Install NPM dependencies by using, (use for separate installations)

  npm install

Serve the application in the development version by using,

  npm run dev

Execute test cases by using,

  npm run test

Generate a production ready build by using,

  npm run build

Tree Facet Component App should up and running. Go to 'http://localhost:3000' in your browser.

Enjoy...........

Usage

  • In the main view, you will see two panels side by side.
  • User can use the left side panel to select required/ desired categories by clicking the checkbox of relevant category.
  • Click on the category name label will toggle the view of the child categories of each main category.
  • Once user select a list of categories and click on the "Add Selected Category(s)" button, the right side panel will get populated with the selected categories.
  • User can use the right side panel to either remove each item by pressing the "Delete" icon on the right side of each category or can remove all selected items by pressing the "Remove All Selected Category(s)" button.
  • User can click on the icon button on the header which will toggle the view of the selected categories between list view and tree view.

Authors

  • Chamara Chathuranga

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

tree-facet-component-app's People

Contributors

imchamarac avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.