{"id":13415300,"url":"https://github.com/fullstackreact/react-daily-ui","last_synced_at":"2025-10-24T06:08:48.891Z","repository":{"id":66101511,"uuid":"67814645","full_name":"fullstackreact/react-daily-ui","owner":"fullstackreact","description":"100 Days of React UI Interfaces - https://codepen.io/collection/DoLZRm/4/","archived":false,"fork":false,"pushed_at":"2017-09-11T07:11:57.000Z","size":43825,"stargazers_count":933,"open_issues_count":4,"forks_count":331,"subscribers_count":75,"default_branch":"master","last_synced_at":"2025-05-23T22:06:40.855Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/fullstackreact.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}},"created_at":"2016-09-09T16:28:18.000Z","updated_at":"2025-05-04T18:33:26.000Z","dependencies_parsed_at":"2023-05-18T08:30:29.995Z","dependency_job_id":null,"html_url":"https://github.com/fullstackreact/react-daily-ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fullstackreact/react-daily-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Freact-daily-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Freact-daily-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Freact-daily-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Freact-daily-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fullstackreact","download_url":"https://codeload.github.com/fullstackreact/react-daily-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstackreact%2Freact-daily-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280749688,"owners_count":26384133,"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-24T02:00:06.418Z","response_time":73,"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-07-30T21:00:46.779Z","updated_at":"2025-10-24T06:08:48.864Z","avatar_url":"https://github.com/fullstackreact.png","language":"CSS","readme":"\u003cp align=\"center\"\u003e\n\u003ca href=\"https://fullstackreact.com/react-daily-ui/001-sign-up-form/\" target=\"_blank\"\u003e\u003cimg src=\"resources/images/readme/react-daily-ui-github-header.jpg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# React Daily UI [![Dolpins](https://cdn.rawgit.com/fullstackreact/google-maps-react/master/resources/readme/dolphins-badge-ff00ff.svg)](https://www.fullstackreact.com)\n\n\u003e A collection of React apps built by [Jack Oliver](http://www.jackoliver.info/react-daily-ui/) and blogged by [Sophia Shoemaker](https://twitter.com/wisecobbler) and the [Fullstack React](https://fullstackreact.com) team.\n\u003e\n\u003e Check out the full [CodePen collection here](http://codepen.io/collection/DoLZRm/).\n\nWe are excited to be partnering with [Jack Oliver](https://twitter.com/mrjackolai), a designer and developer who is embarking on an ambitious project to create [100 React UI components in 100 days](http://codepen.io/collection/DoLZRm/). \n\nIn the series, we will be taking Jack Oliver's code and design and desconstructing them to give you a step-by-step picture of how all the pieces fit together and hopefully inspire you to write some React code of your own.\n\n## Days\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003eDay\u003c/th\u003e\n            \u003cth\u003ePreview\u003c/th\u003e\n            \u003cth\u003eDescription\u003c/th\u003e\n            \u003cth\u003eBlog\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003cstrong\u003e001\u003c/strong\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003cimg src=\"resources/images/readme/thumbnails/daily-ui-001.png\"\u003e\u003c/img\u003e\u003c/td\u003e\n            \u003ctd\u003eCreate a sign-up form\u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\u003ca href=\"https://fullstackreact.com/react-daily-ui/001-sign-up-form/\"\u003e:white_check_mark: :dolphin: :arrow_right:\u003c/a\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003cstrong\u003e002\u003c/strong\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003cimg src=\"resources/images/readme/thumbnails/daily-ui-002.png\"\u003e\u003c/img\u003e\u003c/td\u003e\n            \u003ctd\u003eCheckout form\u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\u003ca href=\"https://fullstackreact.com/react-daily-ui/002-checkout/\"\u003e:white_check_mark: :dolphin: :arrow_right:\u003c/a\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003cstrong\u003e003\u003c/strong\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003cimg src=\"resources/images/readme/thumbnails/daily-ui-003.png\"\u003e\u003c/img\u003e\u003c/td\u003e\n            \u003ctd\u003eNetflix Landing Page\u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\u003ca href=\"https://fullstackreact.com/react-daily-ui/003-landing-page/\"\u003e:white_check_mark: :dolphin: :arrow_right:\u003c/a\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003cstrong\u003e004\u003c/strong\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003cimg src=\"resources/images/readme/thumbnails/daily-ui-004.png\"\u003e\u003c/img\u003e\u003c/td\u003e\n            \u003ctd\u003e3D Calculator\u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\u003ca href=\"https://fullstackreact.com/react-daily-ui/004-calculator/\"\u003e:white_check_mark: :dolphin: :arrow_right:\u003c/a\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003cstrong\u003e005\u003c/strong\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003cimg style=\"width:352px\" src=\"resources/images/readme/thumbnails/daily-ui-005.png\"\u003e\u003c/img\u003e\u003c/td\u003e\n            \u003ctd\u003eWeather App Icon\u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\u003ca href=\"https://fullstackreact.com/react-daily-ui/005-app-icon/\"\u003e:white_check_mark: :dolphin: :arrow_right:\u003c/a\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003cstrong\u003e006\u003c/strong\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003cimg src=\"resources/images/readme/thumbnails/daily-ui-006.png\"\u003e\u003c/img\u003e\u003c/td\u003e\n            \u003ctd\u003eProfile Page\u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\u003ca href=\"https://fullstackreact.com/react-daily-ui/006-profile-page/\"\u003e:white_check_mark: :dolphin: :arrow_right:\u003c/a\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003cstrong\u003e007\u003c/strong\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003cimg style=\"width:352px\" src=\"resources/images/readme/thumbnails/daily-ui-007.png\"\u003e\u003c/img\u003e\u003c/td\u003e\n            \u003ctd\u003eReactagram\u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\u003ca href=\"https://fullstackreact.com/react-daily-ui/007-reactagram/\"\u003e:white_check_mark: :dolphin: :arrow_right:\u003c/a\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Instructions\nAll of Jack Oliver's original designs and code are hosted on Codepen. For the purposes of this blog series, we have created this Github repository containing all the code for each daily component. \n\nWe've used the [`create-react-app`](https://github.com/facebookincubator/create-react-app) tool to set up our environment. To run the code `cd` into each individual folder and run the following commands:\n\n1. `npm install` will install all the libraries you'll need to get each Daily UI running.\n\n2. `npm start` compiles all of your files and boots up a dev server. Browse to `localhost:3000` to find your application running.\n\n\n## Prerequisites\nYou'll need to have `node` and `npm` installed on your machine to run the commands. Head over to the [node.js](https://nodejs.org/en/) website and download the neccessary files to get those installed. \n\n## Authors\nThis series is a joint effort between:\n\n* [Jack Oliver](http://www.jackoliver.info/react-daily-ui/) \n* [Sophia Shoemaker](https://twitter.com/wisecobbler) \n* [The Fullstack React Team](https://fullstackreact.com)\n\n## Contributing\n\n```shell\ngit clone https://github.com/fullstackreact/react-daily-ui.git\ncd react-daily-ui\n```\n___\n\n# Fullstack React Book\n\n\u003ca href=\"https://fullstackreact.com\"\u003e\n\u003cimg align=\"right\" src=\"resources/images/readme/fullstack-react-hero-book.png\" alt=\"Fullstack React Book\" width=\"155\" height=\"250\" /\u003e\n\u003c/a\u003e\n\nThis React Daily UI repository was built alongside the React Daily UI blog series.\n\nThis repo was written and is maintained by the [Fullstack React](https://fullstackreact.com) team. In the book we cover many more projects like this. We walk through each line of code, explain why it's there and how it works.\n\nThis collection React application only a sample of what our book offers. If you're looking to learn React, there's no faster way than by spending a few hours with the Fullstack React book.\n\n\u003cdiv style=\"clear:both\"\u003e\u003c/div\u003e\n\n","funding_links":[],"categories":["CSS","Lecture"],"sub_categories":["Program Language"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstackreact%2Freact-daily-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffullstackreact%2Freact-daily-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstackreact%2Freact-daily-ui/lists"}