We were tasked with creating a single page Application using a Rails API backend with a Vanilla Javascript frontend. For my project , I decided to build a app called PlantScape where users/plant moms like myself are able to post their plants along with their care and is also able to view or comment on other plants.

Generating a New Rails API:

To begin creating my Rails application, I first needed to generate a New Rails API: rails new plant-api --api --database=postgresql.
The --api flag is specified so rails knows to set it up as an API , and the --database=postgresql flag will ensure that your app uses postgres for the database rather than the default sqlite3 , if one plans to deploy to heroku.

Upon generating my new rails project, I navigated to my gemfile and uncomment gem 'rack-cors', which will allow Cross Origin Resource Sharing in my API.

I also went ahead an added the active_model_serializers gem which converts data into a format which can be easily transferred, as well as the 'faker' gem which generates random data in many different categories.

Connecting My Frontend:

My App is structured such that the frontend(Javascript)sends a get fetch request to my backend(Rails Api) hosted on http://localhost:3000/plants which returns a Json data response to my frontend.

getPlants = () => fetch(this.api + "/plants).then(res => res.json())

Conclusion:

Most challenging for me was structuring a delete method in order to delete a specific plant by its URI. All in all, I'm very happy with the way my application turned out. I hope to build onto it in the future and eventually add more functionality.

Thank you for reading and Happy Coding!😄