Next Instagram

Share a visual representation of your life to the world.

Device mockup of Next Instagram

Next Instagram is a full-stack application built using Next.js' Pages Router and is meant to mimic Instagram. All users will have a profile visible to other logged-in users, in which users can like and comment on their posts.

Features

Next Instagram aims to provide users the ability to:

  1. Creating an account with a username and password.
  2. Create posts with an image and optional description.
  3. Like and comment on posts.
  4. Look between 2 different feeds for if we want to see the latest posts from users we follow or from users we do not follow.
  5. Have "real-time" messaging between users.

Planning and Implementation

With this application, I decided on using MongoDB for the textual data and Firebase for image storage. Authentication was handled by Auth.js.

One of the things I like about Next.js is that routing is simple - the route a page gets served to is its path relative to the pages folder. In addition, with Auth.js, authentication is simple to implement. One of the little challenges I faced with Auth.js was updating the session when we change our profile detail. I did not want to refresh the page to update the data as it would be somewhat of a bad user experience. I ended up solving this by changing one of the callbacks from the configuration of Auth.js.

Something that Next.js had built-in was the ability to prefetch data with their getServerSideProps(). This allows us to write server code in our pages files without leaking it to the client. With this, we can get data for a specific post without having the needing to fetch it on the client with useEffect() and display a loading state.

One of the challenges I had faced during the creation of this application was how I would handle image upload as the process was a bit difficult as we had to somehow pass the image data from our form to our back-end. One solution I found was to pass the image using FormData, however we can't directly read that data in the back-end. To solve this, I used the formidable library, which allows parsing of FormData in the back-end. From that I can run some checks, do some file conversions, and then upload that image to Firebase.

Another challenge was implementing the "real-time" messaging between users. This wasn't actually "real-time" — this was essentially a setInterval() that ran every 30 seconds that sends a request to the back-end to fetch any new messages. To implement "real-time" messaging, we would have to use WebSockets, however, Next.js doesn't support it due to its serverless architecture.