{"id":19102038,"url":"https://github.com/khaledosman/stencil-realworld-app","last_synced_at":"2025-04-18T19:31:47.672Z","repository":{"id":42221879,"uuid":"166559504","full_name":"khaledosman/stencil-realworld-app","owner":"khaledosman","description":"An example SPA written with Stencil","archived":false,"fork":false,"pushed_at":"2023-05-15T07:50:10.000Z","size":1326,"stargazers_count":62,"open_issues_count":5,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-01T16:52:49.371Z","etag":null,"topics":["conduit","mvc-framework","realworld","stencil","stencil-patterns","stencil-router","stenciljs","typescript"],"latest_commit_sha":null,"homepage":"https://stencil-realworld.netlify.app/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/khaledosman.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-19T15:07:09.000Z","updated_at":"2024-05-01T16:52:49.373Z","dependencies_parsed_at":"2023-02-06T11:16:11.452Z","dependency_job_id":null,"html_url":"https://github.com/khaledosman/stencil-realworld-app","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/khaledosman%2Fstencil-realworld-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khaledosman%2Fstencil-realworld-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khaledosman%2Fstencil-realworld-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khaledosman%2Fstencil-realworld-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/khaledosman","download_url":"https://codeload.github.com/khaledosman/stencil-realworld-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223783210,"owners_count":17201913,"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":["conduit","mvc-framework","realworld","stencil","stencil-patterns","stencil-router","stenciljs","typescript"],"created_at":"2024-11-09T03:53:40.280Z","updated_at":"2025-04-18T19:31:47.667Z","avatar_url":"https://github.com/khaledosman.png","language":"CSS","funding_links":[],"categories":["typescript"],"sub_categories":[],"readme":"[![Netlify Status](https://api.netlify.com/api/v1/badges/70d889f0-bfb5-4986-ae37-c83b0f0faced/deploy-status)](https://app.netlify.com/sites/stencil-realworld/deploys)\n# ![RealWorld Example App](logo.png)\n\n[![RealWorld Frontend](https://img.shields.io/badge/realworld-frontend-%23783578.svg)](http://realworld.io)\n[![Build Status](https://travis-ci.com/hcavalieri/stencil-realworld-app.svg?branch=master)](https://travis-ci.com/hcavalieri/stencil-realworld-app)\n\n\u003e ### Stencil codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://github.com/gothinkster/realworld) spec and API.\n\nSo far, I've got all the templates and proper auth in place. You can already register, log-in and change your settings.\n\n### [Demo](https://stencil-realworld.netlify.app/)\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;[RealWorld](https://github.com/gothinkster/realworld)\n\nThis codebase was created to demonstrate a fully fledged fullstack application built with **[Stencil](https://stenciljs.com/)** including CRUD operations, authentication, routing, pagination, and more.\n\nThis 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 😉\n\nFor more information on how to this works with other frontends/backends, head over to the [RealWorld](https://github.com/gothinkster/realworld) repo.\n\n## How it works\n\nThe 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.\n\nAs 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`.\n\n## Getting started\n\n```\nnpm install // or yarn\n\nnpm run start // or yarn start\n```\n\nFeel 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 😉\n\n## Stencil, the compiler framework\n\nIf you want to learn more about Stencil and start using it, I recommend, first, taking a look at their [announcement video](https://www.youtube.com/watch?v=UfD-k7aHkQE). [The docs](https://stenciljs.com/) 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](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html) is a great guide to start. Just go for it!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhaledosman%2Fstencil-realworld-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkhaledosman%2Fstencil-realworld-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhaledosman%2Fstencil-realworld-app/lists"}