Pupstagram: An Instagram-ish React App with a Rails Backend
The last ten months have flown by! We are in the last phase of our program at Flat Iron and wrapping up the React/Redux curriculum. For my final project, I decided to build an Instagram clone…. for doggos!
The application has a similar user interface to Instagram. When a user is logged in, the home page they see is the index of all posts by all users. But unlike Instagram, I decided to incorporate a feature where a user can browse dog parks in their area via the Yelp API.
I built this application with a React/Redux front end and a rails backend with a SQL database. I plan to eventually convert the database to PostgreSQL and then deploy to Heroku. Long term, I will convert my application to React native to make it a full fledged mobile app.
The first thing I did of course was initialize my front end using create-react-app and backend using rails new. I always try to code out the next thing I want to see on the screen. So I started with the Yelp API feature. I set up my API key, necessary controllers and service class. I was mainly focused on fetching dog park data in a certain zip code. I didn’t set up any views on the rails side because I wanted to do all my front end displays using React.
Once that was completed I set up my user authentication. In this app, a user can log in, sign up, and log out. I also created an auto-login method to keep a user logged in as they navigate throughout the application. I incorporated Material UI to create modals for the log in and sign up forms. I LOVE material UI because it’s a great work to create professional looking components in React that are free, fast, and light weight. I also used material UI for my buttons and various other text fields.
This application features a few main pages. The home page displays an index of all posts from the backend. A post object, similar to Instagram, features a username with an avatar, a photo, and a caption next to the username. The home page is also where the new post uploader lives. This was actually one of the bigger challenges of building out this application. I really wanted to learn how to incorporate a file uploader so users can upload a jpg file from their local machine, instead of just an image url, which is what I have done in previous applications. I found a couple of tutorials online to incorporate this feature. After a few slightly painful and rocky sessions of debugging, I was finally able to get it functional. The main challenge for me was figuring out how to pass over the image data correctly to the back end, and then retrieve it on the front end on the post index page.
The find a dog park page displays a grid of all dog parks from the Yelp API, and then each card takes the user to the show page for that dog park. The show page features a link where the user can go the Yelp link to find more information on that particular dog park.
The last page I created is a profile page. This page is where all the user data lives. It populates with the username, bio, breed, and birthdate of the logged in user.
This app was a great experience in understanding how to properly use the Redux store. Redux is a powerful tool in React but can be very tricky to understand at first. There’s a lot of moving parts and it’s not always clear what’s happening under the hood. Building this application was a valuable learning experience in getting comfortable coding in React and and learning new tools like Material UI and how to include a file uploader.
