{"id":16256648,"url":"https://github.com/maoberlehner/well-composed-frontend","last_synced_at":"2025-03-16T13:30:53.014Z","repository":{"id":16229023,"uuid":"79588988","full_name":"maoberlehner/well-composed-frontend","owner":"maoberlehner","description":"This is an example app to show how to build a flexible and modular frontend. The main technologies used are Vue together with Vuex and Nuxt.js in combination with the node-sass-magic-importer.","archived":false,"fork":false,"pushed_at":"2024-10-11T02:08:49.000Z","size":2970,"stargazers_count":22,"open_issues_count":22,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-11T15:45:48.377Z","etag":null,"topics":["avalanche","node-sass-magic-importer","vue","vuex","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maoberlehner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-20T19:06:51.000Z","updated_at":"2024-08-26T09:40:32.000Z","dependencies_parsed_at":"2023-12-01T15:27:31.752Z","dependency_job_id":"4570c845-a5cc-4940-9fe5-857e467d8b0b","html_url":"https://github.com/maoberlehner/well-composed-frontend","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maoberlehner%2Fwell-composed-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maoberlehner%2Fwell-composed-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maoberlehner%2Fwell-composed-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maoberlehner%2Fwell-composed-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maoberlehner","download_url":"https://codeload.github.com/maoberlehner/well-composed-frontend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243815566,"owners_count":20352189,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["avalanche","node-sass-magic-importer","vue","vuex","webpack"],"created_at":"2024-10-10T15:45:51.553Z","updated_at":"2025-03-16T13:30:52.552Z","avatar_url":"https://github.com/maoberlehner.png","language":"JavaScript","funding_links":["https://www.patreon.com/maoberlehner","https://paypal.me/maoberlehner"],"categories":[],"sub_categories":[],"readme":"# A well-composed frontend\n\n[![Patreon](https://img.shields.io/badge/patreon-donate-blue.svg)](https://www.patreon.com/maoberlehner)\n[![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://paypal.me/maoberlehner)\n\nThis is an example app to show how to build a flexible and modular frontend. The main technologies used are [Vue](https://vuejs.org) together with [Vuex](https://vuex.vuejs.org/en/) and [Nuxt.js](https://nuxtjs.org/) in combination with the [node-sass-magic-importer](https://github.com/maoberlehner/node-sass-magic-importer).\n\nThe two main goals of a well-composed frontend are: a solid user experience and a solid developer experience. The former is achieved by building a fast (instantly) loading site with app like behaviour. The later is solved by building upon a solid framework and using components (custom and ready-made) to keep the code DRY.\n\nTo enable (almost) instant loading, server side rendering is utilized to speed up the first view. Vue serves as a very solid framework to build mighty apps upon. Vuex is used to manage the state of the app.\n\nThe combination of webpack and node-sass-magic-importer makes it possible to modularize every aspect of the frontend workflow. Frontend developers are using JavaScript modules for quite some time now and with ES6 it got even more comfortable doing so. Although Sass made it much easier to also modularize your CSS code it is still laking an easy way to load styles from third party modules. For this project [node-sass-magic-importer](https://github.com/maoberlehner/node-sass-magic-importer) is used to load styles from [avalanche](https://avalanche.oberlehner.net/) packages.\n\n## Getting started\n\n- `yarn run init` Install dependencies and set up correct `.env` file.\n- `yarn run api` Start the GraphQL API server.\n- `yarn run dev` Serve with hot reload at localhost:3000.\n- `yarn run build` Build for production.\n- `yarn start` Launch server.\n- `yarn run generate` Generate static project.\n\nFor detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).\n\n## About\n\n### Author\n\nMarkus Oberlehner  \nWebsite: https://markus.oberlehner.net  \nTwitter: https://twitter.com/MaOberlehner  \nPayPal.me: https://paypal.me/maoberlehner  \nPatreon: https://www.patreon.com/maoberlehner\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaoberlehner%2Fwell-composed-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaoberlehner%2Fwell-composed-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaoberlehner%2Fwell-composed-frontend/lists"}