aretecode / konsilos

https://konsilos.com/welcome re-imagined

Konsilos

A non-rofit organization. We created this with good intentions, to scratch our itch, hoping this also would benefit people all over the world.

• site & app: https://konsilos.now.sh
• storybook: https://konsilos.now.sh/ui/
• graphql playground: https://konsilos.now.sh/graphql/ (see the "everything" query)
• TODOS

features

• deployment to serverless aws lamda (with ephemeral urls on every pr, and docker setup for custom deploys)
• react SPA (using nextjs, also with service worker / offline support and lighthouse compliance)
• oauth on subscribe button, with a SAAS authentication microservice (using auth2)
• storybook for ui development velocity (aslso available on deployment)
• graphql as a micro api connected to airtable (aslso available on deployment)
• images via cdn with webp format (using sirv)
• svg images (flags, icons, logo)
• semantic html, seo including card previews minimal styles (using styled-components)
• custom responsive css devices
• typescript with all types passing, eslint, prettier, stylelint, editorconfig
• unit testing with storybook snapshots, react-testing-library
• i18n translation
• app domain features
  • family: add & view family (using react hooks, graphql in progress)
  • advice: add & view advice (using react hooks, graphql in progress)

how to run

1. use vscode (for the best experience)
2. use nodejs 12.10.0 (or latest)
3. npm i or yarn (install dependencies)
4. go to env.js file to set your keys
5. run app or storybook

• yarn dev (app)
• yarn dev:server (for using auth0 locally via custom next server)
• yarn dev:storybook (storybook)

folder structure

• /pages contains pages, and the nextjs specific _app & _document
• /server nextjs server using expressjs, added so we can handle route for auth0/user-signin
• /src all non page code
  • /components react components. each component SHOULD have:
    • NAME.test.tsx jest tests
    • NAME.story.tsx
  • /features react components same as ^, but with domain knowledge
  • /graphql graphql specific code (apollo, queries, mutations)
  • /utils utils that can be moved to separate packages
  • AppStyles styled components global styles
  • AppContext provided by pages/_app via nextjs, available to all components (things like url of the page)
  • typings typescript definitions

more scripts

• see package.json
• yarn test (jest)
• yarn lint (lint)

more information

• stack:
  • nextjs
  • typescript
  • react
  • styled-components
  • apollo graphql
• tool stack:
  • jest unit tests
  • storybook
  • zeit now
  • travis ci
  • makefile
  • yarn
  • babeljs
  • docker
• formatting & quality check tools:
  • prettier
  • eslint
  • stylelint
  • dangerjs
  • editorconfig

konsilos's Issues

put todos into issues

Split graphql utils out of the resolvers

docs: fix readme links to ui & graphql

components: split out reusable

Connect state to graphql endpoint