Merge pull request #355 from ahmadbilaldev/main

Nirmalya Ghosh · web-flow · commit 065e64cc8424 · 2022-04-14T00:44:59.000+05:30
📦 NEW: Random Color Palette Generator
diff --git a/random-color-palette-app/.gitignore b/random-color-palette-app/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/random-color-palette-app/README.md b/random-color-palette-app/README.md
@@ -0,0 +1,46 @@
+![cover](assets/cover.png)
+
+<div align="center">
+	<h2>Random Color Palette App</h2>
+</div>
+
+> [Live Preview](https://rapidapi-example-color-palette-app.vercel.app/)
+
+### ⚡️ Features
+
+- Generate random color palettes with every click.
+- Responsive design.
+
+## Guide
+
+[Read a step-by-step guide to build this application.](https://rapidapi.com/guides/build-color-palette-app)
+
+### 🛠️ Installation Steps
+
+1. Download the `random-color-palette-app` directory. Click [here](https://download-directory.github.io/?url=https://github.com/RapidAPI/DevRel-Examples-External/tree/main/random-color-palette-app) to download it.
+
+2. Unzip the downloaded file and navigate to the working directory.
+
+```bash
+cd RapidAPI\ DevRel-Examples-External\ main\ random-color-palette-app/
+```
+
+3. Install dependencies
+
+```bash
+npm install
+```
+
+4. Create `.env.local` file in root and add your RapidAPI key.
+
+```bash
+NEXT_PUBLIC_RAPIDAPI_KEY=YOUR_RAPID_API_KEY
+```
+
+5. Run the app
+
+```bash
+npm run dev
+```
+
+You are all set! Open [localhost:3000](http://localhost:3000/) to see the app.
diff --git a/random-color-palette-app/assets/cover.png b/random-color-palette-app/assets/cover.png
diff --git a/random-color-palette-app/package.json b/random-color-palette-app/package.json
@@ -0,0 +1,19 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "axios": "^0.24.0",
+    "next": "latest",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.4",
+    "tailwindcss": "^3.0.0"
+  }
+}
diff --git a/random-color-palette-app/pages/_app.js b/random-color-palette-app/pages/_app.js
@@ -0,0 +1,20 @@
+import Head from "next/head";
+import "tailwindcss/tailwind.css";
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Head>
+        <title>RapidAPI - Random Color Palette App</title>
+        <link rel="icon" href="/favicon.ico" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <Component {...pageProps} />
+    </>
+  );
+}
+
+export default MyApp;
diff --git a/random-color-palette-app/pages/api/generate.js b/random-color-palette-app/pages/api/generate.js
@@ -0,0 +1,18 @@
+import axios from "axios";
+
+export default async function handler(req, res) {
+  const options = {
+    method: "GET",
+    url: "https://random-palette-generator.p.rapidapi.com/palette/Monochromatic/1/4",
+    headers: {
+      "X-RapidAPI-Host": "random-palette-generator.p.rapidapi.com",
+      "X-RapidAPI-Key": process.env.NEXT_PUBLIC_RAPIDAPI_KEY,
+    },
+  };
+  try {
+    let response = await axios(options);
+    res.status(200).json(response.data);
+  } catch (error) {
+    console.error(error.response);
+  }
+}
diff --git a/random-color-palette-app/pages/index.js b/random-color-palette-app/pages/index.js
@@ -0,0 +1,72 @@
+import axios from "axios";
+import { useState, useEffect } from "react";
+
+export default function Home() {
+  const [colors, setColors] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const getColors = async () => {
+    try {
+      setLoading(true);
+      const res = await axios.get("api/generate/");
+      setColors(res.data.data[0].palette);
+      setLoading(false);
+    } catch (error) {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getColors();
+  }, []);
+
+  return (
+    <div className="flex flex-col md:px-12 px-4 bg-background font-poppins items-center min-h-screen">
+      <h1 className="md:text-6xl text-4xl font-bold text-primary mt-10">
+        Random <span className="text-active">Color Pallete</span> Generator
+      </h1>
+      <h2 className="text-primary text-2xl font-light mt-6 font-ebas">
+        Click change to get a random color pallete
+      </h2>
+
+      {colors && (
+        <div className="mt-20 grid grid-cols-4 rounded-lg">
+          {colors.map((color, index) => {
+            return (
+              <div
+                key={index}
+                className="text-primary font-bold sm:text-xl text-sm sm:px-12 px-2 py-36"
+                style={{ backgroundColor: color }}
+              >
+                {color}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <button
+        className="mt-10 font-bold text-primary text-xl hover:text-active"
+        onClick={getColors}
+      >
+        {loading ? (
+          <span className="animate-pulse">Loading..</span>
+        ) : (
+          <>Change &rarr;</>
+        )}
+      </button>
+
+      <div className="mt-20 mb-10 opacity-70 text-center">
+        <p className="text-primary text-xs">
+          Made by RapidAPI DevRel Team -{" "}
+          <a
+            className="hover:text-active"
+            href="https://github.com/RapidAPI/DevRel-Examples-External"
+          >
+            See more examples like this
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/random-color-palette-app/postcss.config.js b/random-color-palette-app/postcss.config.js
@@ -0,0 +1,8 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/random-color-palette-app/public/favicon.ico b/random-color-palette-app/public/favicon.ico
diff --git a/random-color-palette-app/tailwind.config.js b/random-color-palette-app/tailwind.config.js
@@ -0,0 +1,20 @@
+module.exports = {
+  mode: "jit",
+  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    fontFamily: {
+      poppins: ["Poppins", "sans-serif"],
+    },
+    colors: {
+      background: "#000000",
+      primary: "#FFFFFF",
+      active: "#FFCF00",
+    },
+  },
+
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};
