Evavic44/rocketmemePublic

NotificationsYou must be signed in to change notification settings
Fork8
Star41

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

License

MIT license

41 stars 8 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 174 Commits
.github/ISSUE_TEMPLATE		.github/ISSUE_TEMPLATE
client		client
src		src
.all-contributorsrc		.all-contributorsrc
.env.example		.env.example
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.gitpod.yml		.gitpod.yml
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Repository files navigation

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 viewrocketmeme

How to run locally ✨

Follow these steps below to run rocketmeme locally in your machine. We are usingvite.js to bootstrap this application. You can read theirdocs 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 tohttp://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.💛

API Docs

asyncfunctionfetchGraphQL(operationsDoc,operationName,variables){constresult=awaitfetch("undefined",{method:"POST",body:JSON.stringify({query:operationsDoc,variables:variables,operationName:operationName})});returnawaitresult.json();}constoperationsDoc=`  query MyQuery {    meme_templates(order_by: {id: asc, image_link: asc, title: asc}) {      id      image_link      title    }  }`;functionfetchMyQuery(){returnfetchGraphQL(operationsDoc,"MyQuery",{});}asyncfunctionstartFetchMyQuery(){const{ errors, data}=awaitfetchMyQuery();if(errors){// handle those errors like a proconsole.error(errors);}// do something great with this precious dataconsole.log(data);}startFetchMyQuery();

🎨 Styling

Styling is done usingstyled-components andcss3

A preview of the style guide.

🤝🏾 Contribution

Are you contributing to this project, please ensure all pull requests and contributions comply with ourguidelines. 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 😿