{"id":23280550,"url":"https://github.com/vimode/quizzical-app","last_synced_at":"2025-04-06T13:33:58.663Z","repository":{"id":45716599,"uuid":"473936491","full_name":"vimode/quizzical-app","owner":"vimode","description":"📝 Quizzical App is a solo project, part of the Scrimba React Learning path. This project was built with the OpenTriviaDatabase API using ReactJS and styled with styled-components. ","archived":false,"fork":false,"pushed_at":"2022-09-30T13:36:32.000Z","size":96,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-12T19:47:10.960Z","etag":null,"topics":["react","styled-components"],"latest_commit_sha":null,"homepage":"http://scrimba-11-4-quizzical-app.vercel.app/","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/vimode.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}},"created_at":"2022-03-25T08:57:21.000Z","updated_at":"2023-02-09T10:54:05.000Z","dependencies_parsed_at":"2023-01-18T16:49:23.211Z","dependency_job_id":null,"html_url":"https://github.com/vimode/quizzical-app","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/vimode%2Fquizzical-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimode%2Fquizzical-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimode%2Fquizzical-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimode%2Fquizzical-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vimode","download_url":"https://codeload.github.com/vimode/quizzical-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247488995,"owners_count":20947034,"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":["react","styled-components"],"created_at":"2024-12-19T23:36:40.195Z","updated_at":"2025-04-06T13:33:58.631Z","avatar_url":"https://github.com/vimode.png","language":"JavaScript","readme":"# Quizzical App\n\nThis is the solo project for Scrimba Module 12.4\n\n## Overview\n\nBuild a Trivia App with React using the [OpenTriviaDatabase API](https://opentdb.com/) based on the provided Figma design.\n\nObjectives of the Project\n\n- 2 Screens: Start and Quiz\n- Pull 5 questions from OTDB API\n- Tally correct answers after 'Check answers' is clicked and display the correct and incorrect answers for each question and a tally at the bottom with an option to play again.\n\n## Experience, Learning and Notes\n\nThis was a fun and challenging app to build. At surface, it felt really simple to build. And the structure was very straightforward too. But the app logic was not that simple. It's easy to check user responses as soon as its selected but to delay it to when user submits required a different approach as the user was allowed to change their responses any number of times before submitting.\n\nI relied heavily on JS objects and object methods for most of the app logic.\n\nThis was the first time I tried Styled Components for styling instead of regular CSS. And it was really fun using it especially the flexibility it provides with props, nesting and conditionals. The styled component docs were really helpful to start learning and implement everything in the project. The only thing that wasn't very clear about SC in the docs was the way to create and use GlobalStyles for the project.\n\nThe fetched data from the API had some HTML entities, so I changed the default encoding to Bas64 and used the `atob()` function from the Web API. It isn't recommended using it in frontend apps and `encoreURIComponent()` is to be used.\n\nIt was fun to use `useReducer()` hook, was fun to watch chopping down a lot of states and consolidate a lot of logic it in a single function.\n\n## TODO\n\n \n### Extra\n\n- [ ] Fix loading icon appearing late\n\n\n### Repo\n\n- [ ] Add an app diagram\n- [ ] Add figma link and/or desktop screenshot\n- [ ] Add favicon\n\n## Installation\n\nClone the repo\n\n```bash\ncd quizzical-app\nnpm install\nnpm run dev\n\nOpen http://localhost:3000 to view it in the browser\n```\n\n**Available Scripts**\n\n```bash\n# Run the app in development mode\nnpm run dev\n\n# Build the app for production to the `dist` folder\nnpm run build\n\n# Preview the production build from the `dist` folder\nnpm run preview\n\n```\n\n## Resources\n\nOTDB API - https://opentdb.com/api_config.php\n\nStyled-Components docs https://styled-components.com/docs/\n\nuseReducer() - https://reactjs.org/docs/hooks-reference.html#usereducer\n\nBase64 - https://developer.mozilla.org/en-US/docs/Glossary/Base64\n\nencoreURIComponent() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent\n\nSubmitEvent - https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter\n\nNano ID - https://github.com/ai/nanoid\n\nViteJS - https://vitejs.dev/guide/#scaffolding-your-first-vite-project\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvimode%2Fquizzical-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvimode%2Fquizzical-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvimode%2Fquizzical-app/lists"}