Building Full stack application
By: Ishwor Prajapati
Tags: Phase 3 Project, Flatiron School, Amazon, Ruby, Software Development

Building Full stack application

Another Phase to the journey in learning software development has completed. Learned more about building backend and create our own API implementing Ruby , Active Record and Rack.

This phase was more challenging as we have to build our own API and fetch that API to our frontend using react. We are required to have certain MVP to pass phase 3. We must access a sqlite3 database using ActiveRecord. We should have a minimum of two models with a one to many relationship. We should build out a simple react frontend to give our user 3 of the 4 CURD abilities for at least one of our resources. For example a user should be able to create a new todo, see all todos, update a todo item, and deleted a todo.

After having knowledge of MVP needed for the project. The first thing I did was to plan which relationship I will be working. I planned to build an application where a restaurant will have many food items and food items belongs to restaurants. Where a user can find a restaurants nearby them by searching by location or food name.

gif image of my phase 3 project app

After having my models with one to many relationship. I have to plan what properties will my models have. I wireframe the properties of my models and relationship to each other on white board. The next step was to start working on my backend. I created tables restaurants and food_items using rake db:create_migration NAME=mytablename. After migrating my both tables , my schema file looks like this:

schema file after creating my tables through migration

The next step for my application was creating models. I created two models with one to many relationship.

Restaurant model with one to many relationship

food model with one to many relationship

After having my tables and my models I set up some configuration required for my project.

database.yml file

environment.rb file

rake file

config.ru file

After setting up basic configuration I added some seed data to my seed.rb file to seed my data base. Now its time to add some logic to application.rb file to implement restful routes to my database. I implemented full CURD to my resources. I tested my all routes before building my frontend.

All my backend is working well so now it was time to build my front end using react. The first thing I planned before creating my react app was component structure. Then I created new react app using create-react-app. The implementation for frontend was similar to my phase 2 project. The only difference was in this phase I am using my own API I built. I fetched API I build using Rack.

Fetch API for my restaurant model

After getting my data from my backend I worked on building CURD for my restaurant resource. I used DELETE method to delete restaurant from my frontend and as well as my backend. Similarly I implemented POST method to create new restaurant to my frontend and backend. Also I implement PATCH method to update restaurants if there is any change to restaurants. After MVP done to my one of the resource. I worked on to my another resource to implement CURD which is our stretch goal for the project. I implemented full CURD to my second resource as I did to my first resource.