{"id":15171932,"url":"https://github.com/rafaeldevvv/dictionary-web-app","last_synced_at":"2026-02-04T17:03:58.134Z","repository":{"id":236520138,"uuid":"792744074","full_name":"rafaeldevvv/dictionary-web-app","owner":"rafaeldevvv","description":"A dictionary app to look up words","archived":false,"fork":false,"pushed_at":"2024-05-27T13:05:59.000Z","size":13639,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-26T20:53:45.541Z","etag":null,"topics":["dictionary","nextjs","postcss","prettier","react","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://lexicogranary.vercel.app","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/rafaeldevvv.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,"zenodo":null}},"created_at":"2024-04-27T13:01:57.000Z","updated_at":"2025-03-18T05:23:49.000Z","dependencies_parsed_at":"2024-05-19T14:28:39.222Z","dependency_job_id":"bcc7e29f-6a49-42a3-8f34-9cc1a049b4e2","html_url":"https://github.com/rafaeldevvv/dictionary-web-app","commit_stats":null,"previous_names":["rafaeldevvv/dictionary-web-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rafaeldevvv/dictionary-web-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaeldevvv%2Fdictionary-web-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaeldevvv%2Fdictionary-web-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaeldevvv%2Fdictionary-web-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaeldevvv%2Fdictionary-web-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rafaeldevvv","download_url":"https://codeload.github.com/rafaeldevvv/dictionary-web-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaeldevvv%2Fdictionary-web-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29091317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-04T03:31:03.593Z","status":"ssl_error","status_checked_at":"2026-02-04T03:29:50.742Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["dictionary","nextjs","postcss","prettier","react","tailwindcss","typescript"],"created_at":"2024-09-27T09:21:39.796Z","updated_at":"2026-02-04T17:03:58.120Z","avatar_url":"https://github.com/rafaeldevvv.png","language":"TypeScript","funding_links":["https://buymeacoffee.com/rafael.maia/introduction-data-structures","https://www.buymeacoffee.com/rafael.maia"],"categories":[],"sub_categories":[],"readme":"# Dictionary Web App\n\nThis is a rather simple dictionary web app powered by [the Free Dictionary API](https://dictionaryapi.dev), [Unsplash API](https://unsplash.com/developers) and [icanhazdadjoke API](https://icanhazdadjoke.com).\n\n## Table of Contents\n\n-   [Overview](#overview)\n    -   [Screenshots](#screenshots)\n    -   [Links](#links)\n    -   [Tools Used](#tools-used)\n-   [Process](#process)\n    -   [Useful Resources](#useful-resources)\n        -   [Docs](#docs)\n        -   [Packages](#packages)\n        -   [Tools](#tools)\n        -   [Stack Overflow/Exchange Questions](#stack-overflowexchange)\n        -   [APIs](#apis)\n        -   [References](#references)\n        -   [Other](#other)\n-   [Author](#author)\n-   [Donate](#donate)\n\n## Overview\n\n### Screenshots\n\n![light theme Homepage](./screenshots/homepage.png)\n![light theme water page, first screenshot](./screenshots/water-page.png)\n![light theme water page, second screenshot](./screenshots/water-page-2.png)\n![light theme water page, third screenshot](./screenshots/water-page-3.png)\n![light theme water page, fourth screenshot](./screenshots/water-page-4.png)\n![light theme modal](./screenshots/light-theme-modal.png)\n\n![dark theme Homepage](./screenshots/homepage.png)\n![dark theme water page, first screenshot](./screenshots/dark-theme-water-page.png)\n![dark theme water page, second screenshot](./screenshots/dark-theme-water-page-2.png)\n![dark theme water page, third screenshot](./screenshots/dark-theme-water-page-3.png)\n![dark theme water page, fourth screenshot](./screenshots/dark-theme-water-page-4.png)\n![dark theme modal](./screenshots/dark-theme-modal.png)\n\n### Links\n\n-   Live Site: [https://lexicogranary.vercel.app/](https://lexicogranary.vercel.app/)\n\n### Tools Used\n\n-   [next.js](https://nextjs.org)\n-   [React](https://react.dev)\n-   [TypeScript](https://typescriptlang.org)\n-   [ESLint](https://eslint.org)\n-   [tailwindcss](https://tailwindcss.com)\n-   [Prettier](https://prettier.io)\n-   [Font Awesome icons in React](https://docs.fontawesome.com/web/)\n-   [jest](https://jestjs.io)\n\n## Process\n\n### Useful Resources\n\n#### Docs\n\n-   [Webpack Docs](https://webpack.js.org/concepts/)\n-   [ESLint Docs](https://eslint.org/docs/)\n-   [React Docs](https://react.dev/learn)\n-   [Thinking in React](https://react.dev/learn/thinking-in-react)\n-   [MDN Docs](https://developer.mozilla.org/en-US/docs/)\n-   [Font Awewsome Docs](https://docs.fontawesome.com/web/) - I used their svg icons with react.\n-   [Prettier Docs](https://prettier.io/docs/en/)\n-   [TypeScript Handbook/docs](https://www.typescriptlang.org/docs/handbook/)\n-   [TailwindCSS Docs](https://tailwindcss.com/docs/installation)\n-   [Dictionary API](https://dictionaryapi.dev)\n-   [icanhazdadjoke API](https://icanhazdadjoke.com/api)\n-   [Unsplash Documentation](https://unsplash.com/documentation)\n-   [Postman docs](https://learning.postman.com/docs/introduction/overview/)\n-   [react-modal docs](https://reactcommunity.org/react-modal/)\n-   [Next.js App Router Docs](https://nextjs.org/docs/app)\n-   [Jest Docs](https://jestjs.io/docs/getting-started)\n-   [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)\n\n#### Packages\n\n-   [tw-colors npm package](https://www.npmjs.com/package/tw-colors)\n-   [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react#configuration)\n-   [typescript-eslint](https://typescript-eslint.io/getting-started/)\n-   [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react#list-of-supported-rules)\n-   [eslint-plugin-jsx-a11y package](https://www.npmjs.com/package/eslint-plugin-jsx-a11y) - Good eslint plugin for accessibility.\n-   [classnames](https://www.npmjs.com/package/classnames)\n-   [NPM Package: Number To Words](https://www.npmjs.com/package/number-to-words)\n-   [Tailwindcss Class Sorting with Prettier](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) - Nice prettier plugin for sorting classes\n-   [unsplash-js](https://github.com/unsplash/unsplash-js) - Unsplash SDK\n-   [react-modal](https://www.npmjs.com/package/react-modal)\n-   [jest-axe](https://www.npmjs.com/package/jest-axe)\n-   [react-test-renderer](https://www.npmjs.com/package/react-test-renderer)\n\n#### Tools\n\n-   [Canvas - Color Wheel](https://www.canva.com/colors/color-wheel/)\n-   [Hex to Hsl](https://htmlcolors.com/hex-to-hsl)\n-   [Online JSON Validator](https://jsonlint.com)\n-   [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/?fcolor=BC000B\u0026bcolor=FFFFFF)\n-   [Google Fonts](https://fonts.google.com)\n-   [Convertio - File Converter](https://convertio.co/download/7840015b57aba6b84c0dad5e39bc81138e2326/) - Used it to convert from .png to .ico\n-   [LoremFlickr](https://loremflickr.com)\n-   [Quickly generate your favicon from an image by uploading your image below. Download your favicon in the most up to date formats.](https://favicon.io/favicon-converter/)\n-   [PIXELS to SVG - Pen by Shaw](https://codepen.io/shshaw/pen/XbxvNj)\n-   [The Current Epoch Unix Timestamp](https://www.unixtimestamp.com)\n-   [Free music for video creators](https://freetouse.com/music) - I used it for testing the audio functionality as the dictionary api server is not working to retrieve audio files at the time i build this project.\n-   [PIXILART](https://www.pixilart.com) - I used it to make the [logo](https://www.pixilart.com/art/book-sr2f309a6752daws3) and the [not-found.svg](./public/not-found.svg) image.\n-   [ChatGPT](https://chatgpt.com)\n-   [Copilot](https://www.bing.com/chat?q=Microsoft+Copilot\u0026FORM=hpcodx)\n-   [Image Resizer.com](https://imageresizer.com)\n-   [Restfox](https://restfox.dev)\n-   [Postman](https://web.postman.co) - I used the last two to test some apis.\n-   [Thesaurus.com](https://www.thesaurus.com)\n-   [W3C Markup Validation Service](https://validator.w3.org)\n\n#### Stack Overflow/Exchange\n\n-   [How do I update Node.js?](https://stackoverflow.com/questions/8191459/how-do-i-update-node-js)\n-   [Define global variable with webpack](https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack)\n-   [Load Fonts with Webpack and Font Face](https://stackoverflow.com/questions/45489897/load-fonts-with-webpack-and-font-face)\n-   [How to pass .env file variables to webpack config?](https://stackoverflow.com/questions/46224986/how-to-pass-env-file-variables-to-webpack-config)\n-   [How to semantically provide a caption, title or label for a list in HTML](https://stackoverflow.com/questions/1141639/how-to-semantically-provide-a-caption-title-or-label-for-a-list-in-html)\n-   [Windows git \"warning: LF will be replaced by CRLF\", is that warning tail backward?](https://stackoverflow.com/questions/17628305/windows-git-warning-lf-will-be-replaced-by-crlf-is-that-warning-tail-backwar)\n-   [Combining multiple git repositories](https://stackoverflow.com/questions/277029/combining-multiple-git-repositories)\n-   [Error \"Your push would publish a private email address\"](https://stackoverflow.com/questions/43863522/error-your-push-would-publish-a-private-email-address)\n-   [Technical reason behind height: 100vh (working) vs min-height: 100vh (not working) for body?](https://stackoverflow.com/questions/49395367/technical-reason-behind-height-100vh-working-vs-min-height-100vh-not-workin)\n-   [Does a favicon have to be 32×32 or 16×16?](https://stackoverflow.com/questions/4014823/does-a-favicon-have-to-be-32×32-or-16×16)\n-   [Difference between hard wrap and soft wrap?](https://stackoverflow.com/questions/319925/difference-between-hard-wrap-and-soft-wrap)\n-   [Can't access ref.current using React and Typescript](https://stackoverflow.com/questions/72153186/cant-access-ref-current-using-react-and-typescript)\n-   [Is it semantically correct in HTML to markup a list with only a single list item?](https://stackoverflow.com/questions/10834977/is-it-semantically-correct-in-html-to-markup-a-list-with-only-a-single-list-item)\n-   [rejected master -\u003e master (non-fast-forward)](https://stackoverflow.com/questions/11696295/rejected-master-master-non-fast-forward)\n-   [In HTML5, should the main navigation be inside or outside the \u003cheader\u003e element?](https://stackoverflow.com/questions/4870955/in-html5-should-the-main-navigation-be-inside-or-outside-the-header-element)\n-   [Is \u003cinput\u003e well formed without a \u003cform\u003e?](https://stackoverflow.com/questions/3294572/is-input-well-formed-without-a-form#:~:text=without%20a%20\u003cform,used%20to%20build%20user%20interfaces.)\n-   [Should input element be inside form or not?](https://stackoverflow.com/questions/78472673/should-input-element-be-inside-form-or-not/78472938)\n-   [Relative paths with fetch in Javascript](https://stackoverflow.com/questions/36369082/relative-paths-with-fetch-in-javascript)\n-   [Is it a good practice to use Material Ui and tailwind in a same project](https://stackoverflow.com/questions/68218403/is-it-a-good-practice-to-use-material-ui-and-tailwind-in-a-same-project)\n-   [Make scroll bar take no space / prevent layout shift](https://stackoverflow.com/questions/21367441/make-scroll-bar-take-no-space-prevent-layout-shift)\n-   [Why would max-width not work on this?](https://stackoverflow.com/questions/14938428/why-would-max-width-not-work-on-this)\n-   [What website allows you to type in a word and it gives you the associated color?](https://graphicdesign.stackexchange.com/questions/83750/what-website-allows-you-to-type-in-a-word-and-it-gives-you-the-associated-color)\n-   [Naming convention between python backend and javascript frontend](https://stackoverflow.com/questions/46677530/naming-convention-between-python-backend-and-javascript-frontend)\n-   [What is Mocking?](https://stackoverflow.com/questions/2665812/what-is-mocking)\n-   [How can I deal with floating point number precision in JavaScript? [duplicate]](https://stackoverflow.com/questions/1458633/how-can-i-deal-with-floating-point-number-precision-in-javascript)\n-   [Is floating-point math broken?](https://stackoverflow.com/questions/588004/is-floating-point-math-broken?page=1\u0026tab=scoredesc#tab-top)\n-   [\"React does not recognize the `fetchPriority` prop on a DOM element.\" warning in NextJS?](https://stackoverflow.com/questions/78434162/react-does-not-recognize-the-fetchpriority-prop-on-a-dom-element-warning-in)\n\n#### APIs\n\n-   [Try Public APIs for free](https://github.com/public-apis/public-apis?tab=readme-ov-file#dictionaries)\n-   [icanhazdadjoke](https://icanhazdadjoke.com)\n-   [Free Dictionary API](https://dictionaryapi.dev/)\n-   [Unsplash API](https://unsplash.com/documentation)\n-   [Pexels API](https://www.pexels.com/api/documentation/) I didn't use it due to limits on the number of requests, but it is still useful.\n\n#### References\n\n-   [Dictionary web app | Frontend Mentor](https://www.frontendmentor.io/challenges/dictionary-web-app-h5wwnyuKFL) - A reference\n-   [Cambridge English Dictionary](https://dictionary.cambridge.org/us/dictionary/english/) - I used the word definitions pages as a reference.\n-   [Different books pixel art set - Adobe](https://stock.adobe.com/br/images/different-books-pixel-art-set-fantasy-tome-folio-collection-open-closed-textbooks-8-bit-sprite-game-development-mobile-app-isolated-vector-illustration/502502076)\n-   [Opened book with pixel art style](https://www.google.com/url?sa=i\u0026url=https%3A%2F%2Fwww.freepik.com%2Fpremium-vector%2Fopened-book-with-pixel-art-style_19580503.htm\u0026psig=AOvVaw0Si-uM6xDpYjJ30K2eVCtg\u0026ust=1715632198911000\u0026source=images\u0026cd=vfe\u0026opi=89978449\u0026ved=0CBIQjRxqFwoTCNjF6vX7iIYDFQAAAAAdAAAAABAR)\n-   [Eloquent JavaScript Book](https://eloquentjavascript.net/01_values.html) - every chapter has a blockquote at the top and I used that blockquote as a referenece for the joke from icanhazdadjoke\n-   [Next.js + Jest](https://github.com/vercel/next.js/tree/canary/examples/with-jest)\n-   [open-sauced github repo](https://github.com/open-sauced/open-sauced) - used its tests as a reference for how to write tests\n\n#### Other\n\n-   [How do I use React with Webpack?](https://reintech.io/blog/how-to-use-react-with-webpack)\n-   [A scalable naming convention for style-variables](https://medium.com/digio-australia/a-scalable-naming-convention-for-style-variables-6363b916432a) - Naming convention for the themes\n-   [Control focus with tabindex](https://web.dev/articles/control-focus-with-tabindex)\n-   [Building a Custom Dropdown Component in React (Step by Step)](https://kaderbiral26.medium.com/building-a-custom-dropdown-component-in-react-step-by-step-e12f4330fb58)\n-   [\\[BUG\\] npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\\Users\\userName\\AppData\\Roaming\\npm' #6971](https://github.com/npm/cli/issues/6971)\n-   [Reddit - Is eslint-plugin-react is unnecessary if i use @typescript-eslint/eslint-plugin and eslint-plugin-react-hooks?](https://www.reddit.com/r/reactjs/comments/1877xd3/is_eslintpluginreact_is_unnecessary_if_i_use/)\n-   [Do search engines perform JS rendering while crawling?](https://webmasters.stackexchange.com/questions/140250/do-search-engines-perform-js-rendering-while-crawling)\n-   [How to execute code client-side only](https://github.com/vercel/next.js/issues/2473)\n-   [sync problem with file with lower case and upper case](https://github.com/isaacs/github/issues/1520)\n-   [Semantic Commit Messages](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716)\n-   [conventional-commit-types](https://github.com/pvdlg/conventional-commit-types)\n-   [\u003cimg\u003e: The Image Embed element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#identifying_svg_as_an_image) - There's a great piece of information about having to add `role='img'` to svg images to improve accessibility due to a [VoiceOver bug](https://webkit.org/b/216364)\n-   [About fully qualified domain names (FQDNs)](https://kb.iu.edu/d/aiuv#:~:text=A%20fully%20qualified%20domain%20name,hostname%20and%20the%20domain%20name.)\n-   [Nome de Domínio Totalmente Qualificado (FQDN): Guia Completo com Exemplos](https://kinsta.com/wp-content/uploads/2022/07/structure-of-url.png)\n-   [Failed to parse URL when fetching localhost using Server Components](https://github.com/vercel/next.js/issues/48344)\n-   [Why use the figure element?](https://forum.freecodecamp.org/t/why-use-the-figure-element/315116)\n-   [Create Accessible Hypertext Links](https://www.nysed.gov/webaccess/create-accessible-hypertext-links)\n-   [Links and Hypertext](https://webaim.org/techniques/hypertext/)\n-   [How to Write Better Git Commit Messages – A Step-By-Step Guide](https://www.freecodecamp.org/news/how-to-write-better-git-commit-messages/)\n-   [Write tests. Not too many. Mostly integration.](https://kentcdodds.com/blog/write-tests)\n-   [What are the advantages of using testing frameworks like Jest?](https://www.reddit.com/r/reactjs/comments/15ufk9f/what_are_the_advantages_of_using_testing/)\n-   [What is code coverage?](https://www.atlassian.com/continuous-delivery/software-testing/code-coverage)\n-   [Testing with Jest Snapshots: First Impressions](https://benmccormick.org/2016/09/19/074100.html)\n-   [React Testing Library](https://github.com/testing-library/react-testing-library)\n-   [What's the difference of Jest's `describe()` and `test()` functions?](\u003chttps://www.reddit.com/r/javascript/comments/9sy33o/whats_the_difference_of_jests_describe_and_test/#:~:text=describe(name%2C%20fn)%20creates,reads%20as%20a%20natural%20sentence.\u003e)\n-   [How to ignore or skip some test files ?](https://github.com/jestjs/jest/issues/1815)\n-   [Experienced Devs: How should I be testing my components? What makes a test meaningful when creating React components?](https://www.reddit.com/r/reactjs/comments/17cwtbr/experienced_devs_how_should_i_be_testing_my/)\n\n## Author\n\nThe name's Rafael Maia. You can find me on [Instagram](https://www.instagram.com/rafaeldevvv), [X](https://www.twitter.com/rafaeldevvv), and [Linkedin](https://www.linkedin.com/in/rafael-maia-b69662263). Or you can send me an email [rafaeldeveloperr@gmail.com](mailto:rafaeldeveloperr@gmail.com).\n\nI am a freelancer, so you can also find me on [Fiverr](https://www.fiverr.com/rafael787) and [Upwork](https://www.upwork.com/freelancers/~01a4dc9692c96839dc).\n\nCheck out my last post on [Buy Me a Coffee](https://buymeacoffee.com/rafael.maia/introduction-data-structures) and [Medium](https://medium.com/@rafaelmaiaw/introduction-to-data-structures-f4eea777f363) about Data Structures.\n\n## Donate\n\nAlso, if you liked this project, consider [buying me a coffee](https://www.buymeacoffee.com/rafael.maia) ☕. I'd be grateful if you could support my work 😁👍❤!\n\nYou could also consider [helping the Free Dictionary API](https://dictionaryapi.dev/#:~:text=Dictionary%20API%20is%E2%80%94and%20always%20will%20be%E2%80%94free.%20Our%20mission%20is%20to%20provide%20users%20with%20an%20API%20that%20they%20can%20use%20to%20build%20a%20game%2C%20learning%20application%2C%20or%20next%2Dgeneration%20speech%20and%20text%20technology.%20Your%20donation%20directly%20helps%20the%20development%20of%20Dictionary%20API%20and%20keeps%20the%20server%20running) because your donation directly helps the development of Dictionary API and keeps the server running.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafaeldevvv%2Fdictionary-web-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frafaeldevvv%2Fdictionary-web-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafaeldevvv%2Fdictionary-web-app/lists"}