Bark vs. Meow is a fun meme generator which provides people a fun way to create cat or dog based memes in their web browser.
This project fullfils the criteria of building a a performant and scalable front-end single-page (React) application that fulfills a real-world need, with a focus on data and user demand. It features a clean and responsive user interface and utilises HTML, CSS, Bootstrap, JavaScript, React, Node.js.
Bark vs. Meow makes use of two APIs which provide images and associated breed information to the application: TheCatAPI and TheDogAPI.
Initial wireframe and design stages
Landing Page, mobile and Desktop
Android screenshots, meme pages
Mac screenshots, cat page
Mac screenshots, dog pages
Access the deployed application at the following URL: https://animal-meme-generator.netlify.app
Bark vs. Meow runs in the browser and allows users to generate a new meme via a button depending on their preference: a cat or a dog. The associated API is then called and returns an image along with associated breed information. The user can then populate the meme with any text of their choice.
Once a meme has been completed by the user, they can save their meme locally (to the browser) and later retrieve it by clicking on the image on the page.
Bark vs. Meow has an aesthetically pleasing and accessible user interface which utilises Bootstrap as well as taking into account accessibility concerns such as utilising an accessible colour scheme, semantic HTML, alt attributes and ARIA labels.
Following a Behavior-Driven Development (BDD) methodology, Bark vs. Meow uses Vitest with React Testing Library for testing the application's behaviour. During development, the following behaviours were tested:
- The App component renders without throwing an error.
- The cat and dog buttons render in the App component.
- When the user clicks the cat or dog button, input fields (for the meme text) are rendered.
- The meme image is rendered in the Meme component.
- When the user clicks the start again button, the cat and dog buttons are rendered (again).
At the time of publishing this README, all tests pass:
codeswitchstudio: https://github.com/codeswitchstudio
Code0Em: https://github.com/Code0Em
dami-ani: https://github.com/dami-ani
kbearne: https://github.com/kbearne
yasmiinanon: https://github.com/yasmiinanon
- Wireframe: Figma.com.
- Meme references: KnowYourMeme.
- Colour Pallete: Coolors (2024-03-02) The super fast color palettes generator!.
- Colour Contrast Checker: Accessibility Checker (2024-03-02) Accessibility Color Contrast Checker WCAG Compliance.
- Paw-shaped cursors: Zingerbug.com.
- Typefaces:
- Icons: Icon Duck.
- Images and styling elements:
All other credits are cited in the code comments and referenced below.
Select the badge or visit the LICENSE.txt (above) for more information.
DEV Community (2024) Introduction to Testing React Components with Vite, Vitest and React Testing Library.
freeCodeCamp (2022) How to Write Unit Tests for React Apps.
Timothy Amo (2021) Testing Conditional Render In React.