I recently released the latest project I’ve been working on. It’s called YourSetup and it’s available here in beta. I’ve been making web APIs for mobile games for the past year at Playlab and I didn’t get the chance to do some good full-stack web development. I kinda missed it so I thought I would create something from scratch by myself. I love challenges and this one was a very exciting one!
What’s YourSetup
I built niche websites with affiliate links in the past which means I kind of know the affiliate marketing world and how it works. That’s why I wasn’t surprised to see the same kind of links in the description of YouTube videos or on Twitch streams. Those links allow these people to make some extra cash by recommending what they use.
I really like the idea that people can make a living by recommending the stuff they use and love.
I’m also personally a gamer. I play mostly MMORPG games (Blade&Soul NA recently) and I thought it would be great to see what equipment the gamers I like use to play games with. I like to see nice and clean gaming setups and the effort people put into having an awesome gaming environment. Plus, if I see something I really like in a setup, I want to find out where I can get it.
From this, the idea behind YourSetup was born.
YourSetup would be a place for people to share their setups by simply taking a picture of it. They could then add pins on the picture to help people get the same gear. If they want to use affiliate links, that’s up to them!
I told myself it was a cool idea that would be a great side project for me to work on and refresh my front-end skills. I decided to use Ruby on Rails to get a MVP ready ASAP.
Note: If you don’t know what are affiliate links, it’s just links provided by companies to purchase their products. If people buy stuff using your links, you will get a small commission from the sale.
By the way, YourSetup is one of the 8 projects I have this year. You can checkout my other projects on my new blog about my journey to freedom.
Let’s get started with the first lesson I learned while working on YourSetup!
Lesson 1: Elastic Beanstalk is awesome… except for some small stuff where it isn’t that awesome.
Elastic Beanstalk (EB) is one of the many services provided by Amazon Web Services. To best describe it, let me use some content from the AWS website:
With Elastic Beanstalk, you can quickly deploy and manage applications in the AWS cloud without worrying about the infrastructure that runs those applications.
EB is basically a layer added on top of EC2 to make it easier for people to deploy any kind of web applications as long as it’s written in Java, Node.js, Python, PHP, .NET, Ruby or run inside a Docker container.
Why Elastic Beanstalk?
I basically had 3 options to deploy YourSetup.
- Heroku
- From Scratch on Digital Ocean / Linode / EC2
- Elastic Beanstalk (running on EC2)
I didn’t want to go with Heroku because of the very high pricing when you need to scale up. I was also too lazy and busy to set up everything from scratch on a VPS. Scaling would also have been an issue since I didn’t have any mechanism to handle it for me.
The solution was pretty obvious as you can see. With Elastic Beanstalk, you get the power of running your application on virtual private servers (EC2) but all the configuration is done for you. Adding more servers can be done automatically depending on how you configure your EB application. You can also do it manually in just a few clicks!
When you start using Amazon Web Services, it makes sense to use more than one service since they all work very well together.
Database
For the DB, I wanted to use PostgreSQL. That’s all I needed to tell Elastic Beanstalk. During the configuration of my application, I simply indicated that I wanted to use PG and a RDS instance was created for me.
Background Jobs
I decided to use Sidekiq to handle the processing of the pictures in the background. To do this, I needed a Redis instance. Of course, AWS has a service for that: Elastic Cache. You can either pick Memcached or Redis and I went with Redis. Connecting EB with EC wasn’t actually that easy. I tried a few things using .ebextension configuration files before finding out that I could just link them through the web interface in a few steps. Duh!
File Storage
Everyone knows S3 right? I don’t even know any other service that does the same thing because I’ve always been happy with AWS S3. For YourSetup, I needed a place to store the setups pictures and S3 was the perfect place for that.
Issues
The main issue I faced on the way was running out of memory during deploys. Usually while compiling assets, the deploy would crash and tell me that the process had run out of memory. Damn!
For some reason, I was running a t1.micro instance. I’m not sure why I had this because I don’t remember picking it. Anyway, once I upgraded to a t2.micro, the problem went away.
The other thing I’m always a bit worried about with AWS is the pricing. I’m still afraid to wake up one day with a $1000 bill to pay. Luckily, AWS have some notifications when you reach a specific billing threshold to react ASAP. So far, I didn’t pay much since I qualified for the free AWS tier. I have to pay for the staging server though.
Pros & Cons
Elastic Beanstalk is awesome.
- It’s easy to use. Setup the application with
eb initor through the web interface and enjoy using theeb deploycommand after that. - You can run one application for free (including DB, caching, and file storage)
- Adding or removing servers can be done in a few clicks.
- You can SSH to the servers if needed.
Elastic Beanstalk can also be a pain.
- I always had issues with the AWS documentation. It seems I can never find what I’m looking for. I mainly used external tutorials to get everything working.
- Some configuration found online are not working for the latest stack which is
ruby 2.2 (Puma). Be careful when using configurations from Gist or Stack Overflow since they might not be up to date. - I had some issues understanding the
.ebextensionssystem at first. It’s actually quite simple, you can basically put YAML configuration files in there to do some stuff when your application is deployed.
Lesson 2: Paperclip > Carrierwave (IMHO)
Let’s talk about pictures upload and processing! YourSetup lets users upload pictures of their setups so that was a pretty important part. Instead of re-inventing the wheel, I just went with an existing solution: Carrierwave.
I’ve used both Paperclip and Carrierwave in production applications in the past. I like the way Carrierwave encapsulates the uploaders into their own class so I went with it.
At first, it was great. I had my uploaders ready and working in local. Then I started working on uploading the pictures to S3 and processing them in the background.
I tried to find existing solutions and found carrierwave_backgrounder and carrierwave_direct, two gems that seem to do what I needed. I tried to integrate them both but I couldn’t get them to work properly! I’m not sure why but after wasting half a day trying to figure ir out, I decided to switch to paperclip + delayed_paperclip + sidekiq and got everything working in less than an hour.
From now on, I will simply use Paperclip anytime I need to handle pictures upload and processing.
Lesson 3: JQuery is a pain in the a**
I worked on a few SPA applications in the past 3 years - mostly using Angular.js and React.js. For YourSetup however, I settled on a regular Rails 4 application (with Turbolinks). HTML is generated on the server and JQuery is used to dynamically modify the page.
While working on YourSetup and creating some JQuery components (for the pinning system for example), I realized how much I didn’t miss manipulating the DOM at all! Using Javascript/JQuery directly feels a bit cumbersome. Having to manipulate the DOM, make Ajax calls and update manually the content of each div/span was annoying to be honest. Writing SPA felt like a breeze compared to that. I guess I just lost the habit of writing Javascript in that way!
After a bit of refactoring using CoffeeScript class syntax, I was able to have clean components that are now pretty easy to change if I have to.
JQuery is still an awesome tool that I will keep using but now, I honestly prefer writing Javascript using SPA technologies.
Lesson 4: Use Slim/SCSS/Coffeescript
I just love those 3 technologies: Slim <3 SCSS <3 CoffeeScript. They just make me save so much time!
I’m not sure if you’re into this or if you still enjoy writing ERB and CSS but I would really recommend you to give it a try.
Slim just make it so fast and easy to write templates. SCSS gives you variables and mixins. Just that should be enough to convince you to use them. I can change the whole theme of YourSetup by changing a few variables and I love that!
CoffeeScript is another story. I don’t really have a preference between pure JS and CS. I use both depending on the situation. The thing I love about CoffeeScript though is the class syntax. It makes it so easy to write Javascript classes without worrying about prototype!
Lesson 5: If you need something, AWS probably have a service for you
Another lesson related to AWS. If you need something, they probably have it. Don’t hesitate to take a look at all their services. I’m personally thinking about switching to AWS CodeCommit (instead of Bitbucket) and AWS CodePipeline (instead of CircleCI).
By signing up, you also get one year of free usage for almost all the services. That means you can give it a try without risking anything! Even when you have to start paying, AWS is still pretty cheap compared to the alternatives.
Lesson 6: Use Letter Opener & Rails mail view to create and test your emails in local
We all know that creating and testing emails in local can be quite annoying. Luckily, there are some Rails features and gems to help you!
First of, to create your emails, you can use the preview feature that comes with Rails since the 4.1 version.
Checkout the documentation here or the original gem there.
To actually test the email flow, there is always the awesome letter_opener ruby gem made by Ryan Bates. Any time an email is sent from your application, it will simply pop it up inside a new tab in your browser. That’s perfect to feel the flow in local before pushing anything to production.
Lesson 7: Don’t forget Exception reporting & Logging
Once your application is live, you will need two important tools to keep track of what’s happening.
You will need a place to:
- Record and save exceptions
- Access the logs
To do those 2 things, I was looking for platforms with free plans since I’m not sure YourSetup will pay for itself. Until then, free plans are good enough.
I found two awesome platforms to do just that:
- Papertrail: Frustration-free log management. Get started in seconds.
- Rollbar: Full-stack error tracking for all apps in any language.
I didn’t have any issues so far and I’m super happy with what they provide for free!
The End
I hope you enjoyed reading what I learned while working on the MVP for YourSetup. If you have 5 minutes, please check it out and let me know what you think. You can also apply for the Beta, I’m still looking for beta testers!
