Giter Club home page Giter Club logo

data-dashboard's Introduction

Build a data dashboard with Laravel, Vue and Tailwind: Part I

Let's build a data dashboard together. We will take it slow, starting with a few simple views, then incorporate charts, css and vuex to tie the front end portion together.  Later we will tie in the back end, database, slack notifications, messaging with twilio, 2FA, TDD tests - the works!  I am not entirely sure where will this end, but every post will for sure build from the previous one. You can follow along by following my medium account here

Part I

We cover setting up laravel, some front end bolerplate and generating some mock JSON data that we later render in a vue component.

Part II

We create a table based layout (with flexbox on tailwind css) for the data we generated in the previous part. We then use Vue to sort the results by column.

Part III

Datasets in the real world normally don't come as simple JSON objects. They come from a database storage, and the way to access them is through our backend. In this post we will focus on creating our data source and seeding it.

Part IV

Learning to play with collection mehods to create some reports.

data-dashboard's People

Contributors

sonicfive avatar

Stargazers

 avatar Arif Z avatar Eric Muli avatar Kendi J avatar James Gargette avatar  avatar Terry Mafura avatar Simon Roberts avatar Rob Mills avatar

Watchers

James Cloos avatar  avatar Felipe Balloni Ferreira avatar Simon Roberts avatar

Forkers

minedun6

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.