{"id":13394049,"url":"https://github.com/component-driven/component-driven-development","last_synced_at":"2025-09-09T13:47:18.761Z","repository":{"id":54375217,"uuid":"125911818","full_name":"component-driven/component-driven-development","owner":"component-driven","description":"Component-driven Design Systems Workshop","archived":false,"fork":false,"pushed_at":"2021-05-05T10:44:23.000Z","size":20432,"stargazers_count":60,"open_issues_count":5,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-05-02T00:58:27.862Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://cdds.component-driven.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/component-driven.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"License.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-19T19:47:18.000Z","updated_at":"2023-12-11T06:26:11.000Z","dependencies_parsed_at":"2022-08-13T13:50:17.359Z","dependency_job_id":null,"html_url":"https://github.com/component-driven/component-driven-development","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/component-driven%2Fcomponent-driven-development","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component-driven%2Fcomponent-driven-development/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component-driven%2Fcomponent-driven-development/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/component-driven%2Fcomponent-driven-development/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/component-driven","download_url":"https://codeload.github.com/component-driven/component-driven-development/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248698941,"owners_count":21147561,"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-07-30T17:01:07.170Z","updated_at":"2025-04-13T10:34:18.502Z","avatar_url":"https://github.com/component-driven.png","language":"JavaScript","readme":"# Component-Driven Design systems for React developers workshop\n\n[![Build Status](https://travis-ci.org/component-driven/component-driven-development.svg)](https://travis-ci.org/component-driven/component-driven-development)\n\nThis repository contains exercises for the **Design systems for React developers** workshop.\n\n_Before attending the workshop, please make sure you can run the code in this repository._\n\n**[Try the app](https://cdds.component-driven.dev/), [view the style guide](https://cdds.component-driven.dev/styleguide/), or [view the slides](https://cdds.component-driven.dev/slides/).**\n\n## Prerequisites\n\nBasic JavaScript, CSS, HTML and React experience is required. Styled-components experience and command line basics will be very useful.\n\nTo learn React we recommend [the official tutorial](https://reactjs.org/tutorial/tutorial.html) and [The Beginner’s Guide to React course](https://egghead.io/courses/the-beginner-s-guide-to-react) by Kent C. Dodds.\n\nTo learn styled-components we recommend [Introduction to styled-components](https://egghead.io/lessons/react-introduction-to-styled-components) video lesson.\n\nTo learn command line basics we recommend [Really Friendly Command Line Intro](https://hellowebbooks.com/learn-command-line/) by Tracy Osborn.\n\n## System requirements\n\n- [Git](https://git-scm.com/) 2.0, or newer\n- [Node.js](https://nodejs.org/) 10.0, or newer\n- [npm](https://www.npmjs.com/) 6.0, or newer\n\nWe recommend [nvm](https://github.com/creationix/nvm) or [n](https://github.com/tj/n) to install Node.js.\n\n## Setup\n\nFirst, clone the repository, and install the dependencies:\n\n```\ngit clone https://github.com/component-driven/component-driven-development.git\ncd component-driven-development\nnpm install\n```\n\n### Running the code and exercises\n\nRun:\n\n- `npm start` to work on the exercises, and run the completed app and style guide\n\nOr:\n\n- `npm run exercises` to work on exercises\n- `npm run styleguide` to run the completed style guide\n- `npm run app` to run the completed app\n\n## Tech stack\n\n- [React](https://reactjs.org/)\n- [React Styleguidist](https://react-styleguidist.js.org/)\n- [styled-components](https://www.styled-components.com/)\n- [styled-system](https://styled-system.com/)\n\n## Further resources\n\n- [Awesome component-driven development](https://github.com/component-driven/awesome-list)\n- [Advanced React Component Patterns](https://egghead.io/courses/advanced-react-component-patterns)\n\n## Authors and license\n\n[Artem Sapegin](http://sapegin.me), [Andrey Okonetchnikov](http://okonet.ru/) and [contributors](https://github.com/component-driven/component-driven-development/graphs/contributors).\n\nThis material is available for private, non-commercial use under the Creative Commons Attribution-NonCommercial 4.0 license. If you would like to use this material to conduct your own workshop, please contact us at hi@component-driven.dev.\n\n## Credits\n\nIcons: [Ionicons](https://ionicons.com/), [Font Awesome](https://fontawesome.com/), [Ilya Kolbin](https://thenounproject.com/kolbin.ia/), [Denis Sazhin](https://thenounproject.com/iconka/).\n\nPhotos: [Unsplash](https://unsplash.com/), [Artem Sapegin](http://morning.photos/).\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomponent-driven%2Fcomponent-driven-development","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcomponent-driven%2Fcomponent-driven-development","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomponent-driven%2Fcomponent-driven-development/lists"}