This is a rather simple dictionary web app powered by the Free Dictionary API, Unsplash API and icanhazdadjoke API.
- Live Site: https://lexicogranary.vercel.app/
- Webpack Docs
- ESLint Docs
- React Docs
- Thinking in React
- MDN Docs
- Font Awewsome Docs - I used their svg icons with react.
- Prettier Docs
- TypeScript Handbook/docs
- TailwindCSS Docs
- Dictionary API
- icanhazdadjoke API
- Unsplash Documentation
- Postman docs
- react-modal docs
- Next.js App Router Docs
- Jest Docs
- React Testing Library
- tw-colors npm package
- eslint-plugin-react
- typescript-eslint
- eslint-plugin-react
- eslint-plugin-jsx-a11y package - Good eslint plugin for accessibility.
- classnames
- NPM Package: Number To Words
- Tailwindcss Class Sorting with Prettier - Nice prettier plugin for sorting classes
- unsplash-js - Unsplash SDK
- react-modal
- jest-axe
- react-test-renderer
- Canvas - Color Wheel
- Hex to Hsl
- Online JSON Validator
- WebAIM Contrast Checker
- Google Fonts
- Convertio - File Converter - Used it to convert from .png to .ico
- LoremFlickr
- Quickly generate your favicon from an image by uploading your image below. Download your favicon in the most up to date formats.
- PIXELS to SVG - Pen by Shaw
- The Current Epoch Unix Timestamp
- Free music for video creators - 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 - I used it to make the logo and the not-found.svg image.
- ChatGPT
- Copilot
- Image Resizer.com
- Restfox
- Postman - I used the last two to test some apis.
- Thesaurus.com
- W3C Markup Validation Service
- How do I update Node.js?
- Define global variable with webpack
- Load Fonts with Webpack and Font Face
- How to pass .env file variables to webpack config?
- 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?
- Combining multiple git repositories
- Error "Your push would publish a private email address"
- Technical reason behind height: 100vh (working) vs min-height: 100vh (not working) for body?
- Does a favicon have to be 32×32 or 16×16?
- Difference between hard wrap and soft wrap?
- Can't access ref.current using React and Typescript
- Is it semantically correct in HTML to markup a list with only a single list item?
- rejected master -> master (non-fast-forward)
- In HTML5, should the main navigation be inside or outside the element?
- Is well formed without a ?
- Should input element be inside form or not?
- Relative paths with fetch in Javascript
- Is it a good practice to use Material Ui and tailwind in a same project
- Make scroll bar take no space / prevent layout shift
- Why would max-width not work on this?
- What website allows you to type in a word and it gives you the associated color?
- Naming convention between python backend and javascript frontend
- What is Mocking?
- How can I deal with floating point number precision in JavaScript? [duplicate]
- Is floating-point math broken?
- "React does not recognize the
fetchPriorityprop on a DOM element." warning in NextJS?
- Try Public APIs for free
- icanhazdadjoke
- Free Dictionary API
- Unsplash API
- Pexels API I didn't use it due to limits on the number of requests, but it is still useful.
- Dictionary web app | Frontend Mentor - A reference
- Cambridge English Dictionary - I used the word definitions pages as a reference.
- Different books pixel art set - Adobe
- Opened book with pixel art style
- Eloquent JavaScript Book - every chapter has a blockquote at the top and I used that blockquote as a referenece for the joke from icanhazdadjoke
- Next.js + Jest
- open-sauced github repo - used its tests as a reference for how to write tests
- How do I use React with Webpack?
- A scalable naming convention for style-variables - Naming convention for the themes
- Control focus with tabindex
- Building a Custom Dropdown Component in React (Step by Step)
- [BUG] npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\userName\AppData\Roaming\npm' #6971
- Reddit - Is eslint-plugin-react is unnecessary if i use @typescript-eslint/eslint-plugin and eslint-plugin-react-hooks?
- Do search engines perform JS rendering while crawling?
- How to execute code client-side only
- sync problem with file with lower case and upper case
- Semantic Commit Messages
- conventional-commit-types
: The Image Embed element - There's a great piece of information about having to add
role='img'to svg images to improve accessibility due to a VoiceOver bug- About fully qualified domain names (FQDNs)
- Nome de Domínio Totalmente Qualificado (FQDN): Guia Completo com Exemplos
- Failed to parse URL when fetching localhost using Server Components
- Why use the figure element?
- Create Accessible Hypertext Links
- Links and Hypertext
- How to Write Better Git Commit Messages – A Step-By-Step Guide
- Write tests. Not too many. Mostly integration.
- What are the advantages of using testing frameworks like Jest?
- What is code coverage?
- Testing with Jest Snapshots: First Impressions
- React Testing Library
- What's the difference of Jest's
describe()andtest()functions? - How to ignore or skip some test files ?
- Experienced Devs: How should I be testing my components? What makes a test meaningful when creating React components?
The name's Rafael Maia. You can find me on Instagram, X, and Linkedin. Or you can send me an email [email protected].
I am a freelancer, so you can also find me on Fiverr and Upwork.
Check out my last post on Buy Me a Coffee and Medium about Data Structures.
Also, if you liked this project, consider buying me a coffee ☕. I'd be grateful if you could support my work 😁👍❤!
You could also consider helping the Free Dictionary API because your donation directly helps the development of Dictionary API and keeps the server running.