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.
Top comments (0)