Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/evavic44/rocketmeme

⚡ A multipurpose meme marketplace and editor for creating, downloading and sharing memes with a ready to use API powered by Hasura GraphQL
https://github.com/evavic44/rocketmeme

framer-motion hackathon hacktoberfest hasura hasura-graphql javascript meme-api meme-generator memes nodejs react reactjs styled-components utterances vitejs

Last synced: about 2 months ago
JSON representation

⚡ A multipurpose meme marketplace and editor for creating, downloading and sharing memes with a ready to use API powered by Hasura GraphQL

Awesome Lists containing this project

README

        




Rocketmeme


A multipurpose meme marketplace and editor for creating and downloading memes. View meme collection, browse different meme categories, like share and save memes.



























code style: prettier
















Rocketmeme - Create, share & download memes or use our powerful API | Product Hunt

# 👀 Preview

Click this link to view rocketmeme


Rocketmeme Preview


How to run locally ✨


Follow these steps below to run rocketmeme locally in your machine. We are using vite.js to bootstrap this application. You can read their docs for more info.


## 🧩 Prerequisites

In other to run our react app, make sure you have the following installed locally.

- Node.js - vite requires node at least version 10.16.0

### Clone this repository

Clone this repository to your local machine.

```shell
git clone https://github.com/Evavic44/rocketmeme.git
```

### Cd client

Change directory into the client folder. This is where the frontend code lives.

```shell
cd client
```

### Install NPM

```shell
npm install
```

### Run

Run the development server to view the app.

```shell
npm run dev
```

Now you can navigate to [http://localhost:3000](http://localhost:3000/) to view the app.


Adittional Commands ✨


### Build

```
npm run build
```

This is a preview of your dev server.

### Serve

```
npm run serve
```

This is a preview of your build

## Rocketmeme API

```css
/* API Endpoint */
https://rocketmeme-user.hasura.app/v1/graphql
```

With Hasura, we were able to create a serverless API using Hasura cloud. The API exists for two types of requests: The meme template and the uploaded memes. If you're interested, you can start exploring the API docs to get an idea of everything possible with the rocketmeme API.💛

[API Docs](https://victor-eke.gitbook.io/rocketmeme-api/)

```js
async function fetchGraphQL(operationsDoc, operationName, variables) {
const result = await fetch(
"undefined",
{
method: "POST",
body: JSON.stringify({
query: operationsDoc,
variables: variables,
operationName: operationName
})
}
);

return await result.json();
}

const operationsDoc = `
query MyQuery {
meme_templates(order_by: {id: asc, image_link: asc, title: asc}) {
id
image_link
title
}
}
`;

function fetchMyQuery() {
return fetchGraphQL(
operationsDoc,
"MyQuery",
{}
);
}

async function startFetchMyQuery() {
const { errors, data } = await fetchMyQuery();

if (errors) {
// handle those errors like a pro
console.error(errors);
}

// do something great with this precious data
console.log(data);
}

startFetchMyQuery();
```

## 🎨 Styling
Styling is done using **styled-components** and **css3**

![Style Guide](https://user-images.githubusercontent.com/62628408/159381509-13ebf539-5382-451d-9b20-4ac53626e6cf.png)
A preview of the style guide.
## 🤝🏾 Contribution

Are you contributing to this project, please ensure all pull requests and contributions comply with our guidelines. Before making any changes, ensure you have raised an issue here, unless it is a minimal change.

## 📁 Folder Structure

```bash
├── client
│ ├── public
│ │ ├── images
│ │ │ ├── ../
│ │ ├── Robots.txt
│ │ ├── _redirects
│ ├── src
│ │ ├── Components
│ │ │ ├── ../
│ │ ├── pages
│ │ │ ├── ../
│ │ ├── App.jsx
│ │ ├── index.css
│ │ ├── main.jsx
├── src
│ ├── controllers
│ ├── middlewares
│ ├── models
│ ├── routes
│ ├── services
│ ├── utils
│ ├── index.js
├── .env.example
├── .gitignore
├── .gitpod.yml8
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── package.json
```

_This structure is completely flexible and bound to change. Updates to this tree is done manually till we find a suitable generator 😿_

## 🔐 License

This project is protected by MIT License.

## 💵 Sponsor

Consider supporting us buy buying us a coffee or two. We appreciate every donation.



bmc-button


If you like this project, kindly star ⭐ and share this project. It means the world to us.

## Contributors ✨

[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):



Spiff Jekey-Green

🐛 💻 🤔 👀

Ugorji Miracle

💻 🎨 🚧

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!