{"id":21043368,"url":"https://github.com/crystallizeapi/product-storytelling-examples","last_synced_at":"2025-10-12T07:38:30.822Z","repository":{"id":43292122,"uuid":"451893944","full_name":"CrystallizeAPI/product-storytelling-examples","owner":"CrystallizeAPI","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-19T09:54:10.000Z","size":4201,"stargazers_count":20,"open_issues_count":0,"forks_count":10,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-05-15T17:47:00.714Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/CrystallizeAPI.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":"2022-01-25T13:45:02.000Z","updated_at":"2025-03-19T06:14:40.000Z","dependencies_parsed_at":"2024-11-15T01:31:25.763Z","dependency_job_id":"bf72d2c1-63a3-42e8-91bf-16b6df491172","html_url":"https://github.com/CrystallizeAPI/product-storytelling-examples","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/CrystallizeAPI/product-storytelling-examples","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Fproduct-storytelling-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Fproduct-storytelling-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Fproduct-storytelling-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Fproduct-storytelling-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CrystallizeAPI","download_url":"https://codeload.github.com/CrystallizeAPI/product-storytelling-examples/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Fproduct-storytelling-examples/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279010666,"owners_count":26084784,"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","status":"online","status_checked_at":"2025-10-12T02:00:06.719Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-19T14:12:35.584Z","updated_at":"2025-10-12T07:38:30.802Z","avatar_url":"https://github.com/CrystallizeAPI.png","language":"TypeScript","readme":"# Remix Boiler Plate\n\n----\n\nThis repository is what we call a \"subtree split\": a read-only copy of one directory of the main repository. \n\nIf you want to report or contribute, you should do it on the main repository: https://github.com/CrystallizeAPI/boilerplates\n\n----\n\nThe product storytelling boilerplate is a minimal eCommerce boilerplate built using Remix and Crystallize. You can also check out the [live demo](https://dounot.milliseconds.live/) of this boilerplate.\n\n![dounot-frontpage](https://user-images.githubusercontent.com/26195876/156512917-e86bc64d-6069-4ed8-9705-74134b40a257.png)\n\n## What this guide covers:\n\n- Setting up your project\n- Instructions for running the project\n- Accessing the development site\n- Folder structure of the boilerplate\n- Editing the components and the overall theme\n- Deploying the project\n\n## Getting Started\n\nTo get started, head over to GitHub and clone [the repository](https://github.com/CrystallizeAPI/product-storytelling-examples). This project contains two folders - remix and service-api. The remix folder contains the application while the service-api folder contains a middleware service that connects your frontend to your backend. You can find a more detailed explanation of what the API does in the [GraphQL Service API documentation](https://crystallize.com/learn/open-source/boilerplates/service-api). Make sure to install all the required packages by running the following command for both the folders:\n\n```bash\nnpm install\n```\n\n## Running the Project\n\nRunning the project in development is very straightforward. To run the project, head over to the ‘remix’ folder and run the following command:\n\n```bash\nnpm run dev\n```\n\n\u003e Note: In order to disable LiveReload on Production we had to create a new NODE_EXECUTION_MODE variable to indicate the correct execution mode to the app.\n\u003e Indeed, Remix was using NODE_ENV correctly but it was always passing NODE_ENV === 'development' to the application.\n\u003e It might be a Remix bug.\n\n\n## Accessing the Development Site\n\n\nOnce the development server is running, you will be able to browse to http://localhost:3000.\n\n![dounot-development](https://user-images.githubusercontent.com/26195876/156513206-abb8cda1-ead0-4cf1-81df-fcca82529ba6.png)\n\n## Folder Structure (Remix)\n\nThis section provides you with a better understanding of the folder structure.\n\n**app/components**\n\nContains all the components used throughout the application\n\n**app/config**\n\nA single file containing the details of the locale\n\n**app/crystallize**\n\nIncludes the GraphQL queries used to fetch data from Crystallize\n\n**app/routes**\n\nHas all the individual pages the website contains\n\n**app/service-api**\n\nThis folder contains all the queries related to the service-api\n\n**app/styles**\n\nThe styles folder has the CSS files needed to style the components\n\n## Editing the theme\n\nAll the theme related information can be edited in the **tailwind.config.js** file. This includes the colors, spacing, typography used throughout the application.\n\n## Editing the components\n\nComponents can be edited by heading over to the **components** folder in **app.** \n\n### Frontpage\n\nThe frontpage contains a grid and it is fetching all the grid related information (including the layout) from Crystallize. You can directly edit the grid in Crystallize for changes to take effect. Editing the styling such as the background and typography can be done in the **grid-item** component.\n\n![dounot-grid](https://user-images.githubusercontent.com/26195876/156513469-1e8d04ba-cbd7-4e4c-a1f4-3e45cc430948.png)\n\n### Product\n\nIndividual product pages are using two components - one is the **product** component that contains the hero section, and the ‘Add to cart’ button and then the **product-body** component that can be edited to change the layout of the marketing information displayed on the page.\n\n### Cart, Checkout, and Confirmation\n\nThe basket, checkout, and the confirmation pages can be edited in their respective files located in the **routes** folder.\n\n## Deploying to Fly.io\n\nThe first step is to install **flyctl.** To do so, head over to the [Fly.io documentation](https://fly.io/docs/getting-started/installing-flyctl/). Once installed, you can sign up or login to Fly by typing the following command:\n\n```bash\nflyctl auth signup\n```\n\nNext step is to build the app which can be done by entering:\n\n```bash\nflyctl launch\n```\n\nLastly, to deploy the application, all you need to do is run:\n\n```bash\nnpm run deploy\n```\n## Next Step: Service API\n\nIn order to manage a fully operational conference website, you need to manage basket validation, payments and such. For that, we have prepared a boilerplate for you, the [Service API boilerplate](https://crystallize.com/learn/open-source/boilerplates/service-api), which you would want to add alongside your project. Follow [our guide](https://crystallize.com/learn/open-source/boilerplates/service-api) for how to set it up.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrystallizeapi%2Fproduct-storytelling-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrystallizeapi%2Fproduct-storytelling-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrystallizeapi%2Fproduct-storytelling-examples/lists"}