Skip to content
Take 5 lol
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
WDI-SM-62- Project

WDI-SM-62: Project ONE ... by Joy Serquiña)

Build a Full Stack Ruby on Rails

I have created a full stack app with Ruby on Rails that is a "Foodstagram" of sorts for foodies like myself. Users would be able to see food posts that others have posted in order discover popular/trending ("haute" if you will) foods as well as post their own food images.


Haute-Food13 splash/about page ![Haute-Food13 sign up page] ( ![Haute-Food13 sign page] ( ![Edit Profile page] ( ![Community food feed page] ( ![User's food feed page] ( ![User's new post page] ( ![User's edit post page] (

User Flow Sketch

![HF13 User Flow Sketch pg 1] ( ![HF13 User Flow Sketch pg 2] (


![Relationship btw User and Post Models] (

My Process


  1. I started by writing out my idea and jotting down the two models/Schemas (User Schema and Post Schema) that intend to incorporate in my app.
  2. Then went on to sketching out wireframes of each section as shown here:

User Flow Sketch

![HF13 User Flow Sketch pg 1] ( ![HF13 User Flow Sketch pg 2] (

  1. I then created my user stories in trello to list the actions they would take, what they would see etc: Screencapture of trello to do list. The way the Trello looks with the food image on the background is how I intend to style my app pages with a different food on each page.
  2. Talked through my ideas/ processes with Zac and Alex for approval.
  3. Create a new git repo for the project.

#####Setting up the Database & Authentication:

  1. Created and set up with PostgreSQL.
  2. Set up the authentication.
  3. Set up the CRUD-able resource for my User Model Schema.
  4. Set up the CRUD-able resource for my Post model Schema.

#####Setting up the functionality:

  1. Created a forEach loop to iterate through the all the users posts' in my database to show the data on "Food Feed" page.Screencapture of forEach code on hike list page.
  2. Created a forEach loop to iterate through the all the Current User's posts' in my database to show the photo's they have posted on the "Your Yums" page.Screencapture of forEach code on hike list page.
  3. Upon signing in the User is led to the Community feed page to see other food posts.
  4. When clicking on Their Yum's page, they are led to seeing their posts as well as link to edit their profile and add a post.
  5. From the User profile edit page they can also delete their post.
  6. Once I worked out the uploader with Active Storage, I implemented it into my new post page form.
  7. Upon getting Active Storage uploader to work with uploading images to my database, I connected it to the S3 Bucket that I created in Amazon Web Services to hold my files.

#####Focused on trying to figure out how to upload files and save them to Amazon Web Services Did a bunch of research over the course of 3 days reading articles and watching videos on how best to implement it.

Ended up using Active Storage for Rails as my uploader and then once it was functioning I attached AWS to it.

In order to use AWS I had to:

  1. Sign up for an AWS account.
  2. Create an Identity and Access Management sign in.
  3. Get all of the keys and secret keys.
  4. Create an IAM policy to apply to a User.
  5. Create a user.
  6. Create an S3 bucket.
  7. Connect the keys to an

#####Pushed to Heroku:

  1. Saved to Github during each major save/change.
  2. Saved and deployed to Heroku successfully on Thursday with my basic CRUD with my 2 models WITHOUT the uploader working.
  3. Managed to deploy to Heroku upon getting Active Storage and AWS to work, but for some reason Heroku ran an error when trying to open the app.
  4. Fine tuned my app and adjusted some things and pushed to Heroku and it is now fully functioning.
Technologies Used
  1. Used the following:
  2. HTML5 / ERB Layouts to build the structure and layout of the views based on the wireframes I sketched out in the beginning.
  3. CSS3 / Bootstrap to adjust the spacing and general form/navbar functionality.
  4. Ruby was used to create the functionality of the routes/paths/buttons/form submissions to communicate with the back-end.
  5. PostgreSQL, was used to build, test and develop the back-end database.
  6. Used Trello to track my daily goals and productivity as well.
  7. Used Git/Github to save/track my build as it progressed.
  8. Used Heroku to deploy my app.
  9. Used Active Storage to enable an uploader for my Posts model.
  10. Used Amazon Web Services to create an S3 Bucket to hold the image files that get uploaded to my app.

##Unsolved Problems:

  • I want to implement Google Maps with the Vendor address so users can find the food locations.
  • I'm going to fully style it out.
  • I want to add like and possibly follow features.

Wins :)


*Joy Serquiña

Designed and Developed by: Joy Serquiña

*[Link to Joy's github for Project 2: Full Stack App] ( *Link to live site hosted up by Heroku

You can’t perform that action at this time.