• Generate create, index and show routes for one resource
• Use strong params to create a new resource

In this lab, we'll be building an API for a plant store! In addition to our usual Rails code, there is code for a React frontend application in the client directory.

The code for the frontend application is done. Your job is to create the Rails API so that the fetch requests on the frontend work successfully.

The React application is in the client directory. To set it up, from the root directory, run:

$ npm install --prefix client

Using --prefix client will run the npm command within the client directory.

To set up your backend, run:

$ bundle install

To see how the React application and Rails API are interacting, you can run both the Rails application and the React application together by running:

$ rails start

This will run a Rake task that will start both the Rails app and the React app. You must use rails start (not rails s) to start both applications together!

• React: http://localhost:4000
• Rails: http://localhost:3000

Take a look through the components in the client/src/components/ folder to get a feel for what our app does. Note that the fetch requests in the frontend (in NewPlantForm and PlantPage) don't include the backend domain:

fetch("/plants");
// instead of fetch("http://localhost:3000/plants")

This is because we are proxying these requests to our API.

Create a Plant model that matches this specification:

If you use a Rails generator, don't forget to pass the --no-test-framework argument!

After creating the Plant model, you can run rails db:migrate db:seed to run your migration and add some sample data to your database.

Check your progress by running rails c and verifying that the plants were created successfully!

Your API should have the following routes as well as the associated controller actions that return the appropriate JSON data:

GET /plants


Response Body
-------
[
  {
    "id": 1,
    "name": "Aloe",
    "image": "./images/aloe.jpg",
    "price": 11.50
  },
  {
    "id": 2,
    "name": "ZZ Plant",
    "image": "./images/zz-plant.jpg",
    "price": 25.98
  }
]

GET /plants/:id


Response Body
------
{
  "id": 1,
  "name": "Aloe",
  "image": "./images/aloe.jpg",
  "price": 11.50
}

In your controller's create action, use strong params when creating the new Plant object.

POST /plants


Headers
-------
Content-Type: application/json


Request Body
------
{
  "name": "Aloe",
  "image": "./images/aloe.jpg",
  "price": 11.50
}


Response Body
-------
{
  "id": 1,
  "name": "Aloe",
  "image": "./images/aloe.jpg",
  "price": 11.50
}

Once all the tests are passing, start up the React app (using rails start) and explore the functionality to see how the routes you created are being used.