Awesome Open Source
Awesome Open Source

🍿 Checklist Tools Website

A user-friendly and fluid interface for using checklists.

Checklist tools website

GitHub license Front‑End_Checklist followed GitHub issues GitHub stars Twitter

All the power of checklists, without the overhead:

  • User-friendly and fluid interface
  • Fast build with Preact and Milligram
  • Generate PDF report
  • Offline checklists storage with LocalStorage
  • Auto-save your progress 🚀
  • 💥 Instant no-config app bundling

Based on checklists:

Use the online version: alexisdanizan.github.io

Installation

Install with npm

npm i checklist-tools-website

Install with Yarn

yarn add checklist-tools-website

Install manually

git clone https://github.com/AlexisDanizan/Checklist-Tools-Website.git
yarn install
# or
npm install

How to use ?

Build with Gulp

gulp build

Built files are available in dist folder.

Customize

Build and serve files with Gulp

gulp build
gulp webserver

The version is available at http://localhost:8080

Add a new Checklist

Use the auto-converter

To convert a checklist to markdown format you can use the bin/mdChecklistToJson.js script. To do this, add your checklist in sample.md and run the command npm mdtojson.
The result of the conversion is in bin/sample.json. Modify your checklist until you get the result.

Add manually

Create a new json files in src/checklist. Sample template:

{
  "name": "Front-dev",
  "group_categories": [
    {
      "title_group": "Head",
      "categories": [
        {
          "title": "Meta tags",
          "tasks": [
            {
              "title": "Doctype",
              "links": [
                {"path":"https://www.w3.org/TR/html5/syntax.html#determining-the-character-encoding",
                  "text":"Determining the character encoding - HTML5 W3C",
                  "type": "link"}
              ],
              "explications":"The Doctype is HTML5 and is at the top of all your HTML pages.",
              "code":"<!doctype html> <!-- HTML5 -->",
              "priority": "high"
            }
          ]
        }
      ]
    }
  ]
}

To make the checklist available in app you need to modify src/stores/checklistStore.js and add import example from '../checklist/example.json';.

Next add it in INITIAL_DATA:

const INITIAL_DATA = {
  checklists: [
    example
  ],
  ...
};

Troubleshooting

The new checklist does not appear in select:

  • Empty the localstorage before add a new checklist.

Contributing

Open an issue or a pull request to suggest changes or additions.

Guide

The Checklist Tools Website repository consists of two branches:

1. master

This branch consists of the current stable branchof Checklist Tools Website.

2. develop

This branch will be used to make some significant changes to the structure, content if needed. It is preferable to use the master branch to fix small errors or add a new checklist.

Support

If you have any question or suggestion, don't hesitate to use Twitter:

Author

Alexis Danizan

Contributors

This project exists thanks to all the people who contribute.

License

Designed and created with ♥ by Danizan Alexis. Licensed under the Apache 2.0 License.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,511,655
Html (419,235
Css (209,838
Api (21,971
Security (8,716
Frontend (6,553
Gulp (2,644
Web Development (2,014
Security Tools (1,690
Localstorage (973
Front End Development (663
Reference (511
Guidelines (318
Checklist (252
Frontend App (145
Related Projects