zameschua / reddit-clone

A simple Reddit/Digg clone with limited functionality

Reddit Clone App

This project lives at https://zames-reddit-clone.herokuapp.com/

This project was made for the coding challenge for a job interview. I took this chance to learn how to use Flow and Jest and include them in my project because I have never used these libraries before!

Features

1. Users can submit topics (< 255 characters)
2. Users can upvote or downvote topics
3. The top 20 topics can be viewed from the home page

Project dependencies

1. Boilerplate used: Create React App
2. Testing suite: Jest (Comes with Create React App)
3. Static Typing: Flow (Comes with Create React App)
4. Linting: ESLint (Comes with Create React App)
5. UI: Reactstrap

How to build the project

1. Clone the repo to your pc

$ git clone https://github.com/zameschua/reddit-clone.git

2. Navigate into the project folder

> $ cd reddit-clone.git

3. Simply run:

> $ npm install
> $ npm start

Key Features and their Implementation

Underlying data structure

The data structure used to maintain the list of topics is a Array based Priority Queue, with O(1) retrieval and O(n) insertion times. The reason why this was used is because

1. It is relatively easier to implement than other data structures such as a max heap
2. The O(1) retrieval time is important for web pages since users expect a web page to load fast
3. The O(n) time taking to update / upvote / downvote should not be that significant since for our purpose, the number of topics is not that large. Also Reddit / Digg doesn't really have real-time tracking of topics so my simpler implementation should be sufficient

The Priority Queue is called Topics (under /src/utils/), and they maintain a list of Topic. The Priority Queue comprises of

1. Array, with index 0 containing the Topic with the most votes
2. Hashmap, implemented using a Javascript Object. The hashmap allows us to Quickly reference a Topic by its id. This is important for the upvoteTopic() and downvoteTopic() callback functions.

Displaying the top 20 topics

This is a relatively simpler task because the Topics are already ordered from highest to lowest votes in the internal array. I simply spliced the first 20 items from the array and mapped through them to display them as React components.