https://github.com/kazvee/meme-maker

🖼️ Redux application that enables users to create custom memes 🤣
https://github.com/kazvee/meme-maker

react react-bootstrap react-redux reactjs redux thunk thunk-middleware

Last synced: 2 months ago
JSON representation

🖼️ Redux application that enables users to create custom memes 🤣

• Host: GitHub
• URL: https://github.com/kazvee/meme-maker
• Owner: kazvee
• Created: 2024-03-15T15:22:04.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-17T19:19:00.000Z (over 2 years ago)
• Last Synced: 2025-03-28T06:31:55.607Z (about 1 year ago)
• Topics: react, react-bootstrap, react-redux, reactjs, redux, thunk, thunk-middleware
• Language: JavaScript
• Homepage:
• Size: 10.8 MB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Meme Maker 🖼️

## Description

Meme Maker is a Redux application that enables users to create custom memes! 😎

## Purpose

This learning project covers Reducers, Actions, and the Store structure as key Redux concepts.  

It also explores more advanced concepts such as API interaction and handling asynchronous actions with Thunk middleware for Redux.

## Final Product

### Screenshot of Initial View

### Demo Video

https://github.com/kazvee/meme-maker/assets/109990289/d75548b9-bbbb-43a3-8c7d-56d6dace0f0e

![Screenshot of Initial View](/src/assets/Meme_Maker_Initial_View.png)

### Screenshot of User Memes

![Screenshot of User Memes](/src/assets/Meme_Maker_User_Meme_View.png)

## Features

- Loads a selection of meme base images via the Imgflip API

- Users can load more blank meme images to browse through

- When ready to make a meme, users can add their own custom meme text

- Meme images can easily be saved for sharing on social media

- Bootstrap styling is minimal to avoid distracting from the meme images

## How to Use

- To make a meme:

  - Enter some Top and/or Bottom text

  - Click on your preferred meme image

  - Your new custom meme will appear below

- To browse a wider selection of base images, click the Load 10 More Memes button

## Installation

### Dependencies

- redux

- react-redux

- redux-thunk

- react-dom

- react-bootstrap

- reduxjs/toolkit

### Getting Started

- Fork this repository to your own GitHub account.

- Clone your fork onto your local device.

- Install all dependencies using the `npm i` (or `npm install`) command.

- Navigate to the `/src/actions/` folder.

  - Use the `secrets.EXAMPLE.js` file for guidance if needed.

  - Create a new `secrets.js` file in the same folder with your API credentials.

- Start the web server using the `npm start` command.

- Navigate to [http://localhost:3000](http://localhost:3000/) in your browser.

- Start making some memes! 😃