Hello! Today, I am going to present my most recent boot camp project; a full stack application of various EDM shows/concerts. I am using ReactJS to write my frontend, and for my backend I am using Ruby Sinatra. My objective for this project is to focus on my backend in order to familiarize myself with the workflow and mastering the fundamentals of Ruby. So in this blog, I will provide detail on how I made the API itself and briefly explain how I setup my frontend to make network requests to my servers endpoints.
Here is a link to the repositories:
- Frontend : https://github.com/fusion407/sinatra-react-project-frontend
- Backend : https://github.com/fusion407/sinatra-react-project-backend
Go ahead and take a quick look at it and see how it works.
Let me start by showing a diagram of the structure of my database, discussing the associations, and how I setup my routes.
Here is my SQL diagram:
As you can see, I have 4 models in my schema.
My ‘fullsets’ model has a “has many to one” relationship to “artists, events, and locations.”
Artists, events, and locations have “has many to has many '' relationships to each other through ‘fullsets’.
So each “fullset” belongs to an artist, event, and location.
In order to write my associations, I am using Active Record, an extension of Sinatra.
Models:
- fullset.rb:
- artist.rb:
- event.rb:
- location.rb:
Here is an example of the schema for my fullset model:
In addition to the artist/event/location ID points, ‘fullset’ also has a title, video_link, and rating. The artist, event, and location models only contain their respected ID and name.
Now to show you my application controller so you can see how my routes are written.
First off, I have my fullsets model setup with full CRUD.
GET and POST requests being sent to “.../fullsets”, and PATCH and DELETE requests sent to “.../fullsets/:id” with the id parameter being the specific “fullset” item that exists in the database.
My artist, event, and location models have a GET and POST route sent out to “.../artists”, “.../events”, and “.../locations”. I also have written DELETE routes but only use it through postman; it is currently not attached to the application.
Now that there is an understanding of how my backend works, let me give you a brief introduction to my application and how I am using my frontend to make fetch requests to my server.
I’ll start with my ‘App.js’ component:
Here, I am importing all my needed components, including the useState and useEffect hook. I will use these hooks to create some states and hold data for fullsets, artists, events, and locations, that are all loaded up with 4 separate GET requests to each endpoint on the initial rendering of the application.
App.js has 3 child components that take utilize the backends endpoints, Search, AddSet, and Edit
fullSetData is passed down to my Search component as a prop to make cards that display the data for each element in ‘fullsets’. Each one of these cards also has an edit and delete button.
If the user clicks delete, a fetch request is made with the id of the selected item and the item is simply deleted from the database and saves the new state for fullSetData.
(Search.js)
If the user clicks edit, the Edit component is rendered with a form that is matching the API’s schema and default values set to the values of the selected item. Upon submission of this form the PATCH requests are made to update the database with its new values.
(EditSet.js)
Finally, we have my AddSet component. AddSet has 2 child components, AddSetDropdowns and AddSetForm. The data fetched from artist, event, and location is used to display a list of each item in AddSetDropdowns. The user must select an item from the dropdown, which will assign the form's value its ID. If there is data that is absent and the user is looking for an artist that doesn’t exist yet in the database, there is another form that makes a POST request and adds a new artist to the database that can then be selected.
The user is then asked to input a title, video link, and rating. On submission, a POST request is made using the provided forms values, adding a new ‘fullsets’ item to the database and setting fullSetData’s new state.
That is pretty much it, my first full stack application. I hope this post finds itself useful to someone (including my future self). Thank you for taking the time to read, happy coding!
Top comments (0)