npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

quizzy

v0.3.9

Published

Quizzes API server and SPA

Downloads

7

Readme

NPM version Build Status Coverage Status npm

Quizzy

A simple quizzes API server and Single Page Application powered by Nodejs, Expressjs, Vuejs and Redis.

Prerequisite

Install NodeJS

Install

$ npm install quizzy

or

$ yarn add quizzy

Usage

Prerequisite : Populate the used redis db with some quizzes (alternative : use POST /quizzes API)

  1. Create a configured quizzy instance with Quizzy factory
  2. start() : starts the server
  3. stop() : closes the server
const Quizzy = require('quizzy')
const quizzy = Quizzy(/*myCustomConfig*/)
quizzy.start()
  .then(() => {
    console.log('ready!')
  })

Features :

  • Play a quiz session with the SPA
  • Sign in with your Google, Twitter, or Facebook account
  • Create and manage quizzes and sessions via APIs
  • i18n compliant

Anatomy of the project

Help about the project structure

assets

Static assets (css, images, ...)

cli

This directory contains all the Single Page Application code powered by Vuejs.

The client part is based on VueJS with vue-i18n, vue-router, and vuex (it can also be used as a boilerplate project for VueJS)

components

Vuejs used components

css
  • style.css : styles applied to the single page app
views

Vuejs views

  • home.vue : welcome view displayed for default routes and when not logged in
  • quiz.vue : main vue that shows quiz questions and post answers to API server
  • quiz-result.vue : shows the quiz result with score and evaluation if enabled in config

lib

This directory contains all the server code powered by Nodejs.

config
routes

Contains all the routes exposed by the express app, including APIs and OAuth2 endpoints

schemas

Contains all the JSON schemas of entities, in YAML format.

services
  • store : Used to store the data model (quizzes and sessions) into memory or redis (feel free to code another implementation)
    • index.js : Generic store interface
    • memory-store.js : Simple store implementation in-memory
    • redis-store.js : Store implementation for a Redis database server
  • body-parser.js : Extended body parser compatible with JSON or YAML payload
  • errors.js : Custom error classes used in the project
  • json-validator.js : JSON schema validator used by the store to validate entities before persist them
  • redis-cli.js : A simple Redis client
  • view-renderer.js : Custom HTML view renderer powered by lodash template
config.js

Configuration loader

helper.js

Util functions

quizzy.js

Main module of the app. It exports a server component with a factory, init, start and stop methods if required by another module else it runs the server.

test

Unit tests in the form of mocha specs

views

Expressjs views used to render HTML pages

More information

The best way to understand how quizzy works is to have a look at unit tests

Build the project

Install dependencies :

$ npm install

or

$ yarn

Build the cli bundle :

$ npm run build

Note :

  • The bundle file is created into assets/app directory
  • if NODE_ENV is set to production, the bundle is uglyfied/minified without sourcemaps.

Start the server :

$ npm start

Note : if NODE_ENV is set to development, the server is started with nodemon and webpack middleware is used to hot reload the cli.

@tocomplete

Enjoy !