Artfolio

An image sharing platform made with NextJS and GraphQL.

August 26, 2023 · 2y ago

View on GitHub

What is Artfolio?

Artfolio is a Twitter/Instagram-like website for sharing images on the internet. I made it while learning about NextJS and GraphQL. It is split into two main parts: the GraphQL server which requires a Postgres and Redis database, and the NextJS frontend which is what the users have access to.

Artfolio's index page when not authenticated. The top 75% of the window is a section welcoming the user to Artfolio with links to sign in and register. The bottom part of the window has four cards displaying Artfolio's most popular posts.

Technologies Used

  • Backend: Apollo GraphQL, Express, PostgreSQL, Redis, TypeORM
  • Frontend: Next.js (pages dir.), Apollo Client, Tailwind CSS, Formik

User Profile

User profiles can be found at the /p/[username] route. The first part of the profile shows information about the user like display name, username, bio, and number of followers. If one user is visiting another user's profile, this is where they can follow/unfollow them. If the current user is visiting their own profile, this is where they can edit their profile and create new posts.

Underneath the bio section are all the user's posts sorted by date. The post cards have a like button so that users can easily like posts without having to view them fully.

A browser window showing a user's profile. There is a summary of the user at the top including their avatar, display name, username, bio, and follower count. Below that there is a list of the user's posts split up into four columns.

Clicking on a post card will open a modal displaying the full image as well as its description and all replies. This is done through contextual routing, so the browser will show the URL as /p/[username]/posts/[postId] and NextJS will receive /p/[username]?postId=. When the user reloads the page or shares the link with someone else, the separate post route will load instead of the profile route, similar to Instagram and Twitter.

Post modal opened on top of a user's profile. On the left-hand side is the image the user has uploaded and on the right is a description of the image along with some comments by other users.

Index Route

If the user is logged out, the default view shown above will be displayed which introduces Artfolio and shows a few of the most liked posts. If the user is logged in, the 'following wall' will be shown, which is a wall of all new posts by people the user follows.

The index page when the user is authenticated. There is a list of posts from people the current user is following.

Users can search for posts using the search bar located in the navbar. The backend will query the database using Postgres full-text search. This searches for certain keywords in a post which are generated when a post is created.

A page showing four results for the search query 'Dolly'.

What I Learned

I learned a lot while making this project like the fundamentals of GraphQL (resolvers, mutations, queries, etc.) and NextJS (Server side rendering, Static site generation, SEO, etc.). Some of my afterthoughts are listed below.

  • While TypeORM was fine for this project, I prefer Prisma more and will use that in future projects.
  • I really liked working with GraphQL, but having to use graphql-codegen every time a new query/mutation is created was a bit annoying.
  • Apollo Client cache is nice to work with for updating information across routes without reloading/refetching.
  • Switching from raw CSS to Tailwind CSS took some getting used to, but led to an overall easier and better development experience.