{"id":28044,"date":"2022-03-21T19:25:20","date_gmt":"2022-03-21T19:25:20","guid":{"rendered":"http:\/\/Building-a-Yoga-Pose-App-in-Redwood"},"modified":"2022-03-21T19:25:20","modified_gmt":"2022-03-21T19:25:20","slug":"building-a-yoga-pose-app-in-redwood","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/","title":{"rendered":"Building a Yoga Pose App in Redwood"},"content":{"rendered":"

One of the best exercises you can do is yoga because it helps you work on both strength and flexibility while you practice. You don\u2019t have to be great at it to get the benefits, but having the correct posture for your poses at every level is important. Also, finding poses that you like and can ease into can lead you all over the place.<\/p>\n

That\u2019s why we\u2019re going to build an app that lets us upload our favorite yoga poses to Cloudinary so we can compare ourselves to the proper form. I know that it sounds cringy to compare yourself to the correct form, but it\u2019s a really good way to see where you need to improve quickly.<\/p>\n

Set up the tools<\/h2>\n

We need to get a few tools in place before we start on the code. First up is the local Postgres instance we\u2019ll work with. You can download it here<\/a>. This is a SQL database that\u2019s commonly used in production apps so it\u2019ll help to have a little experience with it.<\/p>\n

Next, you\u2019ll need to create a Cloudinary account<\/a> to store the yoga pose images and use them in your app. You could<\/em> use something like S3 buckets to host your images, but it\u2019s not as straightforward.<\/p>\n

Now we\u2019re at the fun part. We can finally make the Redwood app and start writing some code. To bootstrap the app, open a terminal and run the following command.<\/p>\n

$ yarn create redwood-app --typescript yoga-pose-recommender\n<\/code><\/span><\/pre>\n
This creates a completely functional, full-stack app with TypeScript and Prisma<\/a> as its database ORM. You\u2019ll find the front-end React code in the web<\/code> directory and the back-end GraphQL server in the api<\/code> directory. If you start up the app with the following command, you\u2019ll be able to see the front-end and back-end of the app running.<\/p>\n
$ yarn redwood dev\n<\/code><\/span><\/pre>\n
Since you\u2019ve seen that the app is running, all we need to do is add the code for our pose purposes. We\u2019ll start by connecting the app to our local Postgres instance.<\/p>\n
Connecting to the database<\/h2>\n
The Redwood app needs the connection string to Postgres so it knows where to send the data we\u2019re working with. Look in the root of your project and open the .env<\/code> file. This is where environment variables are stored and these typically change across the different environments you deploy your apps to.<\/p>\n
Go ahead and uncomment the DATABASE_URL<\/code> line and update the value to your connection string. An important thing to note is that you don\u2019t have to create the table we\u2019re going to use. When we do the database migration, the table will be automatically created. So that string could look like this, where yoga_poses<\/code> is the table name.<\/p>\n
DATABASE_URL=postgres:\/\/admin:postgres@localhost:5432\/yoga_poses\n<\/code><\/pre>\n
With this value in place, we can turn our attention to the other folders and files in this app.<\/p>\n
Updating the database schema<\/h3>\n
Go to api > db<\/code> and open the schema.prisma<\/code> file. This is where we define the schema we want to migrate to the database. The first line of code we need to update is the provider<\/code>. Change that value from sqlite<\/code> to postgresql<\/code>. You can see where that environment variable with our connection string is being used here.<\/p>\n
Next, go ahead and delete the example model and replace it with this.<\/p>\n
model Pose {\n  id        Int     @id @default<\/span>(autoincrement())\n  name      String<\/span>\n  url       String<\/span>\n  you_url   String<\/span>\n  category  String<\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This defines the table schema that the app will use. The URL values will come from Cloudinary uploads and the category will come from a dropdown on the front-end. We\u2019re finished with this file so let\u2019s actually seed our database with one initial row.<\/p>\n
Seeding the database<\/h3>\n
Go out to the root of the project and look in the scripts<\/code> folder. Open the seed.ts<\/code> file. This is where we\u2019ll define the data for that one row. Upload a yoga pose you like and then a picture of your attempt to Cloudinary. We\u2019ll need those URLs for the seed data.<\/p>\n
There\u2019s a lot to sift through in this boilerplate code, so just delete everything out and paste this in.<\/p>\n
import<\/span> type { Prisma } from<\/span> '@prisma\/client'<\/span>\nimport<\/span> { db } from<\/span> 'api\/src\/lib\/db'<\/span>\n\nexport<\/span> default<\/span> async<\/span> () => {\n  try<\/span> {\n    const<\/span> data: Prisma.PoseCreateInput['data'<\/span>][] = [\n      { name<\/span>: 'tree-pose'<\/span>, url<\/span>: 'link_to_tree_pose_png'<\/span>, you_url<\/span>: 'link_to_your_tree_pose_png'<\/span>, category<\/span>: 'upright'<\/span>},\n    ]\n\n    Promise<\/span>.all(\n      data.map(async<\/span> (data: Prisma.PoseCreateInput['data'<\/span>]) => {\n        const<\/span> record = await<\/span> db.pose.create({ data })\n        console<\/span>.log(record)\n      })\n    )\n  } catch<\/span> (error) {\n    console<\/span>.warn('Please define your seed data.'<\/span>)\n    console<\/span>.error(error)\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Note that you\u2019ll need to update the values for url<\/code> and you_url<\/code> in the data<\/code> array. That\u2019s all you\u2019ll need to do in order to create the initial record. This data<\/code> array is then passed into a promise that executes the create transaction on the database.<\/p>\n
This is a good place to run a database migration to get all of the schema changes in place and to seed the table. Redwood has a command that lets us run migrations quickly. Open your terminal and run the following command.<\/p>\n
$ yarn redwood prisma migrate dev\n<\/code><\/span><\/pre>\n
You\u2019ll be prompted to enter a name for the migration and then it will run. Check out your local Postgres database to see that seeded data! That\u2019s all for the database side of things. Now let\u2019s see how fast we can spin up the back-end with Redwood.<\/p>\n
Creating the GraphQL server<\/h2>\n
There are a lot of commands that do some heavy lifting for us. We\u2019re going to create the CRUD for our back-end with just one command. Run this in your terminal at the root of the project.<\/p>\n
$ yarn redwood generate sdl --crud pose\n<\/code><\/span><\/pre>\n
Now take a look in api > src > graphql<\/code> and you\u2019ll see a new sdl<\/code> file. This has all of the types for the queries and mutations we need for our GraphQL server. Now head over to api > src > services > poses<\/code> and you see several files. The main one is poses.ts<\/code> and it has all of the queries and mutations that we need to get started.<\/p>\n
While we have a great base to build on, there\u2019s still one more mutation we need to add. We need the ability to recommend similar poses based on the category a user selects.<\/p>\n
Building recommender query<\/h3>\n
We need to define the type for this new query so let start there. Go to api > src > graphql<\/code> and open the poses.sdl.ts<\/code> file. You\u2019ll see an object named type Query<\/code> and this is where we\u2019ll add the following code below the existing queries.<\/p>\n
getPosesByCategory<\/span>(category<\/span>: String<\/span>!): [Pose!]<\/span>! @requireAuth<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
This lets the server and the client know that a category<\/code> value is expected in the request and an array of pose data can be expected in the response. Now we need to write the actual mutation that retrieves the data and passes it to the front-end.<\/p>\n
Open that poses.ts<\/code> file we mentioned above. This is where we\u2019ll add our category recommender query. You can drop the following code right below the pose<\/code> query.<\/p>\n
export<\/span> const<\/span> getPosesByCategory = ({ category }<\/span>) =><\/span> {\n  return<\/span> db.pose.findMany({\n    where<\/span>: { category },\n  })\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
That\u2019s all for our extra resolver! Now we can turn our attention to the front-end and build the user interface.<\/p>\n
Moving to the client-side<\/h2>\n
We\u2019ll be making a relatively barebones front-end in regards to styles, so if you want to play with your CSS skills this will give you a good project to expand on.<\/p>\n
First, let\u2019s install the Cloudinary upload widget package to handle image inputs. So open your terminal and go to the web<\/code> directory and add these packages with the following command.<\/p>\n
$ yarn add react-cloudinary-upload-widget axios\n<\/code><\/span><\/pre>\n
This is a good time for us to use some of the Redwood functionality we have available. Open your terminal and go to the root of the project and run the following command.<\/p>\n
$ yarn redwood generate page pose\n<\/code><\/span><\/pre>\n
This will create a new page and route for how we upload and display the yoga poses we have to work with. Take a look in web > src > pages > PosePage<\/code>. You\u2019ll see three files, one of them is for tests and the other is a Storybook document. Then there\u2019s the main one we\u2019ll be working with, PosePage.tsx<\/code>. So open up this file and modify it to look like this.<\/p>\n
import<\/span> { MetaTags } from<\/span> '@redwoodjs\/web'<\/span>\n\nconst<\/span> PosePage = ()<\/span> =><\/span> {\n  return<\/span> (\n    <><\/span>\n      <MetaTags<\/span> title<\/span>=\"Pose\"<\/span> description<\/span>=\"Pose page\"<\/span> \/><\/span>\n    <\/><\/span><\/span>\n  )\n}\n\nexport<\/span> default<\/span> PosePage\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019ll add to this component as we build out the functionality. Let\u2019s start with the image uploader.<\/p>\n
Adding the definitions for the GraphQL server<\/h3>\n
Now we can get to some of the fun stuff. Let\u2019s start by adding a few imports. This will cover all of the imports that we need for the rest of the app.<\/p>\n
import<\/span> { MetaTags, useMutation, useQuery } from<\/span> '@redwoodjs\/web'<\/span>\nimport<\/span> { useState } from<\/span> 'react'<\/span>\nimport<\/span> { WidgetLoader, Widget } from<\/span> 'react-cloudinary-upload-widget'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We need a definition for creating a new pose record so that we can access the GraphQL mutation. We\u2019ll add this right below our import statements.<\/p>\n
const<\/span> CREATE_POSE_MUTATION = gql`\n  mutation CreatePoseMutation($input: CreatePoseInput!) {\n    createPose(input: $input) {\n      name\n    }\n  }\n`\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
This uses the GraphQL query language so that we can specify what we send to the server and the data we expect back. With some slight modification, you could also run this mutation in the GraphQL playground. We\u2019ll also need a definition to query the poses by category. Add this right below the previous definition.<\/p>\n
const<\/span> GET_POSES_BY_CATEGORY = gql`\n  query GetPosesByCategory($category: String!) {\n    getPosesByCategory(category: $category) {\n      category\n      name\n      url\n      you_url\n    }\n  }\n`\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
This query will pass the category to the server and then return all of the info for all of the matching pose records. Then we need to add a few variables and methods just inside of the PosePage<\/code> component.<\/p>\n
const<\/span> [category, setCategory] = useState<string>(\"upright\"<\/span>)\nconst<\/span> [name, setName] = useState<string>(\"tree\"<\/span>)\nconst<\/span> { data, loading } = useQuery(GET_POSES_BY_CATEGORY, {\n  variables<\/span>: { category }\n})\nconst<\/span> [createPose] = useMutation(CREATE_POSE_MUTATION)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We set a few states to some default values and we use a couple of hooks to get the data from our pose query and to make the method we\u2019ll use to upload new pose records. Now we can start adding some stuff to the page that users can interact with.<\/p>\n
Uploading new images and creating new records<\/h3>\n
Let\u2019s add the upload widget along with a couple of input fields to the return statement. So your code should look like this.<\/p>\n
return<\/span> (\n  <><\/span>\n    <MetaTags<\/span> title<\/span>=\"Pose\"<\/span> description<\/span>=\"Pose page\"<\/span> \/><\/span>\n    <div<\/span>><\/span>\n      <label<\/span> htmlFor<\/span>=\"name\"<\/span>><\/span>Name of the pose:<\/label<\/span>><\/span>\n      <input<\/span> name<\/span>=\"name\"<\/span> type<\/span>=\"text\"<\/span> onChange<\/span>={e<\/span> =><\/span> setName(e.currentTarget.value)} \/>\n    <\/div<\/span>><\/span>\n    <div<\/span>><\/span>\n      <label<\/span> htmlFor<\/span>=\"category\"<\/span>><\/span>Category of the pose:<\/label<\/span>><\/span>\n      <select<\/span> name<\/span>=\"category\"<\/span> onChange<\/span>={e<\/span> =><\/span> setCategory(e.currentTarget.value)}>\n        <option<\/span> value<\/span>=\"upright\"<\/span>><\/span>Upright<\/option<\/span>><\/span>\n        <option<\/span> value<\/span>=\"laying\"<\/span>><\/span>Laying<\/option<\/span>><\/span>\n        <option<\/span> value<\/span>=\"side\"<\/span>><\/span>Side<\/option<\/span>><\/span>\n        <option<\/span> value<\/span>=\"back\"<\/span>><\/span>Back<\/option<\/span>><\/span>\n        <option<\/span> value<\/span>=\"arms\"<\/span>><\/span>Arms<\/option<\/span>><\/span>\n      <\/select<\/span>><\/span>\n    <\/div<\/span>><\/span>\n    <WidgetLoader<\/span> \/><\/span>\n    <Widget<\/span>\n      sources<\/span>={[<\/span>'local<\/span>', 'camera<\/span>']}\n      cloudName<\/span>={<\/span>`${cloudName<\/span>}`}\n      uploadPreset<\/span>={<\/span>`${uploadPreset<\/span>}`}\n      buttonText<\/span>={<\/span>'Add<\/span> Pose<\/span> Images<\/span>'}\n      multiple<\/span>={true}<\/span>\n      cropping<\/span>={false}<\/span>\n      folder<\/span>={<\/span>'yoga_poses<\/span>'}\n      style<\/span>={{<\/span>\n        color:<\/span> 'white<\/span>',\n        border:<\/span> 'none<\/span>',\n        width:<\/span> '120px<\/span>',\n        backgroundColor:<\/span> 'green<\/span>',\n        borderRadius:<\/span> '4px<\/span>',\n        height:<\/span> '25px<\/span>',\n      }}\n      onSuccess<\/span>={uploadImagesFn}<\/span>\n    \/><\/span>\n  <\/><\/span><\/span>\n)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Even though there is a decent amount of code here, nothing too crazy is happening. We have a couple of <div><\/code> elements that hold the name and category inputs. These inputs update their respective state whenever there is a change in their value. The <select><\/code> gives users a set number of categories they can choose from.<\/p>\n
The <Widget><\/code> element has some props on it that let us interact with Cloudinary. You\u2019ll need to insert your account values for the cloudName<\/code> and uploadPreset<\/code> values. One interesting thing to note is that in order to upload multiple images, we have to disable the cropping feature. Then the onSuccess<\/code> prop has a function we need to make so that when we\u2019re done adding our images, it saves the record to the database.<\/p>\n
We\u2019ll add the uploadImageFn<\/code> just below the createPose<\/code> method we created earlier.<\/p>\n
function<\/span> uploadImagesFn<\/span>(res: CloudinaryResult<\/span>) <\/span>{\n  const<\/span> input = {\n    category<\/span>: category,\n    name<\/span>: name,\n    url<\/span>: res.info?.url,\n    you_url<\/span>: res.info?.url\n  }\n\n  createPose({ variables<\/span>: { input } })\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This function creates an input<\/code> variable that collects all of the values we need and then it calls the createPose<\/code> method to add the record to the table.<\/p>\n
Displaying the images<\/h3>\n
Now we can finish up by displaying the images on the page by the category a user selects. In the query where we get our data<\/code>, there\u2019s also the loading<\/code> value. This tells us whether the data is still loading from the database or not. We\u2019ll use this to render a loading element to prevent the app from crashing when the data isn\u2019t available yet. Add this code right after the uploadImagesFn<\/code> function.<\/p>\n
if (loading) {\n  <div<\/span>><\/span>loading...<\/div<\/span>><\/span>\n}\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Now all that\u2019s left is rendering the images! Add the following code below the <Widget><\/code> component.<\/p>\n
<div<\/span> style<\/span>={{<\/span> display:<\/span> 'block<\/span>' }}><\/span>\n  {data?.getPosesByCategory &&\n    data.getPosesByCategory.map(image => (\n      <><\/span>\n        <h2<\/span>><\/span>{image.name}<\/h2<\/span>><\/span>\n        <h3<\/span>><\/span>{image.category}<\/h3<\/span>><\/span>\n        <img<\/span>\n          key<\/span>={<\/span>`${image.name<\/span>}_orig<\/span>`}\n          style<\/span>={{<\/span> height:<\/span> '500px<\/span>', marginRight:<\/span> '25px<\/span>', width:<\/span> '500px<\/span>' }}\n          src<\/span>={<\/span>`${image.url<\/span>}`}\n        \/><\/span>\n        <img<\/span>\n          key<\/span>={image.name}<\/span>\n          style<\/span>={{<\/span> height:<\/span> '500px<\/span>', width:<\/span> '500px<\/span>' }}\n          src<\/span>={<\/span>`${image.you_url<\/span>}`}\n        \/><\/span>\n      <\/><\/span>\n    ))\n  }\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
This does a quick check to make sure we have data and then it iterates through each pose record and renders the images on the page. When you run your app with yarn redwood dev<\/code>, you should see something like this.<\/p>\n
\"upload<\/p>\n
That\u2019s it! Now whenever you\u2019re in the mood to work on some yoga poses, you can check out the correct posture, compare it to your own, and start slowly improving.<\/p>\n
Finished code<\/h2>\n
You can check out the complete code in the yoga-pose-recommender<\/code> folder of this repo<\/a>. You can also check out the front-end in this Code Sandbox<\/a>.<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
Conclusion<\/h2>\n
Sometimes there aren\u2019t apps out there that you really like or you just don\u2019t want them to have your data. It\u2019s ok to make a quick little app that focuses on exactly what you need. That way you get to practice your coding and<\/em> you get to exercise!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28045,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,246,371],"class_list":["post-28044","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nBuilding a Yoga Pose App in Redwood<\/title>\n<meta name=\"description\" content=\"Sometimes you want to mix fitness progress with coding. While you might not run out and buy a Peloton, you might want to improve on some home exercises. Why not build an app to help you improve on the form of your yoga poses?\" \/>\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-yoga-pose-app-in-redwood\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Yoga Pose App in Redwood\" \/>\n<meta property=\"og:description\" content=\"Sometimes you want to mix fitness progress with coding. While you might not run out and buy a Peloton, you might want to improve on some home exercises. Why not build an app to help you improve on the form of your yoga poses?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-21T19:25:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925574\/Web_Assets\/blog\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"6192\" \/>\n\t<meta property=\"og:image:height\" content=\"4128\" \/>\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-yoga-pose-app-in-redwood\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Building a Yoga Pose App in Redwood\",\"datePublished\":\"2022-03-21T19:25:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925574\/Web_Assets\/blog\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"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-yoga-pose-app-in-redwood\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/\",\"name\":\"Building a Yoga Pose App in Redwood\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925574\/Web_Assets\/blog\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e.jpg?_i=AA\",\"datePublished\":\"2022-03-21T19:25:20+00:00\",\"description\":\"Sometimes you want to mix fitness progress with coding. While you might not run out and buy a Peloton, you might want to improve on some home exercises. Why not build an app to help you improve on the form of your yoga poses?\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925574\/Web_Assets\/blog\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925574\/Web_Assets\/blog\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e.jpg?_i=AA\",\"width\":6192,\"height\":4128},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Yoga Pose App in 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 Yoga Pose App in Redwood","description":"Sometimes you want to mix fitness progress with coding. While you might not run out and buy a Peloton, you might want to improve on some home exercises. Why not build an app to help you improve on the form of your yoga poses?","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-yoga-pose-app-in-redwood\/","og_locale":"en_US","og_type":"article","og_title":"Building a Yoga Pose App in Redwood","og_description":"Sometimes you want to mix fitness progress with coding. While you might not run out and buy a Peloton, you might want to improve on some home exercises. Why not build an app to help you improve on the form of your yoga poses?","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-21T19:25:20+00:00","og_image":[{"width":6192,"height":4128,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925574\/Web_Assets\/blog\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e.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-yoga-pose-app-in-redwood\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/"},"author":{"name":"","@id":""},"headline":"Building a Yoga Pose App in Redwood","datePublished":"2022-03-21T19:25:20+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925574\/Web_Assets\/blog\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e.jpg?_i=AA","keywords":["Guest Post","Image","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-yoga-pose-app-in-redwood\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/","name":"Building a Yoga Pose App in Redwood","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925574\/Web_Assets\/blog\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e.jpg?_i=AA","datePublished":"2022-03-21T19:25:20+00:00","description":"Sometimes you want to mix fitness progress with coding. While you might not run out and buy a Peloton, you might want to improve on some home exercises. Why not build an app to help you improve on the form of your yoga poses?","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925574\/Web_Assets\/blog\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925574\/Web_Assets\/blog\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e.jpg?_i=AA","width":6192,"height":4128},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-yoga-pose-app-in-redwood\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a Yoga Pose App in 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\/v1681925574\/Web_Assets\/blog\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e\/357e52054a3ecf26b7abf85b1e5ee4cbaafcef8a-6192x4128-1_280454460e.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28044","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=28044"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28044\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28045"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}