Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jdh2550/hyperapp-responsive-admin
A Hyperapp based responsive admin app with simple graphql integration for login management. Based on a W3.css template.
https://github.com/jdh2550/hyperapp-responsive-admin
Last synced: 2 months ago
JSON representation
A Hyperapp based responsive admin app with simple graphql integration for login management. Based on a W3.css template.
- Host: GitHub
- URL: https://github.com/jdh2550/hyperapp-responsive-admin
- Owner: jdh2550
- License: mit
- Created: 2018-03-06T02:43:49.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-10T13:16:27.000Z (over 6 years ago)
- Last Synced: 2024-08-03T23:03:13.332Z (6 months ago)
- Language: JavaScript
- Size: 85 KB
- Stars: 15
- Watchers: 4
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- hyperawesome - jdh2550/hyperapp-responsive-admin - Responsive app with simple login and GraphQL. (Boilerplates V1)
README
# Hypearapp Responsive Admin
A [Hyperapp](https://github.com/hyperapp/hyperapp) based responsive admin app with simple graphql integration for login management. Based on a W3.css template.
* [GraphQL](https://graphql.org) is used to manage user accounts each with a list of todos
* [W3.CSS](https://www.w3schools.com/w3css) is used to provide a responsive layout
* Secure calls are based on an Authorization header
* Routing for both public and secure routes (using [hyperapp/router](https://github.com/hyperapp/router))
* A simple modal dialog mechanism
* A suggested organization for source code (an attempt at clear separation of concerns)
## Installation
````bash
$ git clone https://github.com/jdh2550/hyperapp-responsive-admin.git
$ cd hyperapp-responsive-admin
$ yarn
$ yarn start
````
AND
````bash
$ cd hyperapp-responsive-admin/server
$ npm install
$ npm start
````
Open up the application at http://localhost:4500/ in your browser
The GraphiQL interactive explorer is available at http://localhost:4501/graphiql
## Getting Started
When launched the app shows a public summary page. If you create an account (top left of page) then when logged in the app also displays the secure "Todo List" route.
Todos can be created, updated and deleted. Todos are implemented with a simple GraphQL server which stores all data in a simple JSON file on disk.
## Overview
This is a bare bones admin app based on "slicing up and converting to hyperapp" a pre-existing W3.css template. It has small (mobile), medium and large responsive layouts. This was then merged with marcusasplund's todo client - but no attempt was made to make the styles match!
It offers simple user authentication and demonstrates the use of @hyperapp/router and a simple modal dialog pattern. To see the authentication in action go ahead and create a new account (top left on the sidebar). You can then add todos which are saved by the server rather than local storage.
It also implements a very simple graphQL server to demonstrate making graphQL calls - the server uses apollo-server-express. Note that I tried to use apollo-client but couldn't get it to play nicely with buble. So I fell back to using the much simpler (but less capable) graphql-request.
## Credits
* The rollup and taskr config is based on https://github.com/tzellman/hyperapp-boilerplate
* The todo app is based on https://github.com/marcusasplund/hyperapp-todo-simple
* The admin template and responsive layout is based on https://www.w3schools.com/w3css/tryw3css_templates_analytics.htm
* The graphql server implementation is based on https://dev-blog.apollodata.com/tutorial-building-a-graphql-server-cddaa023c035