Share your repls and programming experiences

← Back to all posts
GreenScale - the Environmental Sharing App
h
AdCharity (1273)

You can find the live version on the repl or here: https://hackathon.greenscale.technology/
NOTE: Please, refrain from entering sensitive information on this site (read the terms and conditions)
EDIT: In case you don't read, the stream updates everytime you move your cursor in or out of the feed (which is essentially where the posts are held). If you aren't waving your mouse around, the stream will not udpate.
EDIT: GreenScale is back online, with a couple of security filters in mind :D

Credits

I really thank repl.it for making this project and event possible. In addition, I, @AdCharity would like to heavily thank @EthanHorowitz for his endless support and tireless efforts to make this project work.
You can find more credits on terms page. Yes I put this at the top because most people aren't going to appreciate this long post our team constructed in +1hr, so at least appreciate the people that made this possible.

General

This entire project accumulating to over several thousand lines of code was made by @AdCharity and @EthanHorowitz . We finally did it :D after working tirelessly (even staying up past 24 hours one day) to put together a final product.
Some components are built on: Firebase, Brain.js, and the domain is supplied by name.com
Our team only used vanilla JS, CSS3, and HTML.
Essentially, this is a social media site where you can share about your environment.

Inspiration

The theme of the hackathon was "sharing". As such, the very first thing that came to mind was a social media app! We decided to make our application more limited and pertaining to real world issues, and finally settled on the idea of having a social media site focused on the environment (where you can create an account and post things). The environment is changing rapidly due to climate change (or if you don't believe in it, pollution). With this web application, we aim to share and spread awareness of the beauty and destruction people bring to the environment.
The name came from the fact that @AdCharity wanted to implement a black and white theme with hand drawn images (grey scale image :D play on words there). However, the idea evolved into an environment based idea, so we morphed it into GreenScale instead.

Features

You can find more about these features on the about page (which you can find when you create an account and sign in).
Some features currently functioning include:
1) official domain name here: https://hackathon.greenscale.technology/ and SSL certificate
2) neural network to classify posts on environment - may not work extremely well given the poor set of training data
3) mobile support
4) search tag, title, or room
5) commenting on posts
6) store user profile pic/date joined
7) actual posting that can take in images
8) hand drawn images by @AdCharity (yes the homepage thing is a globe and a scale. IT IS A SCALE.) and royalty free images for the background
9) guess what - I didn't list it, but you can actually delete posts that are your own

Known Bugs

The feed takes a second to refresh. Please tell us if you find anymore.
Please.... those of you who know firebase... don't wreck our database...
EDIT2: stream may spaz out for some users... (just means it is constantly refreshing)

Getting Started with GreenScale (you really don't need to read this)

It's pretty intuitive and self explanatory, but essentially you visit our home page and create an account. Once you have created an account, you can view your profile (on the left) and the feed (on the right). While the feed should automatically refresh every 6 seconds, it will also refresh every time you comment or hover on a post. The user card on the left contains your profile picture (which you can change), the date you registered, and your profile username that will be displayed when making posts. It also contains the options for: logout, adding posts, the terms and conditions, and the about page (not necessarily in that order).
NOTE: If you are on mobile, change your view to landscape, as we have disabled signing up for mobile phones for styling purposes.

Posting/Comments

On mobile, the user profile card will not be displayed. On the other hand, you'll see a blue circular button that you can add posts with.
On desktop/larger window browsers, you can add posts with the add posts button located in your user profile.
By pressing expand comments on a particular post, you can add your own comments and see what others have written.