Mini-Reddit Dashboard
Project Purpose
This is a demo project for implementing responsive d3 charts within a Typescript-React-Immutable frontend architecture.
The main purpose is to explore and establish some boilerplate code for embedding d3/threeJs data visualizations within react components. The details of the product (visualizing reddit data) were chosen arbitrarilyy; reddit provides a simple and stable API, and I was vaguely curious to see how different subreddits compare in all time rankings; it's not the most exciting data set.
Another goal of this project is to compare deployment and operation of AWS Lambda vs Google Firebase Functions.
Another somewhat whimsical goal was to create an architecture called typescript-MERliN (Mongo-Express-React-lambda-immutable-Node), though I'm struggling to date to find a good reason to connect to mongo.
Project Status
This project is still under development. You can see the latest demo deployed to Firebase here
Project RoadMap
-
Deploy first version to Firebase- Put scraping logic into Firebase function
-
Deploy second version to AWS Lambda
-
Make it a PWA
-
Data Representations
-
Simple Versions
-
Line Graph- Add smooth transitions when axes change
-
Pie Chart Tab
-
Histogram Tab
-
3D Histogram
-
-
Project Setup
Local Development
At the moment the app has no dependencies on the provided express server so, to run locally, you only need to fire up the webpack-dev-server using the script command sh _devWebapp.sh. The browser will then open at http://localhost:3000/.
Deploy to Firebase
- TODO: describe set up in Firebase console (it's really easy)
- TODO: describe set up of local cli tool (it's really easy)
- Finally, run
sh _buildFirebase
Deploy to AWS Lambda
- TODO: get it working first
Project Architecture
Code organization
Much of this architecture is carried over from this demo.
Data Formatting
Along the way I invented some data structures with names that will sound generic ('subredditData' and 'subredditsDatum'). TODO: create notes so that these structures are easy to pick up by others and your future self.