Dummy Data

Before we connect a real backend, I want to focus on some of this project's core features, such as dragging elements around and setting unique card styles for each note.

To do this, we will create some dummy data, which will allow us to visualize the data structure we need, and minimize the work needed to build out some of the core features.

Each note in our array will be a JSON object that looks like this:

    {
        $id: 1,
        body: "",
        colors: {
            ...
        },
        position:{...},
    },

Create JSON Array

Within src/assets/fakeData.js, paste the following code sample.

⚠️

Be sure to add a .js extension and NOT .json. This will be needed to stringify rich text.

fakeData.js

export const fakeData = [
    {
        $id: 1,
        body: JSON.stringify(
            'Resources:\n- Book: "You Don\'t Know JS: Scope & Closures" by Kyle Simpson.\n\n- Online Course: "JavaScript Patterns" on Udemy.\n\n- Articles:\n"Understanding JavaScript Closures" on Medium.\n\n"Mastering JavaScript Modules" on Dev.to.'
        ),
        colors: JSON.stringify({
            id: "color-purple",
            colorHeader: "#FED0FD",
            colorBody: "#FEE5FD",
            colorText: "#18181A",
        }),
        position: JSON.stringify({ x: 505, y: 10 }),
    },
    {
        $id: 2,
        body: JSON.stringify(
            'Resources:\n- Book: "You Don\'t Know JS: Scope & Closures" by Kyle Simpson.\n\n- Online Course: "JavaScript Patterns" on Udemy.\n\n- Articles:\n"Understanding JavaScript Closures" on Medium.\n\n"Mastering JavaScript Modules" on Dev.to.'
        ),
        colors: JSON.stringify({
            id: "color-blue",
            colorHeader: "#9BD1DE",
            colorBody: "#A6DCE9",
            colorText: "#18181A",
        }),
        position: JSON.stringify({ x: 305, y: 110 }),
    },
    {
        $id: 3,
        body: JSON.stringify(
            'Resources:\n- Book: "You Don\'t Know JS: Scope & Closures" by Kyle Simpson.\n\n- Online Course: "JavaScript Patterns" on Udemy.\n\n- Articles:\n"Understanding JavaScript Closures" on Medium.\n\n"Mastering JavaScript Modules" on Dev.to.'
        ),
        colors: JSON.stringify({
            id: "color-yellow",
            colorHeader: "#FFEFBE",
            colorBody: "#FFF5DF",
            colorText: "#18181A",
        }),
        position: JSON.stringify({ x: 605, y: 500 }),
    },
];

A note in our database will contain the following attributes:

$id
body - A text field, stores stringified rich text.
colors - A text field, stores a stringified JSON object of color settings for a note:
position - A text field, stores a stringified JSON object of X & Y coordinates for our note.

1.2 Basic Styling 1.4 Card Component