With four weeks of GA’s Web Development Immersive under my belt, it came time to embark on my first official Rails project. I knew I wanted to build something that leveraged a publicly accessible API and a map. Fortunately, I stumbled upon Code.org and their awesome Local School Database API. After some brainstorming, I wanted Learncode to achieve the following:
– Inspire visitors to learn to code
– Help those visitors find relevant self-study information
– Display all the physical schools where one could learn to code
For my MVP, I focused on implementing the following features:
– Access Code.org’s Local Schools Database
– Install Leaflet maps
– Add map markers using address-to-Lat/Long conversion with Google Maps
– Embed school data in a map marker popup
– Add search-by-address functionality to move the map to the entered address
– Create an aesthetically pleasing UI
I was able to move quickly with implementing many of the MVP features, but encountered a few challenges that required some creative problem solving and help from my instructors to overcome.
The Local Schools Database was temporarily down meaning I could not access the JSON schools data with a simple Ajax request.
Solution: Developed a Nokogiri rake task to scrape a data sample for a handful of cities as a proof of concept for the MVP. With the sample data in my database, I developed a second rake task to convert each school’s address to lat/long and stored that in the Database. I later implemented the Rails Geocoder Gem for this.
Solution: Implemented an Ajax request to pull in the markers from the Database and render them on the page. To do so, I created an API using a respond_to query in my Rails controller. I’ve included the ruby code snippet below.
Ruby on Rails Controller Index Function:
#Select all offline schools from Database and assign to variable
offline_schools = OfflineSchool.all
#API to render data accesible via an AJAX request
respond_to do |format|
lat = params[:lat]
lng = params[:lng]
render json: OfflineSchool.near([lat, lng], 50, :order => :distance)
After the MVP was complete, I spent time improving the front-end, while implementing a few more controllers and views with relevant content to inspire users to learn code and help them find self-study resources.
Looking back, building my first real website from scratch was an incredibly rewarding experience. I challenged myself to learn new things while leveraging everything I had learned in the previous 4 weeks at General Assembly. But more importantly, I achieved a major life goal of mine (to build a web app on my own) and sparked what I know will be a life-long passion for web development.