Linkana Frontend

Linkana is an interactive admin dashboard for managing IoT devices. It's a demonstration of my skills in the front-end.

Installation

• Clone this repo.
• Navigate to the project folder.
• Run npm install.
• Run npm start and start playing with it.

What can you do?

This demo dashboard allows the user to:

• Display data for devices, commands, and apps.
• Do CRUD operations on devices, commands, apps, and users.
• Access a device via a terminal interface.
• Display the current location of each device.
• Customize the overview page UI by dragging and resizing widgets.

Note: The project contains other files and react components this demo does not cover them but, you can of course take a look at them :)

Third-party libraries:

• Bootstrap: For styling.
• Reactstrap: For constructing UI components.
• Redux: For state management.
• Leaflet: For displaying devices' location.
• react-fa-icon-picker: For selecting icons for commands and apps.
• react-responsive-carousel: For displaying a nice carousel.
• recordrtc: For recording voice in the browser.
• react-grid-layout: For making draggable and resizable widgets (check the overview page).
• toastr: For displaying a nice toast after making an action the data.
• reactour: For displaying tour modals.
• monaco-editor-v2: For writing install, update, and remove commands for apps.
• xterm: For accessing devices via a terminal interface.

Note: There is a folder called screenshots which contains screenshots from the dashboard for a quick look :)