{"id":21307523,"url":"https://github.com/jdegand/react-madlibs","last_synced_at":"2026-05-11T03:51:16.813Z","repository":{"id":110668802,"uuid":"459705263","full_name":"jdegand/react-madlibs","owner":"jdegand","description":"50 React Projects for the Static Web Project Idea - Mad Libs","archived":false,"fork":false,"pushed_at":"2022-02-16T18:34:15.000Z","size":367,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-15T20:12:44.651Z","etag":null,"topics":["react","react-router"],"latest_commit_sha":null,"homepage":"https://jdegand.github.io/react-madlibs/","language":"JavaScript","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/jdegand.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":"2022-02-15T18:39:52.000Z","updated_at":"2023-04-03T20:56:07.000Z","dependencies_parsed_at":"2023-07-17T08:47:01.839Z","dependency_job_id":null,"html_url":"https://github.com/jdegand/react-madlibs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jdegand/react-madlibs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Freact-madlibs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Freact-madlibs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Freact-madlibs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Freact-madlibs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdegand","download_url":"https://codeload.github.com/jdegand/react-madlibs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Freact-madlibs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32880788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-10T13:40:02.631Z","status":"online","status_checked_at":"2026-05-11T02:00:05.975Z","response_time":120,"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":["react","react-router"],"created_at":"2024-11-21T16:32:25.702Z","updated_at":"2026-05-11T03:51:16.768Z","avatar_url":"https://github.com/jdegand.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eReact Mad Libs\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n   Solution to a challenge from \u003ca href=\"https://50reactprojects.com/\" target=\"_blank\"\u003e50 react projects for the static web\u003c/a\u003e.\n\u003c/div\u003e\n\n## Table of Contents\n\n- [Overview](#overview)\n  - [Built With](#built-with)\n  - [Thoughts](#thoughts)\n- [Requirements](#requirements)\n- [Improvements](#improvements)\n- [Useful Resources](#useful-resources)\n\n## Overview\n\n[Live Link](https://jdegand.github.io/react-madlibs)\n\n![](react-madlibs-homepage.png)\n\n![](react-madlibs-scunthorpe.png)\n\n![](react-madlibs-cupertino.png)\n\n![](react-madlibs-predictive.png)\n\n### Built With\n\n- React\n- React Router \n\n### Thoughts\n\n- I didn't really create stories.  All you need to do is add more input boxes and add the name to state. \n- Making a story generic and flexible is the hard part of creating a mad lib. \n- I used arrays to create provide words on first run vs using a button to get a random word\n\n- I switched gears when I explored controlling what you could type - leading to the topics of the mad-libs.  \n\n- There is a site called madtakes that served as an inspiration.  \n\n- Looked into reusable form component with context api by following a dev.to article\n- Context api creates performance problems especially where many input fields would be re-rendered on each change.\n- Have to look into useMemo and other advanced techniques and do more research\n\n## Requirements\n\n- [ ] Create a story template with select words replaced with text inputs that specify a category of word to add.\n- [ ] Create a few more stories and the ability to save and rest the answers to each story.\n- [ ] Add the ability to share a saved story with a link.\n\n## Improvements\n\n- Styling\n- Use advanced React Router techniques ie using outlets etc. \n- Validation in forms / use a React form library\n\n### Useful Resources\n\n- [MadTakes](https://www.madtakes.com/) - Mad Libs site \n- [Dev.to](https://dev.to/trishathecookie/react-creating-a-reusable-form-using-react-context-5eof) - react context\n- [Stack Overflow](https://stackoverflow.com/questions/56729279/redirect-to-another-component-after-submit-in-react) - redirect after submit\n- [Pluralsight](https://www.pluralsight.com/guides/how-to-use-react-context-to-share-data-between-components) - context api\n- [Stack Overflow](https://stackoverflow.com/questions/52398046/cant-get-input-text-boxes-and-buttons-the-same-size) - input boxes same size\n- [YouTube](https://www.youtube.com/watch?v=RI8zO7l93Gc) - Vanilla JS Mad Lib Tutorial\n- [W3 Schools](https://www.w3schools.com/react/react_forms.asp) - React forms\n- [Qz](https://qz.com/1373489/the-scunthorpe-problem-when-regular-people-get-caught-in-the-internets-profanity-filter/) - Scunthorpe problem\n- [Vice](https://www.vice.com/en/article/9kmp9v/life-on-the-internet-is-hard-when-your-last-name-is-butts) - Scunthorpe problem\n- [BoredPanda](https://www.boredpanda.com/people-with-dirty-last-names-problems/?utm_source=google\u0026utm_medium=organic\u0026utm_campaign=organic) - dirty names\n- [YourDictionary](https://examples.yourdictionary.com/examples-of-compounds.html) - compound words\n- [Grammarly](https://www.grammarly.com/blog/autocorrect-text-fails/) - autocorrect fails\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Freact-madlibs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdegand%2Freact-madlibs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Freact-madlibs/lists"}