DEV Community

Will Sheppard
Will Sheppard

Posted on

Building Mockedin: A Simplified LinkedIn Experience with React, Vite, JSON Server, and Concurrently

Image description

📬 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

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 
   yarn create vite mockedin-client --template react
Enter fullscreen mode Exit fullscreen mode
  1. Go into your project folder 
   cd mockedin-client
Enter fullscreen mode Exit fullscreen mode
  1. Install JSON Server and Concurrently 
   yarn add json-server concurrently --dev
Enter fullscreen mode Exit fullscreen mode
  1. Optionally, install Axios 
   yarn add axios
Enter fullscreen mode Exit fullscreen mode
  1. Update package.json scripts 
   "scripts": {
     "dev": "concurrently \"vite\" \"yarn mock-api\"",
     "build": "vite build",
     "serve": "vite preview",
     "mock-api": "json-server --watch db.json --port 5000"
   }
Enter fullscreen mode Exit fullscreen mode
  1. Run your project 
   yarn dev
Enter fullscreen mode Exit fullscreen mode

With npm

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

Inside Mockedin-Client

Database File (db.json)

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

{
  "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" }
  ]
}
Enter fullscreen mode Exit fullscreen mode

React Component (App.jsx)

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

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

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:

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

.json
├── package.json
└── README.md
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

imsushant12 profile image

Interview Questions on AWS EC2 and Compute Services

Sushant Gaurav -

majeedatwahab profile image

Rejected By Grad Schools, Accepted By Code: My Transition into Tech

Majeedat Abdulwahab -

readymade-ui profile image

Building Responsive Layouts with Tailwind CSS

ReadymadeUI -

bharu_0fec38bd0fb51b76742 profile image

Getting Started with Java: A Beginner's Guide

Bharu -