An Awesome Material Dashboard Crafted with Reactjs

An Awesome Material Dashboard Crafted with Reactjs

An awesome Material Dashboard crafted with ReactJs based on Material UI’s components!

Paper and Ink

ReactJs, Material-UI

Paper and Ink is a Free React Dashboard built with:

  • React - React is a JavaScript library for building user interfaces.
  • Material UI - React components for faster and easier web development.
  • Recharts - Redefined chart library built with React and D3.

Features

  • CSS-in-JS styles
  • Create-react-app under the hood
  • Material-UI v4
  • React v16
  • React Hooks
  • React Context
  • React Router Dom v5

Getting Started

clone the repository

$ git clone https://github.com/georgesimos/paper-and-ink.git myproject
$ cd myproject

Install the dependencies and devDependencies

$ npm install

Set environment variables

cp .env.example .env

Start the server

$ npm start

Pages

We have implemented some basic pages, so you can see our template in action.

  • Dashboard
  • Tables
  • Typography
  • Icons

Application Structure


├── public
│   └── images
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
├── src
│   └── assets
│   └── components
│   └── layout
│   └── pages
│   └── routes
│   └── theme
│   └── App.js
│   └── App.test.js
│   └── history.js
│   └── index.js
│   └── serviceWorker.js
│   └── setupTests.js
├── .env.example
├── .eslintrc
├── .gitignore
├── .prettierrc
├── .CHANGELOG.md
├── .jsconfig.json
├── LICENSE
├── package.json
├── README.md
├── yarn.lock

Plugins

Paper and Ink is currently extended with the following plugins. Instructions on how to use them in your own application are linked below.

Plugin README
material-ui plugins/material-ui/README.md
testing-library plugins/testing-library/README.md
node-sass plugins/node-sass/README.md
react plugins/react/README.md
react-router plugins/react-router/README.md
recharts plugins/recharts/README.md
eslint plugins/eslint/README.md
prettier plugins/prettier/README.md

Screenshots

Basil Theme

Crane Theme

Material Theme

Material Dark Theme

Pinky Theme

Rally Theme

Reply Theme

Download Details:

Author: georgesimos

Demo: https://paper-and-ink.netlify.app/

Source Code: https://github.com/georgesimos/paper-and-ink

react reactjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

ReactJS: The Javascript Developer’s Guide

This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.