Astrogram
Overview
Project Astrogram was heavily inspired by the basic features of Instagram: creating an account, logging in, logging out, staying logged in after refreshing the page, having a profile show page for users, and having a different profile show options for the authenticated user. Furthermore, Astrogram has a feature outside of what is included in Instagram, uploading images from the browser instead of the app.
Astrogram was built using Ruby on Rails, ReactJS, Redux, jQuery, Ajax, PostgreSQL, HTML5, CSS3, and SASS. I had been wanting to create something I was familiar with, and this being my first full stack web application, I chose Instagram.
Note: This project was taken offline when Heroku made changes to their Free tier. Currently, I do not have a plan to bring this project back online, but I am leaving all of my lessons learned and source code up for viewing!
Challenges and Solutions
Challenges
- The Database & Schema
- Dark Mode
- Cookies and Local Storage
- Single Page Web Application
The Database & Schema
Designing these prior to beginning to work on the application allowed me to have a well-planned out flow of data. The problem was trying to choose the database that fit the application best.
Having highly relational data, Instagram users have posts, comments, likes, followers, and people they follow. The best route I could have chosen was a relational database, like PostgreSQL.
Dark Mode
At the time, most social media platforms started rolling out their dark modes, and Instagram was still not having one. So, I decided to add it by using SASS and local storage to remember those settings on their local device.
SASS allowed me to work with variables that switched based on a variable saved in Local storage. With some JavaScript, I was able to switch these variables based on the user input and an HTML attribute. Since I was also saving this to the user’s device local storage, when they refreshed the page, I was able to grab the variables, and render the correct theme instantly.
Cookies and Local Storage
Not only was I using Local Storage, but I also used cookies. Cookies were mainly used for user authentication to store their session token, that way when the user loaded or refreshed the page, I could grab the authentication token and confirm which user they were.
Single Page Web Application
To make my application modern, I used ReactJS, a tool to make Single Page Web Applications. This meant that any navigation the user makes through the menu, the page itself will not reload or refresh, but rather fetch the data using a REST API.