React Portfolio Website Tutorial From Scratch – Build & Deploy React JS Portfolio Website

Today you’re going to create one of the most important apps you can build for yourself: your developer portfolio.

Every React developer or web developer in general needs to be able to show off what they can do to any potential client or employer.

That’s exactly what we’re going to be building right now, with the help of a number of industry standard tools, including React, Tailwind CSS, and Netlify.

Build your portfolio projects with the technologies, libraries, techniques, and workflows that are used in professional dev teams in the real world. The doors to your new career will be wide open.

Let’s get started

What is React.js?

React is a declarative, fast, and flexible JavaScript toolkit for creating interactive components on webpages in web development.

React Components are self-contained and reusable programming modules. They perform the same duties as JavaScript functions, however they operate independently and return HTML through a render function.

Recommended ReactJS Guides

Setting up React :

  • You’ll need to install NodeJS first, which is a JavaScript runtime environment that will assist you in compiling awesome React code.
  • Installing react using npm install create-react-app command.
  • Now run npm create-react-app your-project-name (for example: npm create-react-app myApp) command.
  • Then run cd project name and run npm start command. Now, everything installs perfectly you’ll see your project running on the localhost. Go to https://localhost:3000and you should be able to see the starter page of the React-app.
  • The react to create a file-structure which will look like this

Required Data Gathering and Analysis

  • Create a résumé before you start building your portfolio website so you can have a better sense of what type of information you want to include.Find suitable free portfolio website templates on the web I will be using this temple to demonstrate.
  • It’s better to dig into perfect photos for your website.

Step 1

Essential Requirements

The goal of this tutorial is to simulate a real-world workplace. So you’ll need a concept that seems like a real-life production app.

It’s evident that a Todo or Weather app won’t suffice. True, a social networking app is more complicated. But, seriously? Do you want to construct another one?

Ideally, you want a portfolio that is different from other candidates’. Just different enough to make the reviewer care about you.

You want a project that has enough complexity to prove your skills. At the same time, it should be small enough to finish within a few weeks.

Finally, having ready-made designs would be fantastic. You’d be able to mimic professional workflows with this. You wouldn’t have to spend as much time fussing with the layout either.

This list of React project ideas for your portfolio provides exactly that.

All of these projects are business use-cases as they are used in many tech companies:

  • a UI kit
  • an analytics app
  • an error tracking tool.

UI Kit

A UI kit is a set of reusable components such as buttons, inputs, cards, modals, you name it.

I know it’s doesn’t sound super-sexy. But many companies create their own custom UI library. So this project is very close to the work of a professional frontend developer.

UI kit design

By building a UI kit you demonstrate that you understand modern & professional UI development.

And honestly, it may look easier than it is. From my experience, you can spend a good deal of time on getting the styles right for every dynamic state.

To appear more professional you can

  1. use this Chrome extension to make your CSS pixel-perfect
  2. document the components with a tool like Storybook.

Using Storybook will not only make you look like a pro. It will also improve your developer experience drastically. And as you can see on their homepage you’d be in good company with major players like Airbnb, Lyft, Auth0, or Salesforce.

Where you get it: You can find a great UI Kit here on Figma.

Time required: 1 week

Difficulty: medium

Features

  • static & interactive components
  • many different dynamic states

What you’ll learn

  • work with designs like in a professional team
  • advanced CSS
  • UI documentation with Storybook

Reddit Analytics

Users may use Reddit Analytics to determine the optimal time to post on a subreddit. Subreddits are similar to specialised forums that are often used by marketers to advertise their products.

So this app can be used by marketing teams or individuals who want more people to see their blog posts.Reddit Analytics Demo

In a nutshell, the user can input a subreddit’s name. The software then uses the Reddit API to get the relevant data and shows it in a heatmap.

If you’re not familiar with professional workflows yet, this is the ideal starting point.

The goal of this project is to not only practice your coding skills but experience what it means to be a professional developer. That will give you a great advantage for your job hunt.

Time required: 2 – 4 weeks

Difficulty: advanced

Features

  • static marketing page
  • heatmap & table for data visualization

What you’ll learn

  • work with designs & tasks like in a professional team
  • advanced CSS & styled-components
  • data fetching & transformation
  • writing integration tests with React Testing Library
  • professional Git workflow using feature branches & pull requests

Error tracking tool

Error tracking tools like Sentry (screenshot above) or Rollbar are used in every serious software product.

The most fundamental feature is the ability to report predicted and unexpected website issues. In a dashboard, the user may view the numbers, timings, and causes of these issues.

Untitled 6.png

This is how it works in a nutshell:

  1. The user imports a small JS library into their code.
  2. When an error in the JS of the website occurs the library sends it to a backend where it’s stored in a database.
  3. The error tracking tool has a frontend where the user can see all the error data in a dashboard.

This limited feature set should enough for a portfolio project. You’ll not only demonstrate your technical talents because it’s a vital element in the stack of every production app. You’ll also show that you know a lot about professional software development.

To make your life easier, focus on building the frontend and the JS library. You can quickly build the backend with services like AWS AmplifyNhost, or Hasura.

Where you get it: Unfortunately, I don’t have complete designs. But you can find a nice dashboard design here on Figma.

Time required: 3 – 6 weeks

Difficulty: hard

Features

  • separate error tracking library or npm package
  • dashboard with chart & table

What you’ll learn

  • building and publishing a JS library (e.g. on npm)
  • sending and fetching data from an API
  • advanced CSS & data visualization

Step 2

How to build your React portfolio projects like a pro

The concept is appealing: if you construct your portfolio projects like a pro, your future employer will be more inclined to give you a chance.

You’ll come across as ambitious. You’ll demonstrate that you’re willing to learn and grow. The most crucial characteristics of a junior developer.

Unfortunately, this is a catch-22 situation: you don’t know how to work like a pro until you’ve been part of a professional team.

Luckily, I’ve been on both sides. And I’d like to share my experience with you in this chapter.

We’ll focus on the most important areas:

  • working like a pro
  • styles
  • application logic
  • Git

Professional workflow

Working alone versus working in a professional team is a major difference. In a team, your coworkers rely on you just as much as you rely on them. That’s why you’ll need a lot more organization and openness in your job.

But let’s start with a story of a lone developer building a project. This is me at the beginning of my career in tech. Be careful, you might recognize yourself.

When I built my first projects I started with an idea. Let’s say an Airbnb for pet owners (no joke, I really built this).

I considered what characteristics it should have. A user’s profile should be able to be created and updated. There should also be a list view that shows all of the units that are available. Ideally, it should be searchable.Fair enough. Off I went into code-land. That’s the fun part after all, right?

Another interesting characteristic would soon enter my mind. I’d lose attention and immediately begin working on it. I’m left with a slew of half-baked code. Like twisted as the well-known spaghetti.

The layout was another kind of problem. I’d obviously have a look at Airbnb and similar competitors to get design ideas. Then I’d start writing CSS.

I’d fiddle around with my styles. I would move elements pixel by pixel. I’d change some colors here and increase some text size there. Make it bold, make it italic.

Only to find out that it’s actually harder than expected to make a website look good…

You see the problem? I’d make a plan, yeah. But only a very rough one and only in my head. I’d waste a lot of time with unnecessary features and fiddling around with CSS details. And the awesome web app that I had in mind looked more like… ehm…

So how does working on a professional dev team compare to that?

Recommended Articles: 25+ Web Development Books For Beginners

Professional frontend developers get two things before they start coding:

  • tasks
  • designs.

It is not the developer’s obligation to come up with features or designs in the actual world. A product manager is usually the one who chooses what needs to be created. The designs are also prepared by a designer.

It’s the dev’s job to turn them into working code.

The good news is, you can work the same way as the pros. You start with designs. Then create the tasks. Only then you start to code.

First, the designs.

However, you don’t want to hire a designer only to create a few portfolio projects. And, as I already stated, you should not build the designs yourself. On the job, that is not your obligation.

So where to get designs from?

A good place to start is the Figma Community. You’ll find many professional designs that you can simply clone into your free Figma account. You might find a ready-made app design that you like. If not, you can use one of the UI kits to build a custom design yourself. Simply drag & drop the elements into place.

Next, you create the tasks.

This is how it works in a nutshell.

  1. You take the designs and break them into smaller parts (aka features).
  2. For each feature, you create a task. You can use a free tool like GitHub project managementClickUp, or simply Trello.
  3. For each task, you collect the requirements. What is the feature supposed to do? How can the user interact with it? Where does the data come from?
  4. If a task gets too big you can break it down into smaller subtasks.

Now you can start coding.

You’ll be lot closer to gaining real-world experience if you organise yourself this way. You’ll start to think and operate like a professional developer instead of haphazardly producing code for different portions of your program.

And that in turn is impressive for any employer.

Now that you know how to prepare your project and work on it like a pro let’s dive into more technical topics.

Styles

You could be tempted to utilize Material UI or Bootstrap as a user interface library. And you’re absolutely correct: these are fantastic libraries. If you need to construct an app quickly, they can be really useful. For example, whether you’re a freelancer producing websites for customers or working in an early-stage business.

But most development teams work differently.

Companies must have their own distinct branding. A designer creates bespoke designs and styleguides for this reason. At least in terms of the application’s user interface.

And as we mentioned in the last chapter, it’s the developer’s job to turn those designs into code.

So to stay close to real production apps write custom CSS instead of using ready-made UI libraries. Writing CSS is a much more flexible skill that you will use in any job.

UI libraries, on the other hand, don’t only offer pre-made pieces. They also make your life easier by relieving you of the responsibility of being responsive. This might be an excellent way to get off the ground rapidly once more.

But you want to prove that you can work as a React developer under realistic conditions. And being able to build responsive layouts with CSS is very important nowadays.

It’s not difficult to make your app responsive in most circumstances. Assume you only have designs for desktops. Make sure to test your app across a variety of screen sizes, such as utilizing the responsive mode in Chrome dev tools.

Apart from writing custom CSS and keeping responsiveness in mind I have one last advice regarding styles:

Don’t use global classes.

When evaluating the portfolio projects of Junior React developers, I frequently come across global CSS classes. It makes me wonder about the candidate’s knowledge.

The problem is that global class names are not scalable. Once you have a larger application you’ll run into naming conflicts. You’ll have to use more specific names. Finally, you’ll end up using a naming convention like BEM. That’s so 2015!

Good news, this is really easy to fix. The simple solution is to use CSS Modules which works out of the box with Create React App, Next.js, or Gatsby. If you want to take it a step further have a look at one of the modern CSS-in-JS libraries like styled-components. You might need to tweak your app’s setup slightly but there should be tutorials in most cases.

In case you want to see an example, here you go.

// don't use global classes like thisimport './index.css';
const MyComponent = () => (  // this will become class="box" in the HTML
)
// but rather scoped classes with CSS Modulesimport styles from './Box.module.css';
const MyComponent = () => (  // this will become something like class="Box—box-3MbgH"
)
// or styled-components (even better imo)import styled from 'styled-components';
const Box = styled.div`  background: red;`
const MyComponent = () => (  // this will be similar to class="Box—box-3MbgH"  )

Application logic

Application logic (aka your JS code) is what makes the difference between a website and a web application.

If you plan to become a real software developer you need to prove that you can build more than a simple static website. That’s one of the reasons I’d recommend not to waste a lot of time on a portfolio website .

When evaluating the portfolio projects of Junior React developers, I frequently come across global CSS classes. It makes me wonder about the candidate’s knowledge.

  1. Routing: You can use the de facto standard React Router. A route with URL parameters would be nice to have.
  2. State: Any dynamic app relies on state. But no need to go fancy here. Since GraphQL or React Query I see more and more applications move away from state management solutions like Redux. So in my opinion, the native React hooks useStateuseReducer, or useContext should be sufficient.
  3. Data: Your app should at least fetch some data from an API and render it. Ideally, the user can trigger requests dynamically. For example, by applying a filter or submitting a form. You can prove that you understand the data flow, that you can structure your data, and that you know the basic JS array functions like mapfilter, or reduce.
  4. Tests: Automated tests are essential for any serious software product. And Senior developers value testing very highly. At the same time, most Junior developers have no experience in testing whatsoever. That can be your advantage. If you cover at least parts of your code with tests you’ll have a huge advantage over other candidates. Take my word on it and give React Testing Library a try. Here you can find a beginner’s guide to testing React apps.

Git

As a software engineer, you’ll ultimately have to collaborate with other programmers. Git is the one tool that developers must use to collaborate.

So starting to use Git in a proper way can’t hurt in any case. But it might also impact your chances of getting a job.

When I review a portfolio project to assess a candidate’s skill level I tend to have a look at the commit history.

Imagine looking at a project’s Git history and seeing commits like these:

Untitled 1.png

This looks very unprofessional.

I’ll admit that I have similar commitments in my own projects. To pick an appropriate name, we all grow bored or make too many alterations at once.

But you want to impress potential employers with your portfolio project, right? So rather write concise yet descriptive commit messages.

Untitled 2.png

Look at this. Now it’s immediately clear what this commit is about. Even though it’s not proper English ????

If you want to take a step further consider working on branches and using Pull Requests on GitHub to merge your branches.

This will signal that you have a grasp of professional development workflows. If you’re interested in a professional Git workflow have a look at my free course.

Summary

We wanted to address one topic in this section: how can you construct your React portfolio projects like a pro? The aim is to impress your potential employer and persuade them that you can contribute to their team.

Here a short overview of the tips in this part:

  • Workflows: Write your code based on designs and tasks.
  • Styles: write custom & responsive CSS, use styled-components or CSS Modules.
  • Logic: your app should have multiple pages, be stateful, and fetch data from an API. I’d highly recommend covering at least part of your code with automated tests.
  • Git: Write clear commit messages. Ideally use branches and Pull Requests.

Step 3

How to present your React portfolio project

Assume you’ve completed your portfolio project. You followed every piece of advise in step 1 to a tee. The code quality is good. In a nutshell, you’re a fantastic candidate for a Junior React role.

Finally, you take the leap and send out job applications. You’re confident that you’ll get some interviews soon.

But nothing happens. Nada. No replies. No interviews. Just crickets…

If only somebody could tell you what’s going on.

The problem is that you need to know how the recruiting process works. Applications for entry-level employment are inundated. And the folks who are examining the applications on a technical level (such as team heads or developers) are busy.

See for yourself. Let’s switch sides for a moment.

How a reviewer looks at your project

Let’s pretend you’re a developer at a company. A Junior dev applied for an open position. And you’re the one who has to review the portfolio projects.

You have a busy day. You’re in-between meetings and need to finish a feature you’ve been working on. Not much time to spend on this candidate.

Now try to observe yourself:

How do you scan the information in this repository?

Untitled 3.png

My eyes quickly scan the folders and files. The folder structure looks pretty standard for a React project at first glance.

In a matter of split seconds, they arrive at the bottom where we can see the content of the README file.

This project obviously was created using create-react-app. The README wasn’t changed, so we can dismiss it. Not much information there.

If we were carefully investigating the repository we’d see that there are open issues, pull requests as well as a dozen branches. This might indicate a good workflow.

But let’s face it. We’re in a hurry, so probably we won’t even notice these details.

So what would you being the reviewer do next?

You only have a few options. The most likely ones are

  1. Start opening files more or less randomly.
  2. Have a look at the commit history.

My guess: Most people would start opening files.

Now it’s all about how much time you put in and how soon you become bored. In any event, there’s a good chance you’ll overlook some excellent code concealed in the file structure.

You (the reviewer) have to decide by chance if I’m a great candidate for that Junior position.

How can we fix this?

Use the README file to stand out

Let me show you another version of the same repository.

Untitled 4.png

This is the same repository. I only changed the README and the About section at the top right.

As a reviewer, my eyes again would quickly arrive at the README content at the bottom. But instead of dismissing it right away, I’d stop and start reading the section “How I worked on this project”:

“Oh wow, this guy knows his sh… On his resume, I saw he has no job experience. But that’s pretty much how we work in our team. I bet he’d quickly be productive.” – Made-up conversation with myself.

Sections of a good README

The next section “How to navigate this project” points me to the most important parts of the application. If the code behind these links looks OK, I’m ready to give this candidate a go.

The section “Why I built the project this way” reveals information about the reasoning behind some technical decisions. That’s really great because it allows the reviewer to tap into your thought process.

A final section “If I had more time I would change this” shows that you can take a step back and self-reflect. Very important for working in a team.

The available scripts are only visible at the very bottom. It’s almost as if they don’t matter any longer. In any case, it’s unlikely that anyone will download and execute the project. However, having them is excellent documenting practice.

There’s one final advantage of writing such a README that I didn’t mention yet:

By writing all this documentation you not only guide the reviewer through the project. You also prove your communication skills. Any experienced hiring manager knows how important yet rare these are among engineers.

So invest some time into writing a clear and descriptive README. Write it. Let it rest. Then return a couple of days later to review it with a fresh pair of eyes.

Complete Video Tutorials :

What’s Next

Congratulations! You now have a portfolio app live on the web that shows off all of your projects and skills to potential employers.

The next step to take would be to set up a custom domain, preferably with your name (i.e. reedbarger.com). Since Netlify includes a DNS you can easily set up a custom domain with them.

Look into maybe adding a blog to your React app to show off even more of your developer knowledge to potential employers.

Make your personal portfolio an expression of yourself and what you are passionate about as a developer and you’ll have success!

How do I start learning React?

Learning React is well within your grasp. Follow these steps to get started:

Learn the basics of web development

It’s easy to feel overwhelmed by the new world of web development, which is replete with new language and new skills to acquire. However, we must all begin somewhere. That’s why, before getting into React, we recommend that you spend some time learning the foundations of programming and web development.

This is due to two factors. First and foremost, you’ll lay a solid foundation of abilities that will serve you well throughout your career, regardless of which path you choose. Second, if you’ve previously learned the fundamentals, you’ll find studying React to be considerably more enjoyable and less difficult. Instead of debugging difficulties, you’ll be able to make the most of your learning time by digging into React’s unique capabilities.

Recommended Web Development Guides

Take a React course

Once you have a solid grasp of programming, web development, and JavaScript, check out our Learn React course. We’ll walk you through the basics of React programming, including its JSX syntax, various components, lifecycle methods, and more. After learning the library’s fundamentals, take it a step further by learning how to create a front-end app with React.

Summary

  • the README might be the most important page of your project
  • you can make sure that the reviewer sees what they need to see
  • you can impress the hiring manager with your communication skills
  • you will appear a lot more professional

In short: a clean and informative README will let you stand out from other candidates.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *