Code Monkey home page Code Monkey logo

simple-todos-meteor-semantic-ui's Introduction

Simple Todos with Meteor and Semantic UI

Simple Todos starter app using Meteor framework. Extends simple-todos tutorial to use Semantic UI. http://simple-todos-semantic.meteor.com

Introduction

At OpenStart we are really liking what Meteor 1.0 has to offer, specifically for rapid prototyping full-stack mobile-web, reactive apps, or minimum viable products (MVP).

Meteor also makes it relatively easy to add your UI library of choice when building a nice looking frontend.

Meteor team has already done a great job of making their sample apps look really cool visually. We wanted to extend that coolness with more comprehensive UI frameworks.

Semantic UI is a refreshing alternative to Twitter's popular Bootstrap framework. The UI is more modern, and the class naming cleaner.

This project extends Meteor's simple-todos app that results from their official tutorial.

Objective is to retain simple Single Page App boilerplate with three files (css, html, js), while showcasing key features of SemanticUI and Meteor, that make sense together.

Dependencies

Meteor

https://www.meteor.com

Semantic UI

http://semantic-ui.com | https://github.com/Semantic-Org/Semantic-UI

HighCharts (FREE FOR NON-COMMERCIAL)

http://www.highcharts.com/

Setup instructions

Install meteor framework. All commands use terminal.

curl https://install.meteor.com/ | sh

Fork this repository.

https://github.com/open-start/simple-todos-meteor-semantic-ui.git 

Add Semantic UI package.

meteor add nooitaf:semantic-ui

Add accounts-ui package for authentication.

meteor add accounts-ui accounts-password

Make app secure.

meteor remove insecure

Add publish-subscribe.

meteor remove autopublish

Add HighCharts package

meteor add maazalik:highcharts

Open Issues, Learning

  • Session variables. Calculating private task count seems to behave erratically. Chart does not display total task count on hosted version, does so on local.
  • Reusable chart code. Chart configuration method has hard-coding. Can it be parametrized to instantiate multiple charts using single method call?

Closed Issues

  • Responsive grid. Semantic UI grid seems to respond to screen size by scaling horizontally. Does not automatically occupy next row, when screen size is smaller. This seems to be addressed in v1.0 branch of Semantic UI.

Extended Features

  • Semantic UI Forms, Dividers, Labels, Buttons, Segments, Modal.
  • HighCharts to show a simple reactive dashboard for task completion.

Wish List

It will be nice to add following features as long as we are not complicating the starter app.

  • Web usage analytics
  • Star ratings / voting for tasks
  • Pagination
  • Search

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.