Show off your pets with Petgram- A React, Redux and Rails Project

A social media platform for your pets….

It seems just yesterday that I joined Flatiron school, but here I am at the final phase of my course battling all the way and getting closer to the graduation.

For the final portfolio project(where we need to implement React for frontend and Rails an an API on backend), I wanted to do something big. So, I chose to make an instagram clone project. Not much the same, but I have few features like signing up, logging in and logging out, users can post photos and comment on other photos as well. Still working on adding more features but as I met the deadline, I had to make it look good so jumped to CSS styling. And there you go, I have a Petgram application running where users can sign up and post their pet’s photos.

Currently, I have made 3 models: User, Post and Comment (more to come like followers, likes, etc.).

Models with relationship

For some good stylings, I used Material UI Components like Input, Button and Avatar. In order them to work, we just need to import them, like this :

import { Button, Input } from '@material-ui/core'

This gave me a good looking Inputs and Buttons and added some css for formatting which made my form look as the following picture:

This looks much more cleaner than a regular input and button html tags.

I formatted my react directory as below. I would highly recommend to organize the folders before writing codes all in one folder because it took me more time on importing them with correct directory.

What I want to talk more about is the part where I got most stuck on. So, I was having hard time on extracting the username from database & displaying the username of the user who commented on the post. Here, a little trick that I did was, I added a username attribute on my Comments table(which was also in the Users table) so that I could grab the username of the logged in user and pass it when the user comments a post. So, this way I was able to save that logged in username in the comments table.

Below is a video walk through of my project.