I coded a social platform for helping people automate things with Autohotkey. Stack +Tools breakdown inside!
Tags: react, webdev, node, programming
Published: 2021-07-06 00:39:24


Hey guys! My name is Jorge and I am the creator of ScriptMime.com.
This is the world's first social platform for finding and sharing autohotkey scripts, 100% free.

Wait, what's Autohotkey? Jeffrey, my boy, you can't call yourself a programmer until you've used Autohotkey to create a message box! Just a little joke. But seriously, you should use Autohotkey to automate stuff and just use your computer way faster. And use my site to find scripts already made for you :). https://scriptmime.com

## Tech Stack breakdown:
PERN stack. PostgreSQL 13 for the database, Express server running on Node.js and a React frontend.

Nginx used for reverse proxying requests and for rate limiting and other useful stuff. 

The servers live in Hetzner Cloud (which I highly recommend, as they are very affordable).

Code lives in Github and in a prod/dev environment. 
I use Terraform to manage my create my infrastructure (ubuntu 18 servers) and Ansible to set up my whole servers from start to finish, pretty much automated.

I'll also go over specific tools for specific parts.
*Note: I use Sublime Text 3 instead of VS Code. If you're disgusted by this, feel free to stop reading immediately.*

### Front End:
- React (classes). Yes I use classes. I love them. They make sense to me.
- Create-React-App: pretty great. Got a development environment baked in, with hot reloading. Minifies stuff, has webpack, and just does a bunch of neat stuff for you. Great small to big projects. Nextjs is on my horizon next. https://create-react-app.dev/
- State management: Mobx for React. I love how simple it is. I can basically inject objects, arrays, functions, etc. into as many components as I want. 


## Specific Features

- Authentication: A mix of Firebase authentication. Firebase API is really great and easy to work with. I use the Firebase Authentication Web API for the frontend (can do a lot of things like send verification emails, password forget, authenticate users, etc) and Firebase Admin in the Node backend to generate tokens to keep users signed in. And it's totally free and backed by the tech giant Google. It's a pretty big package. I think you're looking at anywhere from 80-200 KB gzipped and minified, depending on what you use.

- File upload: File Pond! Great API, free. Has drag and drop, and looks super nice right out of the box. It can become big in size and has modular add-ons (free) to extend the functionality, like restricting file size, file type, etc. Overall, I think with all the add-ons I have it's under 70KB gzipped and minified.

## My Strengths
I enjoyed creating front end components in React and writing the API the most. 

## My weaknesses
Definitely styling. Styling is painful for me. CSS is also painful for me. If I could go back, I'd beg a front end developer that's great with CSS and design to jump on board with me.
I made the process less painful by having a site map on Figma. Every possible page in one place. 
![site map on figma](https://imgur.com/a/ZCWDwfA)

## Biggest Challenges I faced

- File upload with more than one user at a time: 

What the heck is load balancing? I definitely didn't know that was a thing, or that I would just need to do it. I just know that it would suck if you had to wait for someone else to finish uploading their files before you had a chance to. Using Nginx to load balance specific requests (like file upload) to different servers if they are busy, is a wonderful solution.

- Nested comment system:

Users should be able to reply directly to comment. (I was avoiding the whole forum style block posting, where each reply just stacks on below and you can't tell who is reply to whom).

I had to learn some crazy things like recursive common table expressions in SQL and pull some sleepless nights to make this happen. Because I seriously could not find a tutorial for this so I had to make it myself.

## Parting thoughts
There is so much to write about, but I'll leave it off here. If there's any functionality that you would like me to write about, ask in the comments and I'll edit my post. Or roast me on my editor choice. Just let me know what you think.

Also (having mentioned styling/css being my weakness), the site isn't very usable in mobile. So if you are curious, please view it on desktop browser!
         
# Finally, the end product! 
https://scriptmime.com

## ScriptMime Features:
https://scriptmime.com/info

- see the script in action with image/gif thumbnails!
- page for every script, with direct comment replies!
- tags and categories for scripts. No more unorganized and random scripts!
- Feeds: New submissions, user-follow and tag-follow feeds. Get only the scripts from tags or users YOU are interested in.
- Notifications and private messages
- Much more AND
- 100% free

## Why is it free?
My goal is to get ScriptMime out there for people that use Autohotkey or haven't heard about it to jump on board and share useful scripts for everyone. There's guides, blog posts, and much more.
We already have users submitting very cool scripts that you can easily find in the Explore section (https://scriptmime.com/scripts/global-feed). Hop on and say hi, or share your cool Autohotkey scripts. 🙂


Thanks for reading and warm regards,
Jorge