I made a Earth Day Challenge website that calls for Humanity for Earth

Hasib Al Rashid — Sun, 28 Apr 2024 13:44:19 +0000

Hi there! 👋 I am Hasib, the developer behind the Earth Day Challenge Glam up my Markup project aimed at raising awareness about the pressing issue of Global Warming. I take pride in using my skills to create websites that promote environmental consciousness, thanks to this challenge.

In the homepage, I included a rotating spinning earth that displays all the wildfires currently burning live around the world. This visual representation allows people to grasp the current state of our planet and understand the detrimental effects of global warming on our environment. By witnessing this, individuals can become more aware and take action to protect the earth from potential disasters in the future.

🌍 You can view the demo website for my project
Demo Website

👑 The source code of the project is open source and available on Github
Source Code

✅ Upon discovering this challenge, I decided to participate and built the website using Vite and React.

☑️ Throughout the process, I gained valuable insights into Three.JS and React Globes, particularly in integrating them with the NASA API. By utilizing the NASA Wildfire API to plot points and track fires on the map, I had an enjoyable experience working on this project.

Thank you for your support! Please feel free to leave comments and suggestions for future improvements.

TailwindCSS with ReactJS

Hasib Al Rashid — Mon, 13 Sep 2021 16:43:49 +0000

Setting up Tailwind with React

We all know setting up tailwind with React is somewhat a pain for the beginners. I personally got into this problem too. Today here we will be setting up tailwindcss from scratch.

Note: This tutorial can also be used in a project made before

Without talking anymore lets jump right into the tutorial

First we will start our react project in the normal way

npx create-react-app project-name

Right when you see the Happy Hacking Text in your screen, then you know that its done

Cd into the Folder and lets start editing and stuffs!

Open your code editor. (Mine is VSCode)

Now open your terminal and Install the following things.

With NPM:

npm i -D tailwindcss postcss autoprefixer postcss-cli

With Yarn:

yarn add -D tailwindcss postcss autoprefixer postcss-cli

Now Create output.css and tailwind.css Files in the src folder like in the structure given below.

src/
├── styles/
         ├── output.css
         └── tailwind.css
├── app.js
└── index.js

Your folder structure should look like this

In the tailwind.css file, Paste this code.

@tailwind base;
@tailwind components;
@tailwind utilities;

Leave the Output.css file empty because it will be taken care of Postcss.

Now enter the following two commands in the Command Line:
(Works with both yarn and npm)

npx tailwindcss init --full

and

npx tailwindcss init tailwindcss-config.js -p

Now we have to edit the Following Lines in package.json

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch:css": "postcss src/styles/tailwind.css -o src/styles/output.css"
},

Now in order to wrap up and actually code in tailwind we have to import the following line in out App.js file.

import './styles/output.css'

Now start the project and play with Tailwind yourself!

npm run start

yarn start

We are all good. We can now use tailwind in our react project!

HOLD UP! But there is no Intellisense :(

First of all it is all bland and there is no suggestions on what will we do.

For that we need to add a Extension in VSCode for Tailwind

Simply search Tailwind in the extensions tab and install the first one :)

Restart your code editor and now we have awesome Tailwind Intellisense!

👑 Happy Hacking!

Follow me on Github at https://github.com/hasib-rashid