The latest articles on DEV Community by Shiv (@undrthegraveyard). https://dev.to/undrthegraveyard https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2208799%2F7903ff6c-c806-41e5-bfa8-c86f720c3012.jpeg https://dev.to/undrthegraveyard en Shiv Sat, 19 Oct 2024 02:15:17 +0000 https://dev.to/undrthegraveyard/diving-into-reactjs-4eid https://dev.to/undrthegraveyard/diving-into-reactjs-4eid <h2> Meme Generator </h2> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fversion-1.0.0-blue.svg%3FcacheSeconds%3D2592000" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fversion-1.0.0-blue.svg%3FcacheSeconds%3D2592000" alt="Version" width="90" height="20"></a></p> <p>Meme Generator is a fun and interactive web application that allows users to create custom memes using various templates. I've been learning about software development from an educational platform for a couple of months, and this project was part of the curriculum. </p> <h2> Table of Contents </h2> <ol> <li>Demo</li> <li>Features</li> <li>Tech Stack</li> <li>Installation</li> <li>Usage</li> <li>Author</li> <li>License</li> <li>Show Your Support</li> </ol> <h2> Demo </h2> <p>Want to see the Meme Generator in action? Check out our live demo!</p> <p><a href="https://meme-generator-weld-pi.vercel.app/" rel="noopener noreferrer">Click here to view the demo</a> &lt;!-- Add your demo link here --&gt;</p> <h2> Features </h2> <ul> <li> <strong>Dynamic Meme Generation</strong>: Fetch random meme images from an API.</li> <li> <strong>Customizable Text</strong>: Add top and bottom text to create unique memes.</li> <li> <strong>Responsive Design</strong>: Optimized for both desktop and mobile viewing.</li> <li> <strong>Real-time Preview</strong>: See your meme update as you type.</li> <li> <strong>Clean UI</strong>: Simple and intuitive user interface.</li> </ul> <h2> Tech Stack </h2> <ul> <li> <strong>Frontend</strong>: React.js</li> <li> <strong>Build Tool</strong>: Vite for fast and efficient development</li> <li> <strong>Styling</strong>: LESS for advanced styling capabilities</li> <li> <strong>State Management</strong>: React Hooks (useState, useEffect)</li> <li> <strong>API Integration</strong>: Fetch API for retrieving meme templates</li> </ul> <h2> Installation </h2> <ol> <li>Clone the repository: </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code> git clone https://github.com/undrthegraveyard/meme_generator.git </code></pre> </div> <ol> <li>Navigate to the project directory: </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code> <span class="nb">cd </span>meme_generator </code></pre> </div> <ol> <li>Install dependencies: </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code> npm <span class="nb">install</span> </code></pre> </div> <ol> <li>Start the development server: </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code> npm run dev </code></pre> </div> <h2> Usage </h2> <ol> <li>Open the application in your browser.</li> <li>Click the "Get a new meme image" button to load a random meme template.</li> <li>Enter your desired text in the "Top text" and "Bottom text" fields.</li> <li>The meme will update in real-time as you type.</li> <li>Save or share your created meme (feature to be implemented).</li> </ol> <h2> Author </h2> <p>👤 <strong>Shivam Agarwal</strong></p> <ul> <li>Twitter: <a href="https://x.com/shivam_agarwaal" rel="noopener noreferrer">@shivam_agarwaal</a> </li> <li>Github: <a href="https://github.com/undrthegraveyard" rel="noopener noreferrer">@undrthegraveyard</a> </li> </ul> <h2> License </h2> <p>This project is licensed under the MIT License.</p> <h2> Show your support </h2> <p>Give a 👍🏻 if you liked it!</p> react javascript learning webdev