{"id":21710272,"url":"https://github.com/cloudinary-devs/react-quick-start","last_synced_at":"2026-04-12T20:47:42.036Z","repository":{"id":254475369,"uuid":"846647412","full_name":"cloudinary-devs/react-quick-start","owner":"cloudinary-devs","description":"Interactive tutorial to learn how to use the Cloudinary React SDK for delivering and transforming images and videos","archived":false,"fork":false,"pushed_at":"2024-08-25T08:35:18.000Z","size":125,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-25T16:32:06.310Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/cloudinary-devs.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-23T16:46:31.000Z","updated_at":"2024-08-25T08:35:21.000Z","dependencies_parsed_at":"2024-08-25T09:42:02.511Z","dependency_job_id":null,"html_url":"https://github.com/cloudinary-devs/react-quick-start","commit_stats":null,"previous_names":["cloudinary-devs/react-quick_start","cloudinary-devs/react-quick-start"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-devs%2Freact-quick-start","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-devs%2Freact-quick-start/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-devs%2Freact-quick-start/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary-devs%2Freact-quick-start/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudinary-devs","download_url":"https://codeload.github.com/cloudinary-devs/react-quick-start/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244666423,"owners_count":20490286,"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":[],"created_at":"2024-11-25T23:14:29.593Z","updated_at":"2026-04-12T20:47:37.007Z","avatar_url":"https://github.com/cloudinary-devs.png","language":"TypeScript","readme":"# TutorialKit Starter\n\n👋 Welcome to TutorialKit!\n\nThis README includes everything you need to start writing your tutorial content quickly.\n\n## Project Structure\n\n```bash\n.\n├── astro.config.mjs    # TutorialKit uses Astro 🚀 (https://astro.build)\n├── src\n│   ├── ...\n│   ├── content\n│   │   └── tutorial    # Your tutorial content lives here\n│   └── templates       # Your templates (see below for more information)\n├── public\n│   ├── favicon.svg\n│   └── logo.svg        # Default logo used in top left for your tutorial\n├── ...\n├── theme.ts            # Customize the theme of the tutorial\n└── uno.config.ts       # UnoCSS config (https://unocss.dev/)\n```\n\n## Getting Started\n\nMake sure you have all dependencies installed and started the dev server:\n\n```bash\nnpm install\nnpm run dev\n```\n\n## UI Structure\n\n```markdown\n┌─────────────────────────────────────────────────────┐\n│ ● ● ●                                               │\n├───────────────────────────┬─────────────────────────┤\n│                           │                         │\n│                           │                         │\n│                           │                         │\n│                           │                         │\n│                           │       Code Editor       │\n│                           │                         │\n│                           │                         │\n│                           │                         │\n│                           │                         │\n│          Content          ├─────────────────────────┤\n│                           │                         │\n│                           │                         │\n│                           │  Preview \u0026 Boot Screen  │\n│                           │                         │\n│                           │                         │\n│                           ├─────────────────────────┤\n│                           │                         │\n│                           │        Terminal         │\n│                           │                         │\n└───────────────────────────┴─────────────────────────┘\n```\n\n## Authoring Content\n\nA tutorial consists of parts, chapters, and lessons. For example:\n\n- Part 1: Basics of Vite\n  - Chapter 1: Introduction\n    - Lesson 1: Welcome!\n    - Lesson 2: Why Vite?\n    - …\n  - Chapter 2: Your first Vite project\n- Part 2: CLI\n  - …\n\nYour content is organized into lessons, with chapters and parts providing a structure and defining common metadata for these lessons.\n\nHere’s an example of how it would look like in `src/content/tutorial`:\n\n```bash\ntutorial\n├── 1-basics-of-vite\n│   ├── 1-introduction\n│   │   ├── 1-welcome\n│   │   │   ├── content.md    # The content of your lesson\n│   │   │   ├── _files        # Initial set of files\n│   │   │   │   └── ...\n│   │   │   └── _solution     # Solution of the lesson\n│   │   │       └── ...\n│   │   ├── 2-why-vite\n│   │   │   ├── content.md\n│   │   │   └── _files\n│   │   │       └── ...\n│   │   └── meta.md           # Metadata for the chapter\n│   └── meta.md               # Metadata for the part\n├── 2-advanced\n│   ├── ...\n│   └── meta.md\n└── meta.md                   # Metadata for the tutorial\n```\n\n### Supported Content Formats\n\nContent can be either written as Markdown (`.md`) files or using [MDX](https://mdxjs.com/) (`.mdx`). Files have a Front Matter at the top that contains the metadata and everything that comes after is the content of your lesson.\n\n**Example**\n\n```markdown\n---\ntype: lesson\ntitle: Welcome!\n---\n\n# Welcome to TutorialKit!\n\nIn this tutorial we'll walk you through how to setup your environment to\nwrite your first tutorial 🤩\n```\n\nThe metadata file (`meta.md`) of parts, chapters, and lessons do not contain any content. It only contains the Front Matter for configuration.\n\n### Metadata\n\nHere is an overview of the properties that can be used as part of the Front Matter:\n\n| Property        | Required | Type                        | Inherited | Description                                                                                                                                           |\n| --------------- | -------- | --------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |\n| type            | ✅       | `part \\| chapter \\| lesson` | ❌        | The type of the metadata.                                                                                                                             |\n| title           | ✅       | `string`                    | ❌        | The title of the part, chapter, or lesson.                                                                                                            |\n| slug            |          | `string`                    | ❌        | Let’s you customize the URL pathname which is `/:partSlug/:chapterSlug/:lessonSlug`.                                                                  |\n| previews        |          | `Preview[]`                 | ✅        | Configure which ports should be used for the previews. If not specified, the lowest port will be used.                                                |\n| autoReload      |          | `boolean`                   | ✅        | Navigating to a lesson that specifies `autoReload` will always reload the preview. This is typically only needed if your server does not support HMR. |\n| prepareCommands |          | `Command[]`                 | ✅        | List of commands to execute sequentially. They are typically used to install dependencies or to run scripts.                                          |\n| mainCommand     |          | `Command`                   | ✅        | The main command to be executed. This command will run after the `prepareCommands`.                                                                   |\n\nA `Command` has the following shape:\n\n```ts\nstring | [command: string, title: string] | { command: string, title: string }\n```\n\nThe `title` is used as part of the boot screen (see [UI Structure](#ui-structure)).\n\nA `Preview` has the following shape:\n\n```ts\nstring | [port: number, title: string] | { port: number, title: string }\n```\n\nIn most cases, metadata is inherited. For example, if you specify a `mainCommand` on a chapter without specifying it on any of its lessons, each lesson will use the `mainCommand` from its respective chapter. This extends to chapter and parts as well.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudinary-devs%2Freact-quick-start","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudinary-devs%2Freact-quick-start","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudinary-devs%2Freact-quick-start/lists"}