Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vicdata4/seed
Lightweight web application based on web-components.
https://github.com/vicdata4/seed
eslint javascript lit-element opensource redux rollup vaadin web-components
Last synced: 7 days ago
JSON representation
Lightweight web application based on web-components.
- Host: GitHub
- URL: https://github.com/vicdata4/seed
- Owner: vicdata4
- Created: 2019-06-06T13:47:57.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T21:20:32.000Z (over 1 year ago)
- Last Synced: 2023-03-08T10:41:47.886Z (over 1 year ago)
- Topics: eslint, javascript, lit-element, opensource, redux, rollup, vaadin, web-components
- Language: JavaScript
- Homepage: https://vicdata4.github.io/seed/
- Size: 8.96 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Lightweight web application based on web-components.
### folder tree
____ [assets](https://github.com/vicdata4/seed-project/tree/master/assets)\
|
|___ [images](https://github.com/vicdata4/seed-project/tree/master/assets/images)\
| |
|___ [backgrounds](https://github.com/vicdata4/seed-project/tree/master/assets/images/backgrounds)\
|
|___ [pwa_icons](https://github.com/vicdata4/seed-project/tree/master/assets/pwa_icons)\
|
|___ [translations](https://github.com/vicdata4/seed-project/tree/master/assets/translations)\
|
|___ [flags](https://github.com/vicdata4/seed-project/tree/master/assets/translations/flags)\
|___ [scripts](https://github.com/vicdata4/seed-project/tree/master/scripts)\
|
|___ [utils](https://github.com/vicdata4/seed-project/tree/master/scripts/utils)\
|___ [src](https://github.com/vicdata4/seed-project/tree/master/src)\
|___ [components](https://github.com/vicdata4/seed-project/tree/master/src/components)\
|___ [middleware](https://github.com/vicdata4/seed/tree/master/src/middleware)\
|___ [store](https://github.com/vicdata4/seed-project/tree/master/src/store)\
|
|___ [actions](https://github.com/vicdata4/seed-project/tree/master/src/store/actions)\
|
|___ [reducers](https://github.com/vicdata4/seed-project/tree/master/src/store/reducers)\
|___ [utils](https://github.com/vicdata4/seed-project/tree/master/src/utils)\
|___ [views](https://github.com/vicdata4/seed-project/tree/master/src/views)
## Dependencies:
- [Rollup.js](https://rollupjs.org) Module bundler
- [LitElement](https://lit-element.polymer-project.org) Web Components
- [Redux](https://redux.js.org) Store
- [Vaadin](https://www.npmjs.com/package/@vaadin/router) Routing
- [ESLint](https://eslint.org) Coding style
- [Seed Server](https://github.com/vicdata4/seed-server) Node API
- [Seed Catalog](https://github.com/vicdata4/seed-catalog) Web Components Catalog
Link: https://seed-project.dev/
## Run project
```
git clone https://github.com/vicdata4/seed.git
```
* Create `config.js` file from root to specify your `host address` and `token prefix` as below.
```js
export const prefix = 'prefix-string';
export const url = 'http://your-host-address';
```
```
npm install
```
```
npm run dev
```
## Index
[· Routing configuration](#routing)
[· Redux actions](#redux-actions)
[· Translations](#translations)
[· Utils](#utils)
[· Utils dateFormatter()](#dateFormatter)
[· Utils fetch()](#fetch)
[· Utils validators](#validation)
## Routing
#### [src/routing.js](https://github.com/vicdata4/seed/blob/master/src/routing.js)
```js
import { Router } from '@vaadin/router';
import './views/home-view';
import './views/vaadin-view';
import './views/not-found-view';
export const routing = function() {
const outlet = this.shadowRoot.getElementById('root');
const router = new Router(outlet);
var routes = [
{ path: '/', component: 'home-view' },
{ path: '/vaadin', component: 'vaadin-view' },
{ path: '(.*)', component: 'not-found-view' }
// ...
];
};
```
## Redux Actions
#### [src/store/actions/notes-actions.js](https://github.com/vicdata4/seed/blob/master/src/store/actions/notes-actions.js)
```js
// Import fetch.config file to improve your performance.
import fetch, { http } from '../fetch.config';
export const addNote = (body) => {
return async(dispatch) => {
const response = await fetch(http.post(body));
if (!response.error) {
dispatch({ type: 'ADD_NOTE', payload: response });
} else {
dispatch({ type: 'CATCH_ERROR', payload: response });
}
};
};
```
Go to [src/store/actions/notes-actions.js](https://github.com/vicdata4/seed/blob/master/src/store/actions/notes-actions.js) to see more examples with GET and DELETE on redux and check [src/store/fetch.config.js](https://github.com/vicdata4/seed/blob/master/src/store/fetch.config.js) file to configure your fetch options.
## Translations
#### Config file: [assets/translations/index.js](https://github.com/vicdata4/seed/blob/master/assets/translations/index.js)
```js
// how tu use
import { locales } from 'assets/translations';
${locales.home_title}
${locales.home_title_sub}
${locales.content}
```
## Utils
#### `dateFormatter()`
#### [src/utils/functions.js](https://github.com/vicdata4/seed/blob/master/src/utils/functions.js)
Date-formatter allows to customize your own date-formats.
By default some presets are already defined such as `default`, `short` and others.
#### How to use
```js
import { dateFormatter } from 'src/utils/functions';
const date = dateFormatter(Date.now());
console.log(date.default); // "September 7, 2019"
console.log(date.short); // "Sep 7"
console.log(date.day); // "Sunday"
console.log(date.hour); // "15:53"
```
#### `fetch()`
#### [src/store/fetch.config.js](https://github.com/vicdata4/seed/blob/master/src/store/fetch.config.js)
Configure your fetch options and error codes from `fetch.config.js` file.
```js
// Import fetch.config file to improve your performance.
import fetch, { http } from 'src/store/fetch.config';
import { url } from 'config.js';
const body = {};
// get request
const getExample = await fetch(http.get());
// get request - optional param (api path)
const getExample = await fetch(http.get(), `${url}/notes`);
const postExample = await fetch(http.post(body));
const deleteExample = await fetch(http.delete());
```
## Validation
#### [src/utils/functions.js](https://github.com/vicdata4/seed/blob/master/src/utils/functions.js)
##### `loginValidator()`
##### `emailValidator()`
### PWA Configuration
[manifest.json](/manifest.json)
[sw.js](/sw.js) service-worker
from `index.html`
```html
```
```js
window.onload = () => {
'use strict';
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js');
}
};
```
### Seed Server
[Node API | Authentication](https://github.com/vicdata4/seed-server.git)
### Seed Catalog
Seed-catalog is a free and open-source `web-components library`. It contains CSS-styles and standard-web based templates such as buttons, modals, dropdowns and other interface components.
[Seed Catalog repository](https://github.com/vicdata4/seed-catalog)
#### Documentation
[Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
[Polymer Project](https://www.polymer-project.org/)
[Conventional commits](https://www.conventionalcommits.org/)