
# Documentation

Github link to server application: [https://github.com/vinlegend1/liReddit](https://github.com/vinlegend1/liReddit)

Github link to client application: [https://github.com/vinlegend1/liRedditClient](https://github.com/vinlegend1/liRedditClient)

## Client Application
### Home Page
![Feature Image](/images/reddit-clone/feature-image.png)

### Register and Login Pages
![Register Page](/images/reddit-clone/register_page.png)
![Login Page](/images/reddit-clone/login_page.png)

### Features
![Features Highlighted](/images/reddit-clone/features-boxed.png)

#### Create Post
![Create Post](/images/reddit-clone/create_post.png)

#### Edit Post
![Edit Page](/images/reddit-clone/edit_page.png)
- upvote post
    - any logged-in user can upvote a post
- downvote post
    - any logged-in user can downvote a post
- create post
    - any logged-in user can create a post
- edit post
    - only the owner of the post (the user id associated with the post) can edit post
- delete post
    - only the owner of the post (the user id associated with the post) can delete post

## Application Architecture

![Schema Design](/images/reddit-clone/schema_design.png)

![Application Architecture](/images/reddit-clone/app_architecture.png)

### Why?
#### GraphQL over REST API

GraphQL is an alternative to the REST API that solves problems that arise in REST. The pros of GraphQL are the following:
- fetch enough data (no overfetching or underfetching)
- saves time and bandwidth
- statically typed

GraphQL solves the overfetching and underfetching problem that occurs in REST. This would lead save time and bandwidth for the client due to it not needing to make a "round trip" for more data (underfetch)... and requests don't fetch unnecessary data. Developers don't need to make more REST endpoints just to fit a special use case. GraphQL is also statically typed, so it would be very useful in development workflows because it saves time on type errors. GraphQL being a typed system also makes it self-documenting, so a large team would benefit from this. GraphQL paired with a graphql code-generator on the frontend makes this workflow easier.

There are cons to using GraphQL:
- complexity
- caching
- file uploading
- request monitoring

GraphQL has good pros, but the cons might outweigh the pros. The complexity associated with building the app might not be worth it. For example, if I were in a startup environment where the goal is to build a product as quickly as possible and iterate as fast as possible, GraphQL might not be the way to go initially unless you're dealing with a specific use case. A big problem associated with GraphQL is caching. The browser is unable to cache data. When sending requests to the server, the browser (client) always issues an HTTP POST request instead of a GET even when you're just fetching data and not mutating anything. The only other way to implement caching with GraphQL is to implement memory-based caching in the server to reduce database load (e.g. Redis, Memcached). According to this [Apollo blog](https://www.apollographql.com/blog/announcement/platform/caching-graphql-results-in-your-cdn/#:~:text=On%20the%20surface%2C%20GraphQL%20might,than%20with%20a%20REST%20API.), caching with a CDN is also viable with GraphQL.

There's problem with file uploading with GraphQL, so social media sites like Reddit could use a mix of REST and GraphQL. It's also more complex to monitor requests.

I chose to use GraphQL mostly because I wanted to learn the technology, but GraphQL could be used to reduce bandwidth cost on mobile devices on their mobile app. In a large social media app, the complexity associated with GraphQL might be an afterthought especially if you have a large team.

#### Why URQL?
I chose to use URQL for the GraphQL client because it's lightweight and easy to set up. I could've used Apollo Client or Relay because they're more "fully-featured", but I chose the lighter-weight and easier to set up alternative.

#### Redis and Session-Based Authentication
Redis is used to store user session data from when they log in. I chose to use Redis because it's considerably faster than using a database table to store sessions because Redis stores sessions in RAM and not on disk. This would also reduce the load to the main database (Postgres).

I chose session-based authentication over JWT because it's crucial to be able to respond fast when a user got hacked or something similar. When you use JWT, there's no session or state to remove from the database in order to stop any further damage. In session-based authentication, you can just remove "a row" from the database and you're good. There are ways to do it with JWT like creating blacklists and whitelists, but doing that is similar to doing session based authentication anyway.

## Flaws in Current Architecture, Improvements, and Suggestions
The current architecture of the application is unlikely to scale go the magnitude of 10 million or more users like Reddit. 

The first optimization I would suggest is to horizontally scale the "application" servers (not counting database) by using a load balancer. This is to reduce the load on each individual server. 

The second optimization is to create read replicas of the database because there's going to be significantly more reads than writes. Perhaps, the server can be load balanced similarly (i.e. separating the read API and the write API). 

Additionally, it's useful to know that reddit has "groups" or "reddit page" such that not all "reddit pages" are evenly distributed. Some reddit pages are more popular, leading to more interactions and traffic than others. Horizontally partitioning the database by the reddit page id circumvents that. The read replicas now would be evenly distributed in terms of load. We should also consider using NoSQL databases in the future as it is easier to scale.

In terms of features, Reddit wouldn't be Reddit today without allowing users to upload media files. To make the application support media files (e.g. images, gifs, videos), we first have to modify the post schema to support image url. This would be a string-like object, and would link to the image file stored on Amazon S3. I chose to use Amazon S3 as it is quick and easy to set up, unlike self-hosting it. It is also the cheaper option and removes unnecessary overhead, so developers and the company can focus on making a brilliant product for their users and consumers.

![Final Architecture](/images/reddit-clone/final.png)


Reddit Clone