{"id":27985,"date":"2022-03-21T19:24:47","date_gmt":"2022-03-21T19:24:47","guid":{"rendered":"http:\/\/Building-a-User-Dashboard-with-Redwood"},"modified":"2022-03-21T19:24:47","modified_gmt":"2022-03-21T19:24:47","slug":"building-a-user-dashboard-with-redwood","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/","title":{"rendered":"Building a User Dashboard with Redwood"},"content":{"rendered":"

There\u2019s a dashboard for just about every application you log in to these days. Most of them are built with modern frameworks like React or Angular and they have some kind of back-end to support them. Users depend on these dashboards to check their account info, make updates to their businesses, and handle a number of other actions.<\/p>\n

In this tutorial, we\u2019ll be making a user dashboard for a management system with Redwood. It\u2019ll have a few actions that a user can take to add other users to the account with different roles. The dashboard will also let a user add new items to their inventory and the items will be attached to different locations.<\/p>\n

Let\u2019s kick it off with a little background on Redwood.<\/p>\n

What is Redwood<\/h2>\n

Redwood is a full-stack framework built with Prisma, React, and GraphQL. It comes with a lot of features with a few commands that we\u2019ll be using to make this app quickly. If you\u2019re interested in learning more about Redwood, make sure to check out their docs<\/a>.<\/p>\n

Set up the project<\/h2>\n

Now let\u2019s jump into getting our dashboard set up. We\u2019ll bootstrap this app by running the following command. Just a heads up, it might take a few minutes for it to finish, but it\u2019ll be worth the wait.<\/p>\n

yarn create redwood-app .\/redwood-dashboard<\/code><\/p>\n

When the command has finished executing, you\u2019ll notice you have quite a few folders and files. The most important folders are the api<\/code> directory and the web<\/code> directory. The api<\/code> directory holds all of the code for the back-end and database while the web<\/code> directory holds everything for the front-end.<\/p>\n

Before we start working on the app, you should run it to see how it works first. Use the following command to start both the front-end and back-end.<\/p>\n

yarn rw dev<\/code><\/p>\n

Here\u2019s what you should see in your browser.<\/p>\n

\"base<\/p>\n

Defining the dashboard model<\/h2>\n

Since you\u2019ve seen the app in action, let\u2019s start taking advantage of some Redwood commands to work on the back-end. We\u2019ll start by making a Prisma model for the dashboard. This is how our app will connect to a Postgres database. Inside of the api > db<\/code>, open the schema.prisma<\/code> file.<\/p>\n

This is where we\u2019ll make the schema for the tables we want in our database using a few different kinds of relations. You\u2019ll see that Redwood already has a few configs set and an example of a user model.<\/p>\n

We\u2019ll be changing the datasource db provider<\/code> to postgresql<\/code> which you can see in the code snippet below.<\/p>\n

datasource db {\n  provider = \"postgresql\"<\/span>\n  url      = env(\"DATABASE_URL\"<\/span>)\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Then we\u2019ll remove the TODO<\/code> and update the example user model.<\/p>\n
model User {\n  id    Int    @id @default<\/span>(autoincrement())\n  email String<\/span> @unique\n  name  String<\/span>\n  role  String<\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Our updated User<\/code> model has a few columns for information we want to store about a user. The email<\/code> field has a constraint that it always has to be a unique value. The same email address can\u2019t be in the database multiple times. Next, we\u2019ll add a new model for our Item<\/code> and Location<\/code> tables. These need to be created at the same time because they have a relationship with each other.<\/p>\n
model Item {\n  id         Int      @id @default<\/span>(autoincrement())\n  sku        String<\/span>   @unique\n  name       String<\/span>\n  location   Location @relation(fields: [locationId], references<\/span>: [id])\n  locationId Int\n}\n\nmodel Location {\n  id       Int    @id @default<\/span>(autoincrement())\n  name     String<\/span>\n  district Int\n  Item     Item[]\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Then we\u2019ll update the seed.js<\/code> file so that there are a few values present before we start our app. This is common on product dashboards for populating dropdown options or initializing tags that users can add to different settings. We\u2019ll be adding a user, an item, and one location to seed our database. Just a heads up, I\u2019ve deleted a lot of comments from this file.<\/p>\n
\/* eslint-disable no-console *\/<\/span>\nconst<\/span> { PrismaClient } = require<\/span>('@prisma\/client'<\/span>)\nconst<\/span> dotenv = require<\/span>('dotenv'<\/span>)\n\ndotenv.config()\nconst<\/span> db = new<\/span> PrismaClient()\n\nasync<\/span> function<\/span> main<\/span>(<\/span>) <\/span>{\n  console<\/span>.warn('Please define your seed data.'<\/span>)\n\n  await<\/span> db.user.create({\n    data<\/span>: { name<\/span>: 'Kaiya'<\/span>, email<\/span>: 'best@test.com'<\/span>, role<\/span>: 'inventory'<\/span> },\n  })\n\n  await<\/span> db.location.create({\n    data<\/span>: { name<\/span>: 'Compound North'<\/span>, district<\/span>: 1<\/span> },\n  })\n\n  await<\/span> db.item.create({\n    data<\/span>: {\n      name<\/span>: 'Morning Glory'<\/span>,\n      sku<\/span>: 'hf8029ht8942ht8429pht8p942p'<\/span>,\n      locationId<\/span>: 1<\/span>,\n    },\n  })\n}\n\nmain()\n  .catch((e<\/span>) =><\/span> console<\/span>.error(e))\n  .finally(async<\/span> () => {\n    await<\/span> db.$disconnect()\n  })\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With the schema and seed data in place, we\u2019re almost ready to run our first migration. Before we do that, we need to be connected to the database. So in the .env<\/code> file at the root of the project, update the DATABASE_URL<\/code> to match your Postgres instance. It\u2019ll look similar to this.<\/p>\n
DATABASE_URL=postgres:\/\/postgres:admin@localhost:5432\/dashboard<\/code><\/p>\n
Now we\u2019re going to run the migration with:<\/p>\n
yarn rw prisma migrate dev<\/code><\/p>\n
This will prompt you for a migration name, create the database and the tables, and add the seed data. If you look at your database through pgAdmin, you\u2019ll see something like this.<\/p>\n
\"seeded<\/p>\n
Now that you have your database ready to store and send the values we need, let\u2019s move on to our back-end and front-end.<\/p>\n
Adding the back-end and front-end<\/h2>\n
Redwood has one particular command that does a lot of work for us. It will create the entire CRUD for a table from the front-end components and routes to the back-end GraphQL queries, types, and mutations. We\u2019re going to take advantage of that to make most of our dashboard. Let\u2019s start with the following command.<\/p>\n
yarn rw g scaffold user<\/code><\/p>\n
This will generate several pages and components and GraphQL files to handle all of the CRUD actions for the user\u2019s portion of the dashboard. Take a look in web > pages<\/code>. You should see a new directory called User<\/code>. This has all of the pages we need to handle everything about users.<\/p>\n
Now take a look in web > components<\/code>. There will be another User<\/code> folder. This one contains the components we use to interact with the GraphQL server. Most of the data is fetched in these components and requests are sent from these components.<\/p>\n
The web > layouts<\/code> folder will also have a new directory containing a layout file for your User<\/code> pages. This is how you can create styles for a specific set of pages.<\/p>\n
In the Routes.js<\/code> file, you\u2019ll see there is a new set of routes for users wrapped in the UserLayout<\/code>. All of the pages generate also have their routes automatically added to this file inside of their parent layout.<\/p>\n
There were also some new files generated in the api<\/code> directory. If you look inside api > src > graphql<\/code>, you\u2019ll find the GraphQL schema for all the CRUD operations you need and the types have been defined by the model in the schema.prisma<\/code> file.<\/p>\n
Then inside api > src > services<\/code>, you\u2019ll find all of the GraphQL resolvers for the queries and mutations defined in the schema.<\/p>\n
All of these pages, components, types, and resolvers were generated by that one Redwood command. Let\u2019s run the app with yarn rw dev<\/code> so you can see all of this working. If you go to the users<\/code> page in the browser, you should see something similar to this.<\/p>\n
The home page will return a 404 right now because we haven\u2019t added a component for that route. We\u2019ll do that a bit later, but the \/users<\/code> page will still work.<\/strong><\/p>\n
\"users<\/p>\n
You can add a new user, update the current user, or delete the current user with the buttons on the page.<\/p>\n
We\u2019re going to run that scaffold<\/code> command two more times to generate the CRUD for the items and locations.<\/p>\n
yarn rw g scaffold location\nyarn rw g scaffold item\n<\/code><\/span><\/pre>\n
Now we have all of the actions we need for our user dashboard. There are a couple of things we need to do to give this dashboard a more realistic feel. We\u2019ll add a home page and a layout to help us navigate between parts of the dashboard.<\/p>\n
Making the home page<\/h3>\n
Let\u2019s start by adding the styled-components<\/code> package because we\u2019re going to use it to style a few things. First, go to the web<\/code> directory in your terminal. That\u2019s where this package will need to be installed.<\/p>\n
yarn add styled-components<\/code><\/p>\n
Now let\u2019s run one of those magic Redwood commands to generate the home page and its routing.<\/p>\n
yarn rw g page home \/<\/code><\/p>\n
This will create a new directory in web > src > pages<\/code> for the HomePage<\/code> component and it\u2019ll add a new route to Routes.js<\/code>. You can re-run your app here to see the new home page. It\u2019ll look like this in the browser.<\/p>\n
\"new<\/p>\n
Now that we have a home page in place, let\u2019s make a layout that will apply to this and all the other pages we have so far. Of course, there\u2019s a Redwood command to handle that.<\/p>\n
yarn rw g layout home<\/code><\/p>\n
This will create a new folder in web > src > layouts<\/code> for our home page. We\u2019re going to use a few styled components in the HomeLayout<\/code> component to create a side navigation menu and give the dashboard a little definition. We\u2019ll also be using Redwood routing to add links to the other pages in the side navigation.<\/p>\n
import<\/span> { Link, routes } from<\/span> '@redwoodjs\/router'<\/span>\nimport<\/span> styled from<\/span> 'styled-components'<\/span>\n\nconst<\/span> HomeLayout = ({ children }<\/span>) =><\/span> {\n  return<\/span> (\n    <FlexBox<\/span>><\/span>\n      <SideNav<\/span>><\/span>\n        <LinkContainer<\/span>><\/span>\n          <Link<\/span> to<\/span>={routes.users()}<\/span>><\/span>Users<\/Link<\/span>><\/span>\n        <\/LinkContainer<\/span>><\/span>\n        <LinkContainer<\/span>><\/span>\n          <Link<\/span> to<\/span>={routes.locations()}<\/span>><\/span>Locations<\/Link<\/span>><\/span>\n        <\/LinkContainer<\/span>><\/span>\n        <LinkContainer<\/span>><\/span>\n          <Link<\/span> to<\/span>={routes.items()}<\/span>><\/span>Items<\/Link<\/span>><\/span>\n        <\/LinkContainer<\/span>><\/span>\n      <\/SideNav<\/span>><\/span>\n      <FullPage<\/span>><\/span>{children}<\/FullPage<\/span>><\/span>\n    <\/FlexBox<\/span>><\/span><\/span>\n  )\n}\n\nconst<\/span> FlexBox = styled.div`\n  display: flex;\n`<\/span>\n\nconst<\/span> FullPage = styled.div`\n  height: 100vh;\n  width: 100%;\n`<\/span>\n\nconst<\/span> LinkContainer = styled.div`\n  padding: 12px;\n\n  > * {\n    color: #000;\n    font-family: sans-serif;\n    font-size: 18px;\n    text-decoration: none;\n  }\n\n  > *:hover {\n    color: #5b5b5b;\n  }\n`<\/span>\n\nconst<\/span> SideNav = styled.nav`\n  border-right: 1px solid;\n  width: 250px;\n`<\/span>\n\nexport<\/span> default<\/span> HomeLayout\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, we need to apply this layout to all of the pages in our app. We\u2019ll do that in the Routes.js<\/code> file. This means adding a <Set><\/code> component around all of the existing routes like below.<\/p>\n
...\n<Router<\/span>><\/span>\n  <Set<\/span> wrap<\/span>={HomeLayout}<\/span>><\/span>\n    <Route<\/span> path<\/span>=\"\/\"<\/span> page<\/span>={HomePage}<\/span> name<\/span>=\"home\"<\/span> \/><\/span>\n    <Set<\/span> wrap<\/span>={ItemsLayout}<\/span>><\/span>\n      <Route<\/span> path<\/span>=\"\/items\/new\"<\/span> page<\/span>={ItemNewItemPage}<\/span> name<\/span>=\"newItem\"<\/span> \/><\/span>\n      <Route<\/span> path<\/span>=\"\/items\/{id:Int}\/edit\"<\/span> page<\/span>={ItemEditItemPage}<\/span> name<\/span>=\"editItem\"<\/span> \/><\/span>\n      <Route<\/span> path<\/span>=\"\/items\/{id:Int}\"<\/span> page<\/span>={ItemItemPage}<\/span> name<\/span>=\"item\"<\/span> \/><\/span>\n      <Route<\/span> path<\/span>=\"\/items\"<\/span> page<\/span>={ItemItemsPage}<\/span> name<\/span>=\"items\"<\/span> \/><\/span>\n    <\/Set<\/span>><\/span>\n    <Set<\/span> wrap<\/span>={LocationsLayout}<\/span>><\/span>\n      <Route<\/span> path<\/span>=\"\/locations\/new\"<\/span> page<\/span>={LocationNewLocationPage}<\/span> name<\/span>=\"newLocation\"<\/span> \/><\/span>\n      <Route<\/span> path<\/span>=\"\/locations\/{id:Int}\/edit\"<\/span> page<\/span>={LocationEditLocationPage}<\/span> name<\/span>=\"editLocation\"<\/span> \/><\/span>\n      <Route<\/span> path<\/span>=\"\/locations\/{id:Int}\"<\/span> page<\/span>={LocationLocationPage}<\/span> name<\/span>=\"location\"<\/span> \/><\/span>\n      <Route<\/span> path<\/span>=\"\/locations\"<\/span> page<\/span>={LocationLocationsPage}<\/span> name<\/span>=\"locations\"<\/span> \/><\/span>\n    <\/Set<\/span>><\/span>\n    <Set<\/span> wrap<\/span>={UsersLayout}<\/span>><\/span>\n      <Route<\/span> path<\/span>=\"\/users\/new\"<\/span> page<\/span>={UserNewUserPage}<\/span> name<\/span>=\"newUser\"<\/span> \/><\/span>\n      <Route<\/span> path<\/span>=\"\/users\/{id:Int}\/edit\"<\/span> page<\/span>={UserEditUserPage}<\/span> name<\/span>=\"editUser\"<\/span> \/><\/span>\n      <Route<\/span> path<\/span>=\"\/users\/{id:Int}\"<\/span> page<\/span>={UserUserPage}<\/span> name<\/span>=\"user\"<\/span> \/><\/span>\n      <Route<\/span> path<\/span>=\"\/users\"<\/span> page<\/span>={UserUsersPage}<\/span> name<\/span>=\"users\"<\/span> \/><\/span>\n    <\/Set<\/span>><\/span>\n    <Route<\/span> notfound<\/span> page<\/span>={NotFoundPage}<\/span> \/><\/span>\n  <\/Set<\/span>><\/span>\n<\/Router<\/span>><\/span>\n...\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Now if you run yarn rw dev<\/code>, you\u2019ll see something like this.<\/p>\n
\"dashboard<\/p>\n
If you go any of the links in the side navigation, you\u2019ll see something like this.<\/p>\n
\"users<\/p>\n
I\u2019ll leave the extra styling to you. Styling this could be a completely separate tutorial!<\/p>\n
This might feel like a cliffhanger since we didn\u2019t actually write much code, but that\u2019s what I like about Redwood. You can get big apps up and running quickly and things just work.<\/p>\n
Finished code<\/h2>\n
You can check out the front-end without the connection to the back-end here on this Code Sandbox<\/a>.<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
If you want all of the code for the front-end and back-end, check out the redwood-user-dashboard<\/code> in this Git repo<\/a>!<\/p>\n
Conclusion<\/h2>\n
Dashboards are a major part of many apps so it\u2019s helpful to know how to create one quickly. Redwood is a framework that will help you get started with advanced projects like these and it makes it fast to generate complex structures.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27986,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[379,134,370,177,246,371],"class_list":["post-27985","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-graphql","tag-guest-post","tag-image","tag-javascript","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nBuilding a User Dashboard with Redwood<\/title>\n<meta name=\"description\" content=\"Dashboards are a common part of many apps, but they are so complex with the amount of data they handle. We're going to use Redwood to make a user dashboard with a database, back-end, and front-end all connected.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a User Dashboard with Redwood\" \/>\n<meta property=\"og:description\" content=\"Dashboards are a common part of many apps, but they are so complex with the amount of data they handle. We're going to use Redwood to make a user dashboard with a database, back-end, and front-end all connected.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-21T19:24:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925761\/Web_Assets\/blog\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"3048\" \/>\n\t<meta property=\"og:image:height\" content=\"2024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Building a User Dashboard with Redwood\",\"datePublished\":\"2022-03-21T19:24:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925761\/Web_Assets\/blog\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a.jpg?_i=AA\",\"keywords\":[\"GraphQL\",\"Guest Post\",\"Image\",\"Javascript\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/\",\"name\":\"Building a User Dashboard with Redwood\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925761\/Web_Assets\/blog\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a.jpg?_i=AA\",\"datePublished\":\"2022-03-21T19:24:47+00:00\",\"description\":\"Dashboards are a common part of many apps, but they are so complex with the amount of data they handle. We're going to use Redwood to make a user dashboard with a database, back-end, and front-end all connected.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925761\/Web_Assets\/blog\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925761\/Web_Assets\/blog\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a.jpg?_i=AA\",\"width\":3048,\"height\":2024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a User Dashboard with Redwood\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building a User Dashboard with Redwood","description":"Dashboards are a common part of many apps, but they are so complex with the amount of data they handle. We're going to use Redwood to make a user dashboard with a database, back-end, and front-end all connected.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/","og_locale":"en_US","og_type":"article","og_title":"Building a User Dashboard with Redwood","og_description":"Dashboards are a common part of many apps, but they are so complex with the amount of data they handle. We're going to use Redwood to make a user dashboard with a database, back-end, and front-end all connected.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-21T19:24:47+00:00","og_image":[{"width":3048,"height":2024,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925761\/Web_Assets\/blog\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/"},"author":{"name":"","@id":""},"headline":"Building a User Dashboard with Redwood","datePublished":"2022-03-21T19:24:47+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925761\/Web_Assets\/blog\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a.jpg?_i=AA","keywords":["GraphQL","Guest Post","Image","Javascript","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/","name":"Building a User Dashboard with Redwood","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925761\/Web_Assets\/blog\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a.jpg?_i=AA","datePublished":"2022-03-21T19:24:47+00:00","description":"Dashboards are a common part of many apps, but they are so complex with the amount of data they handle. We're going to use Redwood to make a user dashboard with a database, back-end, and front-end all connected.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925761\/Web_Assets\/blog\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925761\/Web_Assets\/blog\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a.jpg?_i=AA","width":3048,"height":2024},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-user-dashboard-with-redwood\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a User Dashboard with Redwood"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925761\/Web_Assets\/blog\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a\/49a52956b72264aff565db19c3f364eeee90e0a9-3048x2024-1_279867a09a.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27985"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27985\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27986"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
If you don\u2019t have a local Postgres instance to work with, you can download it here<\/a> pretty quickly.<\/p>\n