{"id":15650696,"url":"https://github.com/evavic44/rocketmeme","last_synced_at":"2025-04-30T17:23:07.072Z","repository":{"id":37560239,"uuid":"464917908","full_name":"Evavic44/rocketmeme","owner":"Evavic44","description":"⚡ A multipurpose meme marketplace and editor for creating, downloading and sharing memes with a ready to use API powered by Hasura GraphQL","archived":false,"fork":false,"pushed_at":"2024-02-15T00:33:00.000Z","size":29813,"stargazers_count":42,"open_issues_count":4,"forks_count":8,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-19T07:47:08.057Z","etag":null,"topics":["framer-motion","hackathon","hacktoberfest","hasura","hasura-graphql","javascript","meme-api","meme-generator","memes","nodejs","react","reactjs","styled-components","utterances","vitejs"],"latest_commit_sha":null,"homepage":"https://rocketmeme.netlify.app/create","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Evavic44.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-01T14:05:42.000Z","updated_at":"2025-03-19T22:41:52.000Z","dependencies_parsed_at":"2024-02-15T01:42:08.426Z","dependency_job_id":null,"html_url":"https://github.com/Evavic44/rocketmeme","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Evavic44%2Frocketmeme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Evavic44%2Frocketmeme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Evavic44%2Frocketmeme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Evavic44%2Frocketmeme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Evavic44","download_url":"https://codeload.github.com/Evavic44/rocketmeme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251749412,"owners_count":21637537,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framer-motion","hackathon","hacktoberfest","hasura","hasura-graphql","javascript","meme-api","meme-generator","memes","nodejs","react","reactjs","styled-components","utterances","vitejs"],"created_at":"2024-10-03T12:35:31.517Z","updated_at":"2025-04-30T17:23:07.046Z","avatar_url":"https://github.com/Evavic44.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/evavic44"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://rocketmeme.netlify.app\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/62628408/156283195-028f807e-633f-479f-9244-4cdd795a3183.svg\" width=\"80px\"\u003e\u003c/a\u003e  \n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003ch1\u003eRocketmeme\u003c/h1\u003e\n\u003cp\u003eA multipurpose meme marketplace and editor for creating and downloading memes. View meme collection, browse different meme categories, like share and save memes.\u003c/p\u003e \n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://reactjs.org/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/React-20232A?style=flat-square\u0026logo=react\u0026logoColor=61DAFB\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://styled-components.com/\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/styled--components-DB7093?style=flat-square\u0026logo=styled-components\u0026logoColor=white\"\u003e\n\u003c/a\u003e\n    \n\u003ca href=\"https://prettier.io/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/prettier-1A2C34?style=flat-square\u0026logo=prettier\u0026logoColor=F7BA3E\"\u003e\n\u003c/a\u003e\n    \n\u003ca href=\"https://github.com/evavic44/rocketmeme/labels/help%20wanted\"\u003e \n\u003cimg src=\"https://img.shields.io/github/labels/evavic44/rocketmeme/help%20wanted\"\u003e\n\u003c/a\u003e\n    \n\u003ca href=\"https://github.com/evavic44/rocketmeme/labels/enhancement\"\u003e \n\u003cimg src=\"https://img.shields.io/github/labels/evavic44/rocketmeme/enhancement\"\u003e\n\u003c/a\u003e \n    \n\u003ca href=\"https://analytics.google.com/analytics/web/?utm_campaign=2021q1-onboarding-ga\u0026utm_source=google-growth\u0026utm_medium=email\u0026utm_content=gold-welcome-0#/p303972922/reports/dashboard?params=_u..nav%3Dmaui\u0026r=lifecycle-engagement-overview\u0026ruid=lifecycle-engagement-overview,life-cycle,engagement\u0026collectionId=life-cycle\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/Google%20Analytics-E37400?style=flat-square\u0026logo=google%20analytics\u0026logoColor=white\"\u003e\n\u003c/a\u003e\n    \n\u003ca href=\"https://hashnode.com\"\u003e\n\u003cimg alt=\"code style: prettier\" src=\"https://img.shields.io/badge/Hashnode-2962FF?style=flat-square\u0026logo=hashnode\u0026logoColor=white\"\u003e\n\u003c/a\u003e \n    \n\u003ca href=\"fontawesome.com/\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/Font_Awesome-339AF0?style=flat-squaree\u0026logo=fontawesome\u0026logoColor=white\"\u003e\n\u003c/a\u003e\n    \n\u003ca href=\"vitejs.dev/\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/Vite-B73BFE?style=flat-square\u0026logo=vite\u0026logoColor=FFD62E\"\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://app.netlify.com/sites/rocketmeme/deploys\"\u003e\n    \u003cimg src=\"https://api.netlify.com/api/v1/badges/6a4fdf68-75a7-458f-87aa-36fbe5f31a7a/deploy-status\"\u003e\n\u003c/a\u003e  \n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://forthebadge.com/images/badges/built-with-love.svg\"\u003e\n\u003cimg src=\"https://forthebadge.com/images/badges/open-source.svg\"\u003e\u003cbr\u003e\u003cbr\u003e\n\u003ca href=\"https://www.producthunt.com/posts/rocketmeme?utm_source=badge-featured\u0026utm_medium=badge\u0026utm_souce=badge-rocketmeme\" target=\"_blank\"\u003e\u003cimg src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=338739\u0026theme=light\" alt=\"Rocketmeme - Create\u0026#0044;\u0026#0032;share\u0026#0032;\u0026#0038;\u0026#0032;download\u0026#0032;memes\u0026#0032;or\u0026#0032;use\u0026#0032;our\u0026#0032;powerful\u0026#0032;API | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n\n# 👀 Preview\n\nClick this link to view \u003ca href=\"https://rocketmeme.com\"\u003erocketmeme\u003c/a\u003e\n\n\u003ca href=\"https://rocketmeme.com\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/62628408/156625869-36fc5d11-ed4b-45bb-85d8-4d601c19505e.png\" alt=\"Rocketmeme Preview\"\u003e\n\u003c/a\u003e\n\n\u003cdiv align=\"left\"\u003e\n    \u003ch1\u003eHow to run locally ✨\u003c/h1\u003e\n    \u003cp\u003eFollow these steps below to run rocketmeme locally in your machine. We are using \u003ca href=\"https://vitejs.dev/\"\u003evite.js\u003c/a\u003e to bootstrap this application. You can read their \u003ca href=\"https://vitejs.dev/guide/\"\u003edocs\u003c/a\u003e for more info. \u003c/p\u003e\n\u003c/div\u003e\n\n## 🧩 Prerequisites\n\nIn other to run our react app, make sure you have the following installed locally.\n\n- \u003ca href=\"https://nodejs.org/en/\"\u003eNode.js\u003c/a\u003e - vite requires node at least version 10.16.0\n\n### Clone this repository\n\nClone this repository to your local machine.\n\n```shell\ngit clone https://github.com/Evavic44/rocketmeme.git\n```\n\n### Cd client\n\nChange directory into the client folder. This is where the frontend code lives.\n\n```shell\ncd client\n```\n\n### Install NPM\n\n```shell\nnpm install\n```\n\n### Run\n\nRun the development server to view the app.\n\n```shell\nnpm run dev\n```\n\nNow you can navigate to [http://localhost:3000](http://localhost:3000/) to view the app.\n\n\u003cdiv align=\"left\"\u003e\n    \u003ch1\u003eAdittional Commands ✨\u003c/h1\u003e\n\u003c/div\u003e\n\n### Build\n\n```\nnpm run build\n```\n\nThis is a preview of your dev server.\n\n### Serve\n\n```\nnpm run serve\n```\n\nThis is a preview of your build\n\n## Rocketmeme API\n\n```css\n/* API Endpoint */\nhttps://rocketmeme-user.hasura.app/v1/graphql\n```\n\nWith 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.💛  \n\n[API Docs](https://victor-eke.gitbook.io/rocketmeme-api/)\n\n```js\nasync function fetchGraphQL(operationsDoc, operationName, variables) {\n  const result = await fetch(\n    \"undefined\",\n    {\n      method: \"POST\",\n      body: JSON.stringify({\n        query: operationsDoc,\n        variables: variables,\n        operationName: operationName\n      })\n    }\n  );\n\n  return await result.json();\n}\n\nconst operationsDoc = `\n  query MyQuery {\n    meme_templates(order_by: {id: asc, image_link: asc, title: asc}) {\n      id\n      image_link\n      title\n    }\n  }\n`;\n\nfunction fetchMyQuery() {\n  return fetchGraphQL(\n    operationsDoc,\n    \"MyQuery\",\n    {}\n  );\n}\n\nasync function startFetchMyQuery() {\n  const { errors, data } = await fetchMyQuery();\n\n  if (errors) {\n    // handle those errors like a pro\n    console.error(errors);\n  }\n\n  // do something great with this precious data\n  console.log(data);\n}\n\nstartFetchMyQuery();\n```\n\n## 🎨 Styling\nStyling is done using **styled-components** and **css3**\n\n![Style Guide](https://user-images.githubusercontent.com/62628408/159381509-13ebf539-5382-451d-9b20-4ac53626e6cf.png)\nA preview of the style guide.\n## 🤝🏾 Contribution\n\nAre you contributing to this project, please ensure all pull requests and contributions comply with our \u003ca href=\"https://github.com/Evavic44/rocketmeme/blob/main/CONTRIBUTING.md\"\u003eguidelines\u003c/a\u003e. Before making any changes, ensure you have raised an issue here, unless it is a minimal change.\n\n## 📁 Folder Structure\n\n```bash\n├── client\n│   ├── public\n│   │   ├── images\n│   │   │   ├── ../\n│   │   ├── Robots.txt\n│   │   ├── _redirects\n│   ├── src\n│   │   ├── Components\n│   │   │   ├── ../\n│   │   ├── pages\n│   │   │   ├── ../\n│   │   ├── App.jsx\n│   │   ├── index.css\n│   │   ├── main.jsx\n├── src\n│   ├── controllers\n│   ├── middlewares\n│   ├── models\n│   ├── routes\n│   ├── services\n│   ├── utils\n│   ├── index.js\n├── .env.example\n├── .gitignore\n├── .gitpod.yml8\n├── CODE_OF_CONDUCT.md\n├── CONTRIBUTING.md\n├── LICENSE\n├── README.md\n├── package.json\n```\n\n_This structure is completely flexible and bound to change. Updates to this tree is done manually till we find a suitable generator 😿_\n\n## 🔐 License\n\nThis project is protected by \u003ca href=\"https://github.com/Evavic44/rocketmeme/blob/main/LICENSE\"\u003eMIT License\u003c/a\u003e.\n\n## 💵 Sponsor\n\nConsider supporting us buy buying us a coffee or two. We appreciate every donation.\n\n\u003cdiv\u003e\n  \u003ca href=\"https://www.buymeacoffee.com/evavic44\"\u003e\n    \u003cimg width=\"150px\" alt=\"bmc-button\" src=\"https://user-images.githubusercontent.com/62628408/127788747-8850d386-fc61-4fff-b18f-8c5ee597be34.png\"\u003e\n  \u003c/a\u003e\n\u003cimg width=\"150px\" height=\"100%\" src=\"https://img.shields.io/badge/sponsor-30363D?style=for-the-badge\u0026logo=GitHub-Sponsors\u0026logoColor=#white\"\u003e\n\u003c/div\u003e\n\nIf you like this project, kindly star ⭐ and share this project. It means the world to us.\n\n## Contributors ✨\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://spiffgreen.pages.dev/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/73044138?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSpiff Jekey-Green\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Evavic44/rocketmeme/issues?q=author%3ASpiffGreen\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/Evavic44/rocketmeme/commits?author=SpiffGreen\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-SpiffGreen\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/Evavic44/rocketmeme/pulls?q=is%3Apr+reviewed-by%3ASpiffGreen\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.linkedin.com/in/miracle-ugorji/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/74703564?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eUgorji Miracle\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Evavic44/rocketmeme/commits?author=amarealcoder\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#design-amarealcoder\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"#maintenance-amarealcoder\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevavic44%2Frocketmeme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevavic44%2Frocketmeme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevavic44%2Frocketmeme/lists"}