Build your Portfolio with React and Tailwind in minutes
Tags: webdev, react, tailwindcss, beginners
Published: 2023-07-27 09:51:03

In this article, I will share how you can build a Portfolio with React and Tailwind CSS, and host it for free on a `.tech` domain for free for a year with GitHub Student Developer Pack.

I choose to start learning React a few weeks ago. I was familiar with Python, Java, and Shell Script, but I was ignorant of front-end frameworks. So, I decided to give React a try. Will of contributing to various Frontend OpenSource Projects was another motivation for studying React. For this, I decided to take a free YouTube course on React by Bob Ziroll on [freeCodeCamp](https://www.youtube.com/watch?v=bMknfKXIFA8). I've posted my code for all the mini-projects [here](https://github.com/shricodev/react-mini-playground).

After finishing the tutorial, I was pretty confident with the React concepts and decided to do a major project. I had a thought: why not create a strong portfolio website? I already had a crappy [portfolio](https://shricodev.github.io/) created using plain HTML, CSS, and JS.

Let's get started!🚀

## Setting up the Environment

We will use Yarn as the package manager. To Install Yarn, run the command:

```bash
npm install --global yarn
```

For setting up the local development environment, we will use Vite. Learn more about Vite [here](https://vitejs.dev/). To use Vite, run the following command:

```bash
yarn create vite
```

Give the project an appropriate project name, choose the framework, and hit enter. Now this should create an empty React project in your directory.

Inside the project folder run this command to install Vite as a development dependency.

```bash
yarn add vite --dev
```

Now, it's time to set up Tailwind CSS. Run this command to install Tailwind CSS and its dependencies.

```
yarn add --dev tailwindcss autoprefixer postcss
```

Now, we need to install Tailwind CSS config files. They help us to interact with our project and customize everything.

```bash
npx tailwindcss init -p
```

This command generates `tailwind.config.js` and `postcss.config.js` configuration files. Now for Tailwind CSS to work with the project, we need to specify the files it should look out for. Add `"./index.html", "./src/**/*.{js,ts,jsx,tsx}"` inside the content array in the `tailwind.config.js` file.

The `tailwind.config.js` the file should now look something like this:

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
};

```

Now, the final step in setting up Tailwind CSS is to add its directive to the CSS file which is `src/index.css`. Clear all the default styling and add the following:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

```

Finally, run this command to start the Vite local development server:

```bash
yarn run dev

```

The terminal output should look something like this:

![Terminal Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uem6ugx2kuna420nd3d9.png)

Hold the **ctrl** key and click on the link in the terminal. It should open a new tab that looks like the following:


![Browser Tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crd98ct9a7qpi2tx7grt.png)

Head on to the `App.tsx/jsx` file and remove the child divs of the div with the class name App. Insert the following in place of it.

```html
<h1 className="text-3xl font-bold underline text-center">Hello world!</h1>

```

This is the standard style of writing Tailwind CSS. Revisit the page and you should see this:


![Success Output Browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqxcxlkumypfvk95jpp8.png)

Congratulations on setting up your development server!🥳

![Gif](https://media.giphy.com/media/3oz8xAFtqoOUUrsh7W/giphy.gif)


## GitHub Student Developer Pack and Code

After you've gotten your GH Student Developer Pack, go to [get.tech](https://get.tech). Sign up with your GitHub Account and you should be able to claim your one-year free `.tech` domain plan.

Now, to host your Source Files, go to [netlify.com](https://netlify.com) and create an account. Now, get back to the project folder and run the command:

```bash
yarn run build

```

After running this command, you should have a `/dist` directory at the root of your project. The previous command is simply intended to give you the impression that this is the only folder that contains your deployment-related files. All this is handled by Netlify itself.

> 💡Before, deploying the project make sure you push your project code to GitHub which will help in the rebuild of the code when you make any changes to the code in the future. So, you do not need to manually copy and paste your project each time in netlify.com

Head on to Netlify and click the following:

`"Add New Site" > "Import an Existing Project" > "Choose Github" > "Select the repo"`

For `"build settings"`, have these values


![Netlify Configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z12mf8bekigblit58dfb.png)


Finally, click on `"Deploy Site"` and you should have your site deployed on `something.netlify.app`.

Now, to map this site to the domain we just purchased on [get.tech](https://get.tech), make sure you change the nameserver of your domain to Netlify nameservers. For this go under `"Options" > "Set Up Netlify DNS"` and copy the nameservers of Netlify, and paste it in `"Custom nameserver"` inside get.tech domain settings. Now, in Netlify under `"Domain Settings" > "Add custom domain"`, add your purchased domain name.

With these changes, you should now have your site deployed on your custom domain.🚀

## TLDR;

In conclusion, React and Vite go very smoothly together and can be used to build some very powerful front-end projects. In this blog, we discussed how to set up a React project with Vite locally, set up Tailwind CSS, get Github Developer Student Pack, and host the portfolio site for free.

It's recommended to maintain a proper folder structure in React by creating individual folders for each component. This practice increases the maintainability and scalability of your application, allowing for easier navigation and updates.

- Source Code for my Portfolio Site: [Source Code](https://github.com/shricodev/my-react-portfolio)

- Visit my Portfolio: [shricodev.tech](https://shricodev.tech)

## Let's Connect

If you enjoyed this post and would like to stay updated, feel free to connect with me on social media.

- Github: https://github.com/shricodev

- LinkedIn: https://linkedin.com/in/shrijal007

- Twitter: https://twitter.com/shricodev