DEV Community

Cover image for Faker.js Generator - Never write sample data manually again ⌛
Matej Bačo
Matej Bačo

Posted on

Faker.js Generator - Never write sample data manually again ⌛

I created this project when I tried to learn proper state management on the frontend. I wanted to come up with a project that has a complex state and will be helpful for at least one person. There you go, Faker.js Generator 😱

Links:


Problem ➡️ Solution

First of all, I believe we can all agree that testing the frontend with sample data is necessary to lower changes of visual bugs on production. If you placed the same Lorem ipsum ... into every paragraph on your website, you would not get far because there are some texts that you expect to be short, such as the user's first name. On the other hand, if you used simple Hello world everywhere, you would not test long paragraphs properly and might miss text alignment issues.

Secondly, you always need to test your frontend with multiple sample data. Data is the dynamic part of your website, and chances are, there will be some content generated by a user. Believe me, my most common problem when developing a frontend application was that I expected the user to do something. I learned this is not true the hard way when I found users with emails like daniel-michael-blake-day-lewis-1985@gmail.com started joining the platform, and I was trying to fit the whole email into 100px wide element.

Last but not least, there are many cases when a team is developing a full-stack application, and sadly, some companies force frontend developers to work on UI without backend prepared. You end up copy&pasting texts from Figma... Yeah, that will fit. It will... But what about actual data? You need to make sure! Get some fake data and test the UI with random data to make sure it really fits, so you don't have to re-check your whole application on every single device once you start hooking it to the API server.

To solve these problems I came up with a simple web application that lets you define a scheme you need for your frontend application and simply generate JSON object with random data using Faker.js library.

How to use

CleanShot 2021-08-07 at 17.57.20

This is pretty much as simple as it gets 😅 Follow a few simple steps to prepare sample JSON data for your application:

  1. Define a scheme using no-code GUI
    • I came up with a simple yet powerful interface where you can design any shape of a JSON object. The tool supports plain values, arrays and objects.
  2. Spam Generate button until you are satisfied with fake data
    • After defining a scheme, you can generate a unique object with sample data by pressing one single button! Define multiple objects easily to test your application for different data. Sure, your UI can fit the name Matej. But can it fit Chernyshevsky? 🤔
  3. Make adjustments to generated JSON manually, if required
    • Since this is a simple no-code platform, you cant expect to build a helicopter with it... The most significant limitation I found out about from feedbacks is joining multiple fake data into one field, such as firstName + middleName + lastName. These changes can be easily done manually once you have your JSON ready. For these purposes, the generated JSON is editable right inside the platform in Visual Studio Code-like editor.
  4. Copy the JSON and paste it into your project
    • There you go, your JSON is ready! Simply copy the content of the editor into your source code and start using it. The output includes " around every key and value to make it a valid JSON if you put it into .json file.

Tips & Tricks

  • You can configure the amount of sample data inside JSON arrays, so you fill your UI with multiple blocks. This works for both simple arrays and arrays of objects.
  • Everything is saved into localStorage! Prepare the schema, leave, come back tomorrow and generate a new sample JSON.
  • If you paste the output into a javascript file and save it, most IDEs will automatically transfer it into the format without " around keys. This makes the code easier to read and smaller in size.

That's it, for now ✨ If you are like my side-projects, feel free to follow me, and you will be notified whenever a new post is published. You can also give the project star on github to keep me motivated 🙏

Discussion (3)

Collapse
amandaiaria profile image
Amanda Iaria

This is pretty cool. :D

I do have few suggestions to help with the UX side of your app.

  1. And Edit button for properties. I found myself needing to wanting to rename a few properties but since they were the containing object I would have to start over just to rename ....
  2. Copy to clipboard button. Yeah I could just highlight and copy but a copy button would make it faster :P
  3. Instead of using the side pop out what about a regular modal?

This last one is just an idea that might take too long to do, but since I'm throwing ideas out there:

  • what about being able to drag the order of the properties around if you want to change their order?

Cheers!

Collapse
meldiron profile image
Matej Bačo Author

Thanks for the feedback ❤️

  1. Yeah, totaly!
  2. Sure, I can add that
  3. I was deciding between modal and slideover, I went with slideover because I think even more stuff will be added to the form and scrolling modal is not optimal
  4. Never did nice-looking drag&drop experience, this might be a challenge 😈
Collapse
meldiron profile image
Matej Bačo Author

Just finished an update 💪 It includes points 1 and 2.

Screenshot