Create a JSON Resume Viewer in React

Hello there! If you’re looking to dive into the magical world of React and want to create something fun and practical, you’re in luck. Today, we’ll be crafting a JSON resume viewer using React. This will not only enhance your understanding of React but also give you a tool to showcase your resume in a tech-savvy way.

Why a JSON Resume Viewer?

Before we start, let’s understand why a JSON resume viewer is a neat project:

– JSON as a Standard: JSON (JavaScript Object Notation) is a popular data format that’s easy to read and write. Using JSON for your resume ensures that your information is organized and accessible for apps.

– Dynamic and Interactive: Unlike static PDFs, a JSON-based resume in React can be dynamic, responsive, and more interactive.

– Great Learning Experience: Building this project will help you strengthen your grasp on JSON, React components, state management, and props.

Setting Up Your React Environment

Prerequisites

Before we kick off, ensure you have Node.js and npm (Node Package Manager) installed. You can download them from the official Node.js website.

Bootstrap a New React App

To get started, open your terminal and create a new React app. You can do this easily using Create React App, a command-line tool that sets up everything for you:

bash
npx create-react-app json-resume-viewer
cd json-resume-viewer

Now, open the project in your favorite code editor.

Structuring the Project

Let’s keep it simple and clear. Here’s what our project structure will look like:

json-resume-viewer/
│
├── src/
│   ├── components/
│   │   ├── Resume.js
│   │   └── Experience.js
│   ├── data/
│   │   └── resume.json
│   ├── App.js
│   ├── index.js
│   └── App.css
│
└── public/

Preparing Your JSON Data

First, let’s create a simple JSON file that will hold your resume data. Inside src/data/, create a file named resume.json.

Here’s an example JSON structure:

json
{
  "name": "John Doe",
  "title": "Software Engineer",
  "contact": "john.doe@example.com",
  "skills": ["JavaScript", "React", "Node.js"],
  "experience": [
    {
      "company": "Tech Inc.",
      "role": "Frontend Developer",
      "duration": "Jan 2020 - Present"
    }
  ]
}

Feel free to customize this with your own data!

Building the Resume Viewer

Display Personal Information

Let’s start by displaying the basic personal information. Create a Resume.js file in the components directory and add the following code:

jsx
import React from 'react';

const Resume = ({ data }) => {
  if (!data) return 
Loading...
;

  return (
    

      
{data.name}

      
{data.title}

      
Contact: {data.contact}

    

  );
};

export default Resume;

List Skills

Following that, we can create a simple list to showcase skills:

jsx
const SkillList = ({ skills }) => (
  

    {skills.map((skill, index) => (
      
{skill}

    ))}
  

);

Show Experience

Now, let’s display the work experience using another reusable component, Experience.js:

jsx
import React from 'react';

const Experience = ({ experience }) => (
  

    
Experience

    {experience.map((exp, index) => (
      

        
{exp.company}

        
{exp.role}

        
{exp.duration}

      

    ))}
  

);

export default Experience;

Assemble Everything

Time to assemble our viewer! Head over to App.js and import the components you just created:

jsx
import React, { useEffect, useState } from 'react';
import Resume from './components/Resume';
import Experience from './components/Experience';
import resumeData from './data/resume.json'; // Import JSON

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Simulate a data fetch
    setTimeout(() => setData(resumeData), 500);
  }, []);

  return (
    

      
      {data && }
    

  );
};

export default App;

Styling Your App

You can add some basic styles in App.css to make your app more visually appealing:

css
.App {
  font-family: Arial, sans-serif;
  margin: 20px;
}

h1, h3, h4 {
  color: #4a4a4a;
}

ul {
  padding: 0;
}

li {
  list-style-type: none;
}

Running the App

Back in your terminal, start your development server:

bash
npm start

Open your browser and navigate to http://localhost:3000. You should see your JSON resume displayed neatly!

Wrapping Up

Congratulations, you’ve built a JSON Resume Viewer using React! You’ve learned how to:

– Set up a React application
– Read and display data from a JSON file
– Create reusable components
– Handle state with React hooks

Practice Makes Perfect

To take things further, try adding sections like education, projects, or testimonials. Maybe even fetch the JSON data from a server! Experiment, modify, and make this project your own.

Feel free to share your creations or ask questions in the comments below. Happy coding!