Jobify: Sinatra CMS App

Jobify, a Sinatra CMS application, is a job creation platform similar to Fiverr. After signing up or logging in, you are brought to a services index page, where you can view other users’ services. Below is a video walk-through.

Live Demo

Screenshots

I spent hours on this /services/index erb, styling the CSS for the service card. I applied a gradient on the image inside the service card div, and included params values of service attributes :name, :description, :rate, :seller_id names, and :rating. If the seller has a profile image, then a thumbnail would appear in the bottom of their service card. Otherwise, a standard silhouette image would appear in place of the profile image. Upon clicking on a service, you would be brought to /services/:id erb.

In this /services/:id page, you can see the meta-score rating and individual reviews from purchasers of this service as you scroll down the page. The meta-score required me to write a Service class method:

def meta_score
self.reviews.map {|review| review.rating_review}.reduce(:+).to_f /
self.reviews.map {|review| review.rating_review}.size
end

In this method, I am calculating the average of all “rating_review” integer values (1–5 star rating) of a specific service review, which, in this instance is 3.5 stars. I am also indicating the number of reviews.

In addition, you are able to theoretically “purchase” the service. However, I have not made a payment system, so once you press the red “purchase” button, a green button appears saying “Bought”, and a flash message also appears “Congratulations on purchasing this service! The seller will contact you with details.”

Now that you bought the service, and assuming the service was completed by the seller, you are able to review and rate the service. Upon scrolling down, a “Review & Rate” section now appears for you to give feedback.

You can also click on the image of the seller Megan to view her profile and more of her other services. As seen below, Megan’s profile shows her location, and all of her services. You can even see one of the service cards with a highlighted “Bought” displayed, as that indicates a service that you had bought.

Besides viewing, purchasing and reviewing services offered by other users, you can create a service too. On the fixed header, there is a “Create New Service” link.

Coding the input and textarea form was pretty straightforward. However, I found the image uploading feature more challenging. After researching online for hours, I found a script I was able to modify slightly to enable my image inputs to persist and display on the app.

covername = params[:cover][:filename]
cover = params[:cover][:tempfile]

@service.cover_image_url = “/#{covername}”

File.open(“./public#{@service.cover_image_url}”, ‘wb’) do |f| f.write(cover.read)
end

Throughout my entire app development process, these are the only lines code I outsourced. I still do not entirely comprehend its function, and I look forward to dissecting it with more clarity as I progress in my studies.

After you create a new service, you are no longer just a user — you have now become a seller as well. A seller belongs to a user, thus a seller has an attribute :user_id.

post ‘/services’ do
@seller = Seller.find_or_create_by(:name=>@user.username)
end

In the post action, as demonstrated in the code above, upon submitting a new service, the app looks for a seller with the same user name. In other words, if the app finds a seller with that name, that means this user had already become a seller from a previous service he/she offered. The new service would therefore be added to this existing seller. If the app does not find that seller, then it will create a new seller instance with the name of the user.

After submitting the “Create New Service” form, you can also edit every aspect of your service.

Lastly, you can access your user account on the right hand corner of the fixed header. As shown below, your account showcases your “Offered Services” and your “Purchased Services”.

You can also edit your user account, such as modifying your name, location, profile image, and services, as shown below.

Conclusion

I worked on Jobify from October 10–December 6, 2017, and it was terrific training experience for me from a full-stack development perspective. I included more features than necessary, but I looked at this endeavor as more than an assignment, but rather, a hobby project. I often found myself coding for eight or nine hours in a row, into the wee hours of the morning. One of the most important things I’ve learned through this process is developing resourcefulness — being able to research online and solving problems that I have yet to encounter. Jobify has many components, so as I changed lines of code in my models or controllers, I had to account for that in my views as well. Thus, often, enhancing or refactoring my code meant breaking functionality that worked — which can be scary — but sometimes necessary. Through this process, I feel very confident in building domain models through object relational mapping. I believe this Sinatra experience will equip me to build more complex apps with Rails.