Photo by Alienware on Unsplash

In this post we are going to build an Application for Image Search. We will get the image from Unsplash API, the frontend will be in ReactJS and we will use serverless functions, of cloudflare for backend.

These are known as Cloudflare worker and they allow you to create applications and deploy them on it’s Edge network.

The process to setup a cloudflare account and install wrangler is mentioned in my earlier post here.

We will create a new project using wrangler generate command, as shown below.


Photo by Ion Şipilov on Unsplash

Cloudflare worker is a serverless application platform, that allow you to create applications and deploy them on it’s Edge network.

We will learn to build a simple application in this post and deploy it to Cloudflare Edge network.

The first thing which we need to do is create a Cloudflare worker account. So, head over to https://workers.cloudflare.com/ and Sign Up. In the next page give your email and password and click on Create Account button.


XPS

In this post, we will build a course tracker using React, Airtable and Netlify serverless functions. It will have full CRUD operations and will track all the courses, which we have and the courses we want to purchase in the future.

The first thing, we will do is get into Airtable and setup our database. Once you register in Airtable, click on the Add a base icon. It will open a menu and in it click on Start from scratch button.


Repeat

In this post we will build a Image Gallery with ReactJS app with Tailwind CSS. We are also going to use Pixabay API to get the images.

So, open your terminal and create a new ReactJS application by using the command below.

npx create-react-app tailwindcss-gallery

Now, as per the instructions, change to the newly created folder. I have also opened the project in VS Code.


React

In this post we will build a simple ReactJS app with Tailwind CSS and in this process will learn to add Tailwind CSS to our app.

So, open your terminal and create a new ReactJS application by using the command below.

npx create-react-app tailwindcss-reactjs

Now, as per the instructions, change to the newly created folder. I have also opened the project in VS Code.


Photo by Melvin Thambi on Unsplash

In this post, we are going to quickly build a responsive tailwind site, using awesome ready to use tailwind components.

Now, create a basic html structure in VS Code using the shortcut ! and press tab. After that we are adding the tailwind css CDN link, which we have got from tailwind site.


Photo by Luis Vidal on Unsplash

In this post, we are going to create a Gym website using a Tailwind CSS starter kit. These starter kits are great in quickly developing a site, if you are a freelancer.

First, we need to download the starter kit from this link. Just click on the Download from Github link.


Photo by Balkouras Nicos on Unsplash

In this project we are going to build a beautiful tailwind CSS site. This site again will be created using only HTML and CSS and no framework. This site will also have cool animation effect.

The installation of tailwind is a long process and covered earlier in my earlier post. Please refer it to get tailwind CSS setup in your project.

After the installation, in the index.html file, add the basic code by ! and tab. After that also add the link for the style sheet. We have also added an h1 text, for the testing.

After that, right-click and…


Landing Page

In this project, we are going to build a simple Tailwind CSS landing page. We are not going to use any framework like my previous blogs here.

As always, there is some installation to be done before.

Let’s start with Tailwind CSS. So, open up the terminal and change to the desired directory, and create a new directory.

We need to install some packages for tailwind, so need to have a package.json file. For this we are giving the command npm init -y, to create an empty package.json file with default options.

After that, we are opening the folder in…


Cloudinary

In this post, we will build a Cloudinary uploader through which we will be able to upload images through our app to cloudinary. We will use ReactJS and NodeJS in the project.

So, open your terminal and create a new folder and inside that folder create a new react app called frontend.

Nabendu Biswas

UI Lead- ReactJS, JavaScript and everything in-between.

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