HyperCanvas

A meme generator app featuring props, state management, and conditional rendering through interactive user input.

HyperCanvas is an interactive single-page web application that allows users to create customized memes by adding their own text to randomly selected meme images. The project highlights core React concepts such as state management, event handling, and conditional rendering, helping to solidify these skills in a practical and engaging way. By leveraging props, state, and hooks like `useState` and `useEffect`, the application allows users to easily generate meme templates, customize them with captions, and view the changes in real time. The Meme Generator emphasizes the importance of responsive UI, with each component designed to handle user interaction smoothly. By managing the state effectively, the app is capable of storing and updating meme texts and images dynamically, creating a fun and engaging user experience. Technologies used: React 18.3.1 vitejs

App on Netlify: HyperCanvas

Repo on GitHub: HyperCanvas

  1. Defined the project requirements and objectives to create a meme generator that is both engaging and functional for users.
  2. Established the basic structure of the application with functional components, including a main form for user input and a display area for generated memes.
  3. Utilized `useState` to manage both text input fields and image states, ensuring that user inputs were captured and reflected in real time.
  4. Implemented the `useEffect` hook to fetch meme images from an external API, managing side effects and storing the results in component state.
  5. Created an event handler to fetch and display a random meme image when the user clicks a button, highlighting the use of dynamic content in React.
  6. Developed a form with controlled components, allowing users to input custom text for the top and bottom sections of the meme.
  7. Rendered the customized meme with React’s conditional rendering to dynamically update text overlays and image content.

Video Demonstration:



Screenshots: