Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rafaeldevvv/dictionary-web-app
A dictionary app to look up words
https://github.com/rafaeldevvv/dictionary-web-app
dictionary nextjs postcss prettier react tailwindcss typescript
Last synced: 4 days ago
JSON representation
A dictionary app to look up words
- Host: GitHub
- URL: https://github.com/rafaeldevvv/dictionary-web-app
- Owner: rafaeldevvv
- Created: 2024-04-27T13:01:57.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2024-05-19T14:14:34.000Z (8 months ago)
- Last Synced: 2024-05-19T14:28:36.280Z (8 months ago)
- Topics: dictionary, nextjs, postcss, prettier, react, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://lexicogranary.vercel.app
- Size: 10.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dictionary Web App
This 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).
## Table of Contents
- [Overview](#overview)
- [Screenshots](#screenshots)
- [Links](#links)
- [Tools Used](#tools-used)
- [Process](#process)
- [Useful Resources](#useful-resources)
- [Docs](#docs)
- [Packages](#packages)
- [Tools](#tools)
- [Stack Overflow/Exchange Questions](#stack-overflowexchange)
- [APIs](#apis)
- [References](#references)
- [Other](#other)
- [Author](#author)
- [Donate](#donate)
## Overview
### Screenshots
### Links
- Live Site: [https://lexicogranary.vercel.app/](https://lexicogranary.vercel.app/)
### Tools Used
- [next.js](https://nextjs.org)
- [React](https://react.dev)
- [TypeScript](https://typescriptlang.org)
- [ESLint](https://eslint.org)
- [tailwindcss](https://tailwindcss.com)
- [Prettier](https://prettier.io)
- [Font Awesome icons in React](https://docs.fontawesome.com/web/)
- [jest](https://jestjs.io)
## Process
### Useful Resources
#### Docs
- [Webpack Docs](https://webpack.js.org/concepts/)
- [ESLint Docs](https://eslint.org/docs/)
- [React Docs](https://react.dev/learn)
- [Thinking in React](https://react.dev/learn/thinking-in-react)
- [MDN Docs](https://developer.mozilla.org/en-US/docs/)
- [Font Awewsome Docs](https://docs.fontawesome.com/web/) - I used their svg icons with react.
- [Prettier Docs](https://prettier.io/docs/en/)
- [TypeScript Handbook/docs](https://www.typescriptlang.org/docs/handbook/)
- [TailwindCSS Docs](https://tailwindcss.com/docs/installation)
- [Dictionary API](https://dictionaryapi.dev)
- [icanhazdadjoke API](https://icanhazdadjoke.com/api)
- [Unsplash Documentation](https://unsplash.com/documentation)
- [Postman docs](https://learning.postman.com/docs/introduction/overview/)
- [react-modal docs](https://reactcommunity.org/react-modal/)
- [Next.js App Router Docs](https://nextjs.org/docs/app)
- [Jest Docs](https://jestjs.io/docs/getting-started)
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
#### Packages
- [tw-colors npm package](https://www.npmjs.com/package/tw-colors)
- [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react#configuration)
- [typescript-eslint](https://typescript-eslint.io/getting-started/)
- [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react#list-of-supported-rules)
- [eslint-plugin-jsx-a11y package](https://www.npmjs.com/package/eslint-plugin-jsx-a11y) - Good eslint plugin for accessibility.
- [classnames](https://www.npmjs.com/package/classnames)
- [NPM Package: Number To Words](https://www.npmjs.com/package/number-to-words)
- [Tailwindcss Class Sorting with Prettier](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) - Nice prettier plugin for sorting classes
- [unsplash-js](https://github.com/unsplash/unsplash-js) - Unsplash SDK
- [react-modal](https://www.npmjs.com/package/react-modal)
- [jest-axe](https://www.npmjs.com/package/jest-axe)
- [react-test-renderer](https://www.npmjs.com/package/react-test-renderer)
#### Tools
- [Canvas - Color Wheel](https://www.canva.com/colors/color-wheel/)
- [Hex to Hsl](https://htmlcolors.com/hex-to-hsl)
- [Online JSON Validator](https://jsonlint.com)
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/?fcolor=BC000B&bcolor=FFFFFF)
- [Google Fonts](https://fonts.google.com)
- [Convertio - File Converter](https://convertio.co/download/7840015b57aba6b84c0dad5e39bc81138e2326/) - Used it to convert from .png to .ico
- [LoremFlickr](https://loremflickr.com)
- [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/)
- [PIXELS to SVG - Pen by Shaw](https://codepen.io/shshaw/pen/XbxvNj)
- [The Current Epoch Unix Timestamp](https://www.unixtimestamp.com)
- [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.
- [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.
- [ChatGPT](https://chatgpt.com)
- [Copilot](https://www.bing.com/chat?q=Microsoft+Copilot&FORM=hpcodx)
- [Image Resizer.com](https://imageresizer.com)
- [Restfox](https://restfox.dev)
- [Postman](https://web.postman.co) - I used the last two to test some apis.
- [Thesaurus.com](https://www.thesaurus.com)
- [W3C Markup Validation Service](https://validator.w3.org)
#### Stack Overflow/Exchange
- [How do I update Node.js?](https://stackoverflow.com/questions/8191459/how-do-i-update-node-js)
- [Define global variable with webpack](https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack)
- [Load Fonts with Webpack and Font Face](https://stackoverflow.com/questions/45489897/load-fonts-with-webpack-and-font-face)
- [How to pass .env file variables to webpack config?](https://stackoverflow.com/questions/46224986/how-to-pass-env-file-variables-to-webpack-config)
- [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)
- [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)
- [Combining multiple git repositories](https://stackoverflow.com/questions/277029/combining-multiple-git-repositories)
- [Error "Your push would publish a private email address"](https://stackoverflow.com/questions/43863522/error-your-push-would-publish-a-private-email-address)
- [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)
- [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)
- [Difference between hard wrap and soft wrap?](https://stackoverflow.com/questions/319925/difference-between-hard-wrap-and-soft-wrap)
- [Can't access ref.current using React and Typescript](https://stackoverflow.com/questions/72153186/cant-access-ref-current-using-react-and-typescript)
- [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)
- [rejected master -> master (non-fast-forward)](https://stackoverflow.com/questions/11696295/rejected-master-master-non-fast-forward)
- [In HTML5, should the main navigation be inside or outside the element?](https://stackoverflow.com/questions/4870955/in-html5-should-the-main-navigation-be-inside-or-outside-the-header-element)
- [Is well formed without a ?](https://stackoverflow.com/questions/3294572/is-input-well-formed-without-a-form#:~:text=without%20a%20: 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)
- [About fully qualified domain names (FQDNs)](https://kb.iu.edu/d/aiuv#:~:text=A%20fully%20qualified%20domain%20name,hostname%20and%20the%20domain%20name.)
- [Nome de Domínio Totalmente Qualificado (FQDN): Guia Completo com Exemplos](https://kinsta.com/wp-content/uploads/2022/07/structure-of-url.png)
- [Failed to parse URL when fetching localhost using Server Components](https://github.com/vercel/next.js/issues/48344)
- [Why use the figure element?](https://forum.freecodecamp.org/t/why-use-the-figure-element/315116)
- [Create Accessible Hypertext Links](https://www.nysed.gov/webaccess/create-accessible-hypertext-links)
- [Links and Hypertext](https://webaim.org/techniques/hypertext/)
- [How to Write Better Git Commit Messages – A Step-By-Step Guide](https://www.freecodecamp.org/news/how-to-write-better-git-commit-messages/)
- [Write tests. Not too many. Mostly integration.](https://kentcdodds.com/blog/write-tests)
- [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/)
- [What is code coverage?](https://www.atlassian.com/continuous-delivery/software-testing/code-coverage)
- [Testing with Jest Snapshots: First Impressions](https://benmccormick.org/2016/09/19/074100.html)
- [React Testing Library](https://github.com/testing-library/react-testing-library)
- [What's the difference of Jest's `describe()` and `test()` functions?]()
- [How to ignore or skip some test files ?](https://github.com/jestjs/jest/issues/1815)
- [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/)
## Author
The 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 [[email protected]](mailto:[email protected]).
I am a freelancer, so you can also find me on [Fiverr](https://www.fiverr.com/rafael787) and [Upwork](https://www.upwork.com/freelancers/~01a4dc9692c96839dc).
Check 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.
## Donate
Also, 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 😁👍❤!
You 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.