Building Mockedin: A Simplified LinkedIn Experience with React, Vite, JSON Server, and Concurrently
Published: 2023-08-25 15:19:00

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mw88v951nr96m5oh4q2x.gif)

📬 **Contact Me:**
Github: https://github.com/willshepp28
Email: willsheppard.dev@gmail.com
LinkedIn: https://www.linkedin.com/in/will-sheppard-81a184145/

**Github Repo for this project:**
https://github.com/willshepp28/Mockedin

## Table of Contents

- [Introduction](#introduction)
- [Why Mockedin-Client?](#why-mockedin-client)
- [Setting Up Mockedin-Client](#setting-up-mockedin-client)
  - [With Yarn](#with-yarn)
  - [With npm](#with-npm)
- [Inside Mockedin-Client](#inside-mockedin-client)
- [In Layman's Terms](#in-laymans-terms)
- [Conclusion](#conclusion)
- [Project Folder Structure](#project-folder-structure)

---

## Introduction

Welcome, developers! 🎉 Introducing "Mockedin," a client-side project simulating key LinkedIn features. This project is powered by React, Vite, JSON Server, and Concurrently, forming a robust environment for real-world development simulation.

---

## Why Mockedin?

- **React**: For interactive UI components 🧩
- **Vite**: For speedy development 🚀
- **JSON Server**: To mock REST APIs effortlessly 📡
- **Concurrently**: To run frontend and backend simultaneously, saving development time 🕒

---

## Setting Up Mockedin

### With Yarn

1. **Create new Vite-React project**
   ```bash
   yarn create vite mockedin-client --template react
   ```
2. **Go into your project folder**
   ```bash
   cd mockedin-client
   ```
3. **Install JSON Server and Concurrently**
   ```bash
   yarn add json-server concurrently --dev
   ```
4. **Optionally, install Axios**
   ```bash
   yarn add axios
   ```
5. **Update package.json scripts**
   ```json
   "scripts": {
     "dev": "concurrently \"vite\" \"yarn mock-api\"",
     "build": "vite build",
     "serve": "vite preview",
     "mock-api": "json-server --watch db.json --port 5000"
   }
   ```
6. **Run your project**
   ```bash
   yarn dev
   ```

---

### With npm

1. **Create new Vite-React project**
   ```bash
   npm init vite@latest mockedin-client -- --template react
   ```
2. **Navigate to your project folder**
   ```bash
   cd mockedin-client
   ```
3. **Install JSON Server and Concurrently**
   ```bash
   npm install json-server concurrently --save-dev
   ```
4. **Optional: Install Axios**
   ```bash
   npm install axios
   ```
5. **Update package.json scripts**
   ```json
   "scripts": {
     "dev": "concurrently \"vite\" \"npm run mock-api\"",
     "build": "vite build",
     "serve": "vite preview",
     "mock-api": "json-server --watch db.json --port 5000"
   }
   ```
6. **Run your project**
   ```bash
   npm run dev
   ```

---

## Inside Mockedin-Client

### Database File (`db.json`)

Create a `db.json` file to act as our faux LinkedIn database.

```json
{
  "linkedinUsers": [
    { "id": 1, "name": "John Doe", "position": "Developer" },
    { "id": 2, "name": "Jane Smith", "position": "Recruiter" },
    { "id": 3, "name": "Emily Johnson", "position": "CEO" },
    { "id": 4, "name": "Mike Brown", "position": "Sales" }
  ]
}
```

---

### React Component (`App.jsx`)

Here is how the React component looks to fetch and display data.

```jsx
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const App = () => {
  const [linkedinUsers, setLinkedinUsers] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/linkedinUsers').then(response => {
      setLinkedinUsers(response.data);
    });
  }, []);

  return (
    <div>
      {linkedinUsers.map(user => (
        <div key={user.id}>{user.name} - {user.position}</div>
      ))}
    </div>
  );
};
```

---

## In Layman's Terms

- **db.json**: A pretend LinkedIn database 📚
- **App.jsx**: The orchestrator, getting LinkedIn profiles from our mock database and displaying them 🎭
- **Concurrently**: Our helper that ensures both the stage and the script are set before the show starts 🎬

---

## Conclusion

Mockedin offers a rich development experience with React, Vite, JSON Server, and Concurrently. It is perfect for those wanting to develop LinkedIn-like features without worrying about real-world API limitations. 🌟

---

## Project Folder Structure

Here's how the folder structure of Mockedin-Client looks:

```plaintext
mockedin-client/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.jsx
│   └── main.jsx
├── db

.json
├── package.json
└── README.md
```