{"id":18418715,"url":"https://github.com/c5inco/shrine-compose-stream","last_synced_at":"2025-04-09T15:06:19.001Z","repository":{"id":49825141,"uuid":"388989613","full_name":"c5inco/Shrine-Compose-Stream","owner":"c5inco","description":"Repo for building Shrine with Jetpack Compose, on Material Design Live: https://bit.ly/399Y1XA","archived":false,"fork":false,"pushed_at":"2024-11-03T11:45:12.000Z","size":3841,"stargazers_count":80,"open_issues_count":0,"forks_count":7,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-09T15:06:14.895Z","etag":null,"topics":["android","jetpack-compose","material-design"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/c5inco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2021-07-24T03:32:40.000Z","updated_at":"2025-01-04T07:32:05.000Z","dependencies_parsed_at":"2025-01-01T08:12:34.756Z","dependency_job_id":"bd1e63c4-8e26-4116-869a-9c492d71cee2","html_url":"https://github.com/c5inco/Shrine-Compose-Stream","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c5inco%2FShrine-Compose-Stream","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c5inco%2FShrine-Compose-Stream/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c5inco%2FShrine-Compose-Stream/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c5inco%2FShrine-Compose-Stream/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/c5inco","download_url":"https://codeload.github.com/c5inco/Shrine-Compose-Stream/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248055284,"owners_count":21040157,"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":["android","jetpack-compose","material-design"],"created_at":"2024-11-06T04:14:23.921Z","updated_at":"2025-04-09T15:06:18.978Z","avatar_url":"https://github.com/c5inco.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shrine Compose livestream\nRepo for building Shrine with Jetpack Compose, on Material Design Live. \n\nShrine is an e-commerce Material Design case study: https://material.io/design/material-studies/shrine.html. This is a prototype, focused on translating the design intent, intended for teaching designers and those new to Jetpack Compose on how to build UI.\n\nProgress:\n\n- [x] Backdrop\n- [x] Cart\n- [x] Catalog\n- [ ] Details\n\n![Shrine stickersheet from Material Design website](https://lh3.googleusercontent.com/b84vzNg1_NOFTBQkVpa-lMy4VX-wyIZGET8nbV7MFgcIsnJa8AMojLZXgvM8QFkuSPlCpxr831Z2xdbNbBIR7hsKzIuzgxpY7Rhzcw=w1024-v0)\n\n## 🧑‍💻 Development setup\n\n- [Android Studio Dolphin 2021.3.1](https://developer.android.com/studio) or newer\n- [Compose 1.1.1+](https://developer.android.com/jetpack/compose)\n\n**Note:** Above Studio version required only for specific Animation Inspector features, otherwise Bumblebee 2021.1.1 should still work at a minimum to build and deploy the app\n\n## 📚 Topics covered\n\n### Episode 5 ([stream](https://www.youtube.com/watch?v=zfCgp-r1J1s))\n- Adding the Catalog to the Backdrop front layer\n  - Create the custom Card\n  - Build a weaved list with LazyRow\n- Hook up interaction to add items to the cart\n\n### Episode 4 ([stream](https://www.youtube.com/watch?v=sNxRwTVGuOI))\n- Creating the expanding Cart [BottomSheet](https://material.io/components/sheets-bottom#expanding-bottom-sheet)\n  - Build the collapsed version of Cart\n  - Expanded \u003c-\u003e collapsed transition of Cart\n- ~~Add animated Checkout button to expanded cart~~\n- Hide/show Cart bottom sheet in coordination with Backdrop\n\n### Episode 3 ([stream](https://www.youtube.com/watch?v=nCPEuWCQlWk))\n- Intro to animation\n  - APIs\n    - updateTransition\n    - AnimatedVisibility\n    - AnimatedContent\n  - Animation Inspector\n- Animating parts of Backdrop\n  - [Motion in Shrine](https://material.io/design/material-studies/shrine.html#motion)\n  - TopAppBar Text \u003c-\u003e Search field\n  - Navigation menu items\n\n### Episode 2 ([stream](https://www.youtube.com/watch?v=T9uMu8nIVM0))\n- Intro to state management\n- Slot-based approach in Compose\n- Creating the navigation [Backdrop](https://developer.android.com/jetpack/compose/layouts/material#backdrop) menu\n  - Layers\n    - Placeholder front layer\n    - TopAppBar\n    - Back layer with menu items\n  - State\n    - Show selection of nav menu item\n\n### Episode 1 ([stream](https://www.youtube.com/watch?v=6-1l2nrJpqI))\n- Compose basics on building UI\n- Material Theming\n  - Color, shape, and typography\n  - [Shrine theme](https://material.io/design/material-studies/shrine.html#color)\n- Using Material components in Compose\n  - Button, Card, Icons\n- Creating a List with a complex list item\n- Using @Preview for your design components\n- Deploying our first screen to a device!\n\n## 🧰 Helpful resources\n\n- [Full YouTube Playlist of series and highlights](https://www.youtube.com/playlist?list=PLsoLz-E4Os4UMUXAuhpXaQzN4d8B9mQqV)\n- Compose Material\n  - [Compose Material reference docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary)\n  - [Compose Material Components layout guide](https://developer.android.com/jetpack/compose/layouts/material)\n- General Compose\n  - [Tutorial](https://developer.android.com/jetpack/compose/tutorial)\n  - [Animation](https://developer.android.com/jetpack/compose/animation)\n  - [Other guides](https://developer.android.com/jetpack/compose/documentation)\n  - [Sample apps on GitHub](https://github.com/android/compose-samples)\n- Design resources\n  - \"Slot\" method in Figma - [YouTube](https://www.youtube.com/watch?v=FOGgsPz3UTk), [Community file](https://www.figma.com/community/file/969234311094210750)\n  - [Material studies](https://material.io/design/material-studies)\n- Other tools\n  - [scrcpy](https://github.com/Genymobile/scrcpy) - mirrors physical Android devices on desktop\n  - [Direct](https://github.com/material-motion/direct) - animation spec tool made by Google\n- Kotlin resources\n  - [Learn Kotlin by example](https://play.kotlinlang.org/byExample/overview)\n  - [Beginner Kotlin course on Codeacademy](https://www.codecademy.com/learn/learn-kotlin)\n\n## Disclaimer\n\nThis project is not an official Google project. It is not supported by Google and Google specifically disclaims all warranties as to its quality, merchantability, or fitness for a particular purpose.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc5inco%2Fshrine-compose-stream","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fc5inco%2Fshrine-compose-stream","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc5inco%2Fshrine-compose-stream/lists"}