My Side Project Stack 2021 - Tools and Technologies I Use to Bring Ideas to Life

#motivation #startup #productivity #webdev

Introduction

Hello DEV.to! This is an article originally posted on my personal blog and thought it might be useful to people here.

I love and spend a lot of time building side projects. I use side projects to bring ideas into the world, learn new technologies and generally scratch my creative itch.

Throughout my years of building side projects, I’ve tried and tested a lot of tools and technologies, finding my favourites and building a broad knowledge of what can be achieved with each.

When deciding on what tools and technologies I use for a project, I must first determine what I’m trying to achieve with that particular project. I’ll talk more about that decision-making process in a future article, but for the sake of simplicity, the stack below is targeted towards bringing ideas to life, at the highest quality, in the least amount of time.

These projects are not my day job (yet), therefore finding the right time balance is important.

Let’s get into it.

Project Management

Notion Notion Notion. I use Notion for all my side-project-management. In brief, I’ve created pages to store ideas, timelines to manage deadlines and kanban boards to manage individual tasks, per project.

In the past, I used multiple tools, a notebook for ideas, calendars for deadlines and Trello for tasks. Bringing it all under one roof has helped me create a single source of truth, which is invaluable when managing multiple projects synchronously.

UX

I use three tools for managing the User Experience stage of my projects.

Up first is Draw.io, now renamed to Diagrams.net. It’s a simple diagram drawing tool. I use this to map out user flows, database schemas and marketing flywheels.

Any kind of user research lives in Miro. I used to use Notion for this but found the ability to move, group and link between content in Miro better suited my way of information association. It’s kind of like the crazy detective wall, with images, text, post-it notes and string linking information together.

To create and test UX flows, I use Balsamiq. It’s an interface drawing tool, but in a graphical style that lets you focus on the content and flow, rather than typography, colours and other UI elements. I will export my flows as linked PDF’s if and when they are needed for testing.

UI

For User Interface design I use Figma. Having my design files accessible everywhere, without having to move files between computers is a huge benefit. It also allows for real-time, collaborative editing, which is great when working with other people.

To supplement this, I use Google Fonts and Adobe Fonts for typography, Noun Project and Nucleo for icons, and Dribbble for inspiration.

Backend

I’m not a backend developer, but I do understand enough to get by. That may be an understatement, I’ll let you be the judge!

Generally speaking, I will use Laravel or CraftCMS as my main framework, Github for version control, DigitalOcean for hosting, Laravel Forge and Laravel Envoyer for deployment, MySQL for databases, and AWS for storage and email.

In the past year, I have been experimenting with Serverless and InertiaJS enough to feel comfortable implementing them into a project, as and when they are required.

Frontend

This year I’ve become experienced enough with React, Gatsby and Nuxt.js to have any one of them become my go-to frontend framework. However, I’ve realised these frameworks only need to be implemented when the complexity of interactions in the frontend requires particular structures.

My actual go-to frameworks are the server-rendered templating languages included within the backend framework, like Blade or Twig, combined with individual Vue.js components for more complex features. I know Vue.js like the back of my hand and the lightweight nature of the framework is great for optimisation.

I also use TailwindCSS, a utility-first CSS framework, to help bring the frontend to life. I combine this with BEM styled SASS for more complex CSS. After the UI stage of my projects, I will convert design system elements, such as design tokens, into the TailwindCSS config. The effect of this is more consistent frontends, that are written more efficiently, in a well-documented language that any future developer could reference.

Other frontend tools I use are Laravel Mix or Gulp for compiling, BrowserStack for testing and IntelliJ IDEs (PhpStorm/WebStorm) for development.

Marketing

My marketing stack is incredibly simple.

For email, I use Sendy, a self-hosted email service, to collect emails for various lists. I love Sendy because you pay once for the software and it connects to Amazon SES, meaning after the initial payment, you only pay for what you send, which on SES, is peanuts. It also allows me to create unlimited lists, set up autoresponders and view simple analytics, at no extra cost.

I have also started using no-code tools Zapier and Integromat in the daily running of my projects to automate simple tasks. This could be generating Tweets or moving emails across lists.

For some of the side-projects I use social scheduling tools like Buffer, this allows me to create a bunch of content up-front and release it over a month. Not being my day job, this is a great way for me to be consistent.