Create a complete Responsive React App using Pixabay API and Tailwind Part-1

Before starting off this article I would highly recommend you to visit the link given below and look at the website and its features so that you can get a clear picture of what we are gonna build in this article.

Desktop view of Homepage
Mobile view of Homepage

# 1. Installation

Before moving further I assume you have already install node and npm(package manger).

npx create-react-app picanjli
Success! Created picanjli at /mnt/FE4C191E4C18D2EF/Developement/React/picanjli
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:cd picanjli
npm start
Happy hacking!
import React from "react";const App = () => {return <div>You are in App js file</div>;};export default App;
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);

# Tailwind setup

I am mentioning the version as well because you might get error while compiling the tailwindcss

@tailwind base;@tailwind components;@tailwind utilities;
module.exports = {   plugins: {      tailwindcss: { config: "./tailwind.config.js" },      autoprefixer: {},   },};
"start": "npm run watch:css && react-scripts start","build": "npm run build:tailwind && react-scripts build","test": "react-scripts test","eject": "react-scripts eject","build:tailwind": "tailwindcss build src/assets/tailwind.css -o src/assets/output.css","watch:css": "postcss src/assets/tailwind.css -o src/assets/output.css"
import React from "react";const App = () => {return (<div className="h-24 text-white w-full bg-red-400">   You are in App js file</div>  );};export default App;
src
|---components
|--app
|---Navbar
|--Navbar.js
|--Navbar.module.css
module.exports = {  purge: [],  darkMode: false, // or 'media' or 'class'  theme: {     extend: {         spacing: {             "1/2": "50%",             "1/3": "33.333333%",             "2/3": "66.666667%",             "1/4": "25%",             "2/4": "50%",             "3/4": "75%",             "1/5": "20%",             "2/5": "40%",             "3/5": "60%",             "4/5": "80%",             "1/6": "16.666667%",             "2/6": "33.333333%",             "3/6": "50%",             "4/6": "66.666667%",             "5/6": "83.333333%",             "1/12": "8.333333%",             "2/12": "16.666667%",             "3/12": "25%",             "4/12": "33.333333%",             "5/12": "41.666667%",             "6/12": "50%",             "7/12": "58.333333%",             "8/12": "66.666667%",             "9/12": "75%",             "10/12": "83.333333%",             "11/12": "91.666667%",             "vh-80": "80vh",             "vh-70": "70vh",         },         colors: {              accent: "#ea2c62",              primary: "#7f00ff",              secondary: "#e100ff",         },         gradientColorStops: {               gradientPrimary: "#7f00ff",               gradientSecondary: "#e100ff",               gradientAccentPrimary: "#ee2a7b",               gradientAccentSecondary: "#ff7db8",          },     },  },  variants: {     extend: {         translate: ["active"],      },   },   plugins: [],};

Attention: Don’t forget to restart the server after extending any property of the tailwind otherwise it won’t work.

Adding the scroll event listener

HandleScroll function

const handleScroll = () => { 
setVisible(prevScrollPos > currentScrollPos);
};
const handleScroll = () => { 
setVisible(prevScrollPos > currentScrollPos && prevScrollPos - currentScrollPos > 70);
};
const handleScroll = () => { 
setVisible(prevScrollPos > currentScrollPos && prevScrollPos - currentScrollPos > 70 || currentScrollPos < 10);
};
const handleScroll = () => {     
const currentScrollPos = window.pageYOffset; setVisible((prevScrollPos > currentScrollPos && prevScrollPos - currentScrollPos > 70) || currentScrollPos < 10); setPrevScrollPos(currentScrollPos);
};

One final update: adding debounce()

src
|---components
|--app
|--ui
|--SearchBox
|--SearchBox.js

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store