notinstagram Case Study

  1. Role: Full-stack developer/Project management
  2. Scope: Demo fully featured MVP product
  3. Timeframe: Apr 2020 - June 2020
Live Demo** Removed due to a copyright request.
(see case study for code and images)

About notinstagram

notinstagram is one of my favorite personal projects. I created a pixel perfect and minimally functional version of Instagram (2020 version) as an open-source tech demo. The web app shows I can create a fully featured product, built to known features and design specifications.I started the notinstagram project with a design brief that narrows down the features for the MVP product. The design brief also contains interactive wireframes in Figma. The designs consider database design, redux state shape and REST api design.Google has blacklisted notinstagram as a phishing site so you may have trouble accessing it. I take this as an acknowledgment of the accuracy of the implementation.*I have taken down the site. Visit GitHub for the source code and documentation.
notinstagram screen shots

Technologies Used

The notinstagram app is a full-stack aplication hosted on Heroku.

Backend

For the backend of notinstagram I used a JSON REST API, built with Ruby on Rails and backed by a PostgreSQL database. I chose Ruby on Rails for its convention over configuration philosophy and strict (MVC) architectural pattern.
jbuilder
bcrypt
react-rails
aws-sdk
factory_bot_rails
faker
rspec-rails

Frontend

notinstagram is a single page app built with React. To create more maintainable code, the React code is entirely written in functional style. For state management, I chose to use Redux, to keep changes predictable and traceable.
React
Redux
Reduxjs/toolkit
Redux-devtools-extension
Redux-thunk
axios
notinstagram screen shots

Design

SCSS is used to style notinstagram. To create reusable styled components, I used SCSS in combination with BEM conventions.

Amazon S3

To reduce the load on the backend and to reduce costs, images are edited on the client side and sent directly to an Amazon S3 bucket, using presigned URLs.

Live demo

Unfortunately, I had to take the live demo down due to a copyright request. Documentation, code and screenshots are available on GitHub.

Full documentation

Full documentation on notinstagram is available on my GitHub account. The documentation includes more information on the above, multiple code examples and more screenshots.GitHub README.md
notinstagram screen shots

Contact

Contact me by submitting the form below and I will get back to you as soon as possible.