All Projects → khaledosman → stencil-realworld-app

khaledosman / stencil-realworld-app

Licence: other
An example SPA written with Stencil

Programming Languages

CSS
56736 projects
typescript
32286 projects
HTML
75241 projects

Projects that are alternatives of or similar to stencil-realworld-app

stencil-boilerplate
A Stencil app boilerplate including routing, Redux etc.
Stars: ✭ 51 (-8.93%)
Mutual labels:  stencil, stenciljs, stencil-router
Stencil
A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
Stars: ✭ 9,880 (+17542.86%)
Mutual labels:  stencil, stenciljs
nuxt-stencil
Easy Stencil.js component library integration with Nuxt.js.
Stars: ✭ 16 (-71.43%)
Mutual labels:  stencil, stenciljs
solar-components
Web Components Implementation of Solar Design System
Stars: ✭ 16 (-71.43%)
Mutual labels:  stencil, stenciljs
pdf-viewer
PDF viewer web component built in StencilJS. Reusable in Angular, Ionic, React, Vue.JS, etc.
Stars: ✭ 65 (+16.07%)
Mutual labels:  stencil, stenciljs
anywhere-webcomponents
A UI work in progress based on custom elements (web components) for use in anywhere.
Stars: ✭ 17 (-69.64%)
Mutual labels:  stencil, stenciljs
Atoms
Atoms for Blaze UI
Stars: ✭ 1,505 (+2587.5%)
Mutual labels:  stencil, stenciljs
stencil-payment
Payment request API implementation in Stenciljs
Stars: ✭ 28 (-50%)
Mutual labels:  stencil, stenciljs
capacitor-site
Capacitor website
Stars: ✭ 0 (-100%)
Mutual labels:  stencil, stenciljs
block-photos
A photos app built with Ionic and Blockstack as backend.
Stars: ✭ 24 (-57.14%)
Mutual labels:  stencil, stenciljs
ionic-custom-components
🌈 Ionic Tutorial: Mastering Web Components in Ionic Framework. This repo is an Ionic project showcasing Angular custom components and Stencil custom web components.
Stars: ✭ 30 (-46.43%)
Mutual labels:  stencil, stenciljs
generator-stencil
Scaffolding tool 🔨 for Stencil js applications
Stars: ✭ 16 (-71.43%)
Mutual labels:  stencil, stenciljs
Ionic Framework
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
Stars: ✭ 45,802 (+81689.29%)
Mutual labels:  stencil, stenciljs
gatsby-remark-highlight-code
Adds stylish cards and syntax highlighting to code blocks in markdown files
Stars: ✭ 63 (+12.5%)
Mutual labels:  stencil, stenciljs
web-photo-filter
A Web Component to apply Instagram-like WebGL filters to photos
Stars: ✭ 105 (+87.5%)
Mutual labels:  stencil, stenciljs
stencil-tailwind-plugin
Plugin for using tailwindcss with StencilJS
Stars: ✭ 17 (-69.64%)
Mutual labels:  stencil, stenciljs
hotwire-django-realworld
RealWorld Django app built with Turbo!
Stars: ✭ 29 (-48.21%)
Mutual labels:  realworld
domy
Custom Elements Storage
Stars: ✭ 77 (+37.5%)
Mutual labels:  stencil
bulmil
💄 A agnostic UI components library based on Web Components, made with Bulma & Stencil.
Stars: ✭ 121 (+116.07%)
Mutual labels:  stenciljs
react-typescript-hooks-realworld
conduit realworld application with [ React + Typescript + Redux + Hooks ]
Stars: ✭ 20 (-64.29%)
Mutual labels:  conduit

Netlify Status

RealWorld Example App

RealWorld Frontend Build Status

Stencil codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.

So far, I've got all the templates and proper auth in place. You can already register, log-in and change your settings.

Demo    RealWorld

This codebase was created to demonstrate a fully fledged fullstack application built with Stencil including CRUD operations, authentication, routing, pagination, and more.

This not necessarily follows all the best practices for Stencil, as the community is still in its infancy... Thefore, any feedback is welcome, let's make this codebase great! Stencil is a very promising tool and this app could be the starting point for dicussing how to best build components and applications for years to come 😉

For more information on how to this works with other frontends/backends, head over to the RealWorld repo.

How it works

The whole codebase is based on Stencil, having as its single outside dependency (other than stencil-router), the markdown parser marked for the articles' pages. Stencil is built on top of the web-components standard and has a very tiny API, which is a blend of React, Angular and Vue. The whole app has been built on Typescript, as usual for this stack, and you might find your way around easier by taking a look at type definitions.

As the "Conduit" app is quite simple, there's no need for a central state management othern than the user information held in the app-root component. There's an example e2e test, although it can be greatly improved to provide a better example when Stencil fixes tests dependendable upon stencil-router.

Getting started

npm install // or yarn

npm run start // or yarn start

Feel free to file an issue or submit a PR. If you have the time and energy to improve this codebase and keep active in its support, let me know if you want to become a contributor 😉

Stencil, the compiler framework

If you want to learn more about Stencil and start using it, I recommend, first, taking a look at their announcement video. The docs are still a bit incomplete, but are short and straight to the point. If you already know a modern MVC framework you can probably figure it out pretty quickly... as for Typescript, there's no express need for anything other than simple types and interfaces, Typescript in 5 minutes is a great guide to start. Just go for it!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].