Making an administration dashboard for all my freelance clients is always a challenge. It’s just annoying to create a new database, add it to your site, enable authentication, etc.<\/p>\n\n\n\n\n\n\n\n
It’s understandable why a lot of people use WordPress instead of raw code, mainly for the reason of the dashboard and how easy it is to edit things.<\/p>\n\n\n\n
Guess what? I just changed that for all you React and Next.js developers out there. You won’t have to use WordPress over your favorite stack anymore or spend hours sweating your brain out coding an admin dashboard. All it takes to implement this is a git clone, editing some JSON and ENV values, and your dashboard is ready to go!<\/p>\n\n\n\n
Take a look at the demo and try it out! Open your favorite code editor and run Before you start on the admin dashboard go to the You’ll need to set two fields in the Don’t worry, I’ve already applied Rate Limiting on the password ‘n all (three failed login attempts per thirty minutes), so no worries on the bad guys getting in your site and messing up all the content.<\/p>\n\n\n\n Go to the If you went to the admin page in the demo, which is probably corrupted to a massive extent, and played around with it, you can see that the fields consist of single string fields, multiple strings fields, and arrays.<\/p>\n\n\n\n Open up Run Single-text-fields can be useful for editing short headlines, descriptions, paragraphs, and more. As for pages that have multiple paragraphs, features, or other things that require more content, you can use Multi-string fields.<\/p>\n\n\n\n Open up In this example, the length of this array will be three and generate three editable text fields. Array Fields are particularly useful for simple blogs and other storage functions where authentication isn’t required.<\/p>\n\n\n\n Create a new field “posts” and set it to an empty array.<\/p>\n\n\n\n Go That, of course, is just an example. Now go to your admin dashboard and try it out. After creating a post, you should see a new element added to your schema array in All schema-type array fields automatically will be given a random You may add as many fields to the To get the data from You can access the json file from the client side of your application as well as the server side.<\/p>\n\n\n\n Writing to data.json from anywhere else besides the original admin api routes can be done from another api route. You may use the The The object returned will overwrite the entire json file completely.<\/p>\n\n\n\n Have fun, try your best to not abuse the playground demo too much, and feel free to use this admin page in any of your projects.<\/p>\n","protected":false},"excerpt":{"rendered":" Making an administration dashboard for all my freelance clients is always a challenge. It’s just annoying to create a new database, add it to your site, enable authentication, etc.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[177,161],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2234"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2234"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2234\/revisions"}],"predecessor-version":[{"id":2235,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2234\/revisions\/2235"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
https:\/\/next-admin.ironcladdev.repl.co\/<\/a><\/p>\n\n\n\n<\/a>Getting the Code<\/h3>\n\n\n\n
git clone https:\/\/github.com\/Conner1115\/next-admin.git<\/code>. You won’t even have to run npx create-next-app<\/code> since all the files are already there for you. Simply run npm run dev<\/code> and then start building your site around that.<\/p>\n\n\n\n<\/a>Customizing Authentication<\/h3>\n\n\n\n
.env<\/code> file. Set a strong password, which is the one you’ll be using to log in and out of your dashboard, and a long random string for the session cookie. This enables security and prevents brute-forcing.<\/p>\n\n\n\n.env<\/code> file. ADMIN_SESSION<\/code> which is the long random string and ADMIN_PASSWORD<\/code> which is the password you’ll use to log in.<\/p>\n\n\n\n<\/a>Customizing the Dashboard<\/h3>\n\n\n\n
data<\/code> folder and then open up data.json<\/code>. This is where you will control the different types of data that can be edited.<\/p>\n\n\n\n<\/a>Create a single String Field<\/h4>\n\n\n\n
data.json<\/code>, clear out all the existing fields, and add an item \"homepage\"<\/code>.<\/p>\n\n\n\n{\n \"homepage\": \"This is the text that goes on the homepage\"\n}\n<\/code><\/pre>\n\n\n\nnpm run dev<\/code> in the terminal and go to http:\/\/localhost:3000\/admin<\/a>.
You should be seeing something already after you log in.
<\/a><\/p>\n\n\n\n<\/a>Create a Multi-string field<\/h4>\n\n\n\n
data.json<\/code> and add a field “paragraphs” as an array of strings. This array can be of any length.<\/p>\n\n\n\n{\n \"homepage\": \"This is the text that goes on the homepage\",\n \"paragraphs\": [\"This is paragraph One\", \"This is paragraph Two\", \"I'm the third paragraph\"]\n}\n<\/code><\/pre>\n\n\n\n
<\/a><\/p>\n\n\n\n<\/a>Array Field<\/h4>\n\n\n\n
{\n \"homepage\": \"This is the text that goes on the homepage\",\n \"paragraphs\": [\"This is paragraph One\", \"This is paragraph Two\", \"I'm the third paragraph\"],\n \"posts\": []\n}\n<\/code><\/pre>\n\n\n\nschemas.json<\/code> and add an object “posts”. From there you can set the input fields. Make sure the field in schemas.json is the same name as data.json<\/strong>.<\/p>\n\n\n\n{\n \"posts\": {\n \"title\": \"text\",\n \"text\": \"textarea\",\n \"date\": \"date\",\n \"luckynumber\": \"number\"\n }\n}\n<\/code><\/pre>\n\n\n\n\"date\"<\/code> and \"luckynumber\"<\/code> exist as examples to show what types of inputs there are. The type of input (besides “textarea”) will always be a type in an html <input><\/code> tag. If “textarea” is used, a <textarea><\/code> tag will be generated.<\/p>\n\n\n\ndata.json<\/code>.<\/p>\n\n\n\n{\n ...\n \"posts\": [\n {\n \"title\": \"Title\",\n \"text\": \"Test Text\",\n \"date\": \"2022-01-21\",\n \"luckynumber\": \"1\",\n \"id\": \"d8d2ef38-b02c-496b-9833-c53fa3b063c9\"\n }\n ]\n}\n<\/code><\/pre>\n\n\n\nuuid<\/code>.<\/p>\n\n\n\ndata.json<\/code> object as you want. All top-level object keys will be added and editable in the dashboard.<\/p>\n\n\n\n<\/a>Accessing the data<\/h3>\n\n\n\n
data.json<\/code> and use it in your pages, simply import it in one of your pages and use it as a valid javascript object.<\/p>\n\n\n\nimport json from '..\/..\/data\/data.json';\n\nexport default function Home(){\n return (\n <div>\n <h1>{json.headline}<\/h1>\n <\/div>\n );\n}\n<\/code><\/pre>\n\n\n\n<\/a>Writing to
data.json<\/code><\/h3>\n\n\n\nwriteJSON<\/code> function which is located under scripts\/util.js<\/code>.<\/p>\n\n\n\nwriteJSON<\/code> function takes a single parameter, which is a function that should return an object.<\/p>\n\n\n\n{\n \"field\": \"value\"\n}\n<\/code><\/pre>\n\n\n\nwriteJSON((json) => ({\n ...json,\n \/\/updating a field\n \"field\": \"newvalue\",\n \/\/adding a new field\n \"field2\", \"value\"\n}))\n<\/code><\/pre>\n\n\n\n
![<\/a><\/p>\n\n\n\nSingle-text-fields can be useful for editing short headlines, descriptions, paragraphs, and more. As for pages that have multiple paragraphs, features, or other things that require more content, you can use Multi-string fields.<\/p>\n\n\n\n<\/a>Create a Multi-string field<\/h4>\n\n\n\nOpen up data.json<\/code> and add a field “paragraphs” as an array of strings. This array can be of any length.<\/p>\n\n\n\n{\n \"homepage\": \"This is the text that goes on the homepage\",\n \"paragraphs\": [\"This is paragraph One\", \"This is paragraph Two\", \"I'm the third paragraph\"]\n}\n<\/code><\/pre>\n\n\n\nIn this example, the length of this array will be three and generate three editable text fields.<\/a><\/p>\n\n\n\n<\/a>Array Field<\/h4>\n\n\n\nArray Fields are particularly useful for simple blogs and other storage functions where authentication isn’t required.<\/p>\n\n\n\nCreate a new field “posts” and set it to an empty array.<\/p>\n\n\n\n{\n \"homepage\": \"This is the text that goes on the homepage\",\n \"paragraphs\": [\"This is paragraph One\", \"This is paragraph Two\", \"I'm the third paragraph\"],\n \"posts\": []\n}\n<\/code><\/pre>\n\n\n\nGo schemas.json<\/code> and add an object “posts”. From there you can set the input fields. Make sure the field in schemas.json is the same name as data.json<\/strong>.<\/p>\n\n\n\n{\n \"posts\": {\n \"title\": \"text\",\n \"text\": \"textarea\",\n \"date\": \"date\",\n \"luckynumber\": \"number\"\n }\n}\n<\/code><\/pre>\n\n\n\nThat, of course, is just an example. \"date\"<\/code> and \"luckynumber\"<\/code> exist as examples to show what types of inputs there are. The type of input (besides “textarea”) will always be a type in an html <input><\/code> tag. If “textarea” is used, a <textarea><\/code> tag will be generated.<\/p>\n\n\n\nNow go to your admin dashboard and try it out. After creating a post, you should see a new element added to your schema array in data.json<\/code>.<\/p>\n\n\n\n{\n ...\n \"posts\": [\n {\n \"title\": \"Title\",\n \"text\": \"Test Text\",\n \"date\": \"2022-01-21\",\n \"luckynumber\": \"1\",\n \"id\": \"d8d2ef38-b02c-496b-9833-c53fa3b063c9\"\n }\n ]\n}\n<\/code><\/pre>\n\n\n\nAll schema-type array fields automatically will be given a random uuid<\/code>.<\/p>\n\n\n\nYou may add as many fields to the data.json<\/code> object as you want. All top-level object keys will be added and editable in the dashboard.<\/p>\n\n\n\n<\/a>Accessing the data<\/h3>\n\n\n\nTo get the data from data.json<\/code> and use it in your pages, simply import it in one of your pages and use it as a valid javascript object.<\/p>\n\n\n\nimport json from '..\/..\/data\/data.json';\n\nexport default function Home(){\n return (\n <div>\n <h1>{json.headline}<\/h1>\n <\/div>\n );\n}\n<\/code><\/pre>\n\n\n\nYou can access the json file from the client side of your application as well as the server side.<\/p>\n\n\n\n<\/a>Writing to data.json<\/code><\/h3>\n\n\n\nWriting to data.json from anywhere else besides the original admin api routes can be done from another api route. You may use the writeJSON<\/code> function which is located under scripts\/util.js<\/code>.<\/p>\n\n\n\nThe writeJSON<\/code> function takes a single parameter, which is a function that should return an object.<\/p>\n\n\n\nThe object returned will overwrite the entire json file completely.<\/p>\n\n\n\n{\n \"field\": \"value\"\n}\n<\/code><\/pre>\n\n\n\nwriteJSON((json) => ({\n ...json,\n \/\/updating a field\n \"field\": \"newvalue\",\n \/\/adding a new field\n \"field2\", \"value\"\n}))\n<\/code><\/pre>\n\n\n\nHave fun, try your best to not abuse the playground demo too much, and feel free to use this admin page in any of your projects.<\/p>\n","protected":false},"excerpt":{"rendered":"Making an administration dashboard for all my freelance clients is always a challenge. It’s just annoying to create a new database, add it to your site, enable authentication, etc.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[177,161],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2234"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2234"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2234\/revisions"}],"predecessor-version":[{"id":2235,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2234\/revisions\/2235"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--1wgrdIva--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/4u94wu27t3b5ax5qanf4.png\"){kind=link}
![<\/a><\/p>\n\n\n\n<\/a>Array Field<\/h4>\n\n\n\nArray Fields are particularly useful for simple blogs and other storage functions where authentication isn’t required.<\/p>\n\n\n\nCreate a new field “posts” and set it to an empty array.<\/p>\n\n\n\n{\n \"homepage\": \"This is the text that goes on the homepage\",\n \"paragraphs\": [\"This is paragraph One\", \"This is paragraph Two\", \"I'm the third paragraph\"],\n \"posts\": []\n}\n<\/code><\/pre>\n\n\n\nGo schemas.json<\/code> and add an object “posts”. From there you can set the input fields. Make sure the field in schemas.json is the same name as data.json<\/strong>.<\/p>\n\n\n\n{\n \"posts\": {\n \"title\": \"text\",\n \"text\": \"textarea\",\n \"date\": \"date\",\n \"luckynumber\": \"number\"\n }\n}\n<\/code><\/pre>\n\n\n\nThat, of course, is just an example. \"date\"<\/code> and \"luckynumber\"<\/code> exist as examples to show what types of inputs there are. The type of input (besides “textarea”) will always be a type in an html <input><\/code> tag. If “textarea” is used, a <textarea><\/code> tag will be generated.<\/p>\n\n\n\nNow go to your admin dashboard and try it out. After creating a post, you should see a new element added to your schema array in data.json<\/code>.<\/p>\n\n\n\n{\n ...\n \"posts\": [\n {\n \"title\": \"Title\",\n \"text\": \"Test Text\",\n \"date\": \"2022-01-21\",\n \"luckynumber\": \"1\",\n \"id\": \"d8d2ef38-b02c-496b-9833-c53fa3b063c9\"\n }\n ]\n}\n<\/code><\/pre>\n\n\n\nAll schema-type array fields automatically will be given a random uuid<\/code>.<\/p>\n\n\n\nYou may add as many fields to the data.json<\/code> object as you want. All top-level object keys will be added and editable in the dashboard.<\/p>\n\n\n\n<\/a>Accessing the data<\/h3>\n\n\n\nTo get the data from data.json<\/code> and use it in your pages, simply import it in one of your pages and use it as a valid javascript object.<\/p>\n\n\n\nimport json from '..\/..\/data\/data.json';\n\nexport default function Home(){\n return (\n <div>\n <h1>{json.headline}<\/h1>\n <\/div>\n );\n}\n<\/code><\/pre>\n\n\n\nYou can access the json file from the client side of your application as well as the server side.<\/p>\n\n\n\n<\/a>Writing to data.json<\/code><\/h3>\n\n\n\nWriting to data.json from anywhere else besides the original admin api routes can be done from another api route. You may use the writeJSON<\/code> function which is located under scripts\/util.js<\/code>.<\/p>\n\n\n\nThe writeJSON<\/code> function takes a single parameter, which is a function that should return an object.<\/p>\n\n\n\nThe object returned will overwrite the entire json file completely.<\/p>\n\n\n\n{\n \"field\": \"value\"\n}\n<\/code><\/pre>\n\n\n\nwriteJSON((json) => ({\n ...json,\n \/\/updating a field\n \"field\": \"newvalue\",\n \/\/adding a new field\n \"field2\", \"value\"\n}))\n<\/code><\/pre>\n\n\n\nHave fun, try your best to not abuse the playground demo too much, and feel free to use this admin page in any of your projects.<\/p>\n","protected":false},"excerpt":{"rendered":"Making an administration dashboard for all my freelance clients is always a challenge. It’s just annoying to create a new database, add it to your site, enable authentication, etc.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[177,161],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2234"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2234"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2234\/revisions"}],"predecessor-version":[{"id":2235,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2234\/revisions\/2235"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--77WqOFf4--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/e2e3lfcr0zclijoam41a.png\"){kind=link}