Rocketmeme
A multipurpose meme marketplace and editor for creating and downloading memes. View meme collection, browse different meme categories, like share and save memes.
π
Preview
Click this link to view rocketmeme
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.
git clone https://github.com/Evavic44/rocketmeme.git
Cd client
Change directory into the client folder. This is where the frontend code lives.
cd client
Install NPM
npm install
Run
Run the development server to view the app.
npm run dev
Now you can navigate to 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
/* 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.
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
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
βββ 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.
If you like this project, kindly star
Contributors
β¨
Thanks goes to these wonderful people (emoji key):
 Spiff Jekey-Green |
This project follows the all-contributors specification. Contributions of any kind welcome!
6 Aug 30, 2022
7 Dec 21, 2022
41 Dec 9, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
7 Nov 20, 2022
12.1k Jan 9, 2023
4 Apr 19, 2022
57 Jan 3, 2023
4 Dec 31, 2022
10 Oct 30, 2022
23 Nov 30, 2022
6 May 27, 2022
8 Nov 15, 2022
17 Nov 8, 2022
82 Nov 21, 2022
7 Dec 14, 2022
2 Feb 3, 2022