
## The TLDR

1. Build **SOMETHING**. Just start. 

2. Need an idea for what to build? Find a **problem** that bothers you (that you can solve with code) and solve it. Build a lil script for yourlself. _**Be your own first user**_.

3. Use existing tools as much as possible. Do not reinvent the wheel.

    - Idea Generation: ChatGPT, Notion AI
    - Frameworks: React / NextJS, Vue
    - Database & Auth: Supabase, Firebase

4. Tech stack doesn't matter. Pick what you're comfortable with. Try something new. Who cares, there is not wrong answer (except PHP, that's always the wrong answer)

5. Pick something that is completeable. My own version of the [Power law](https://en.wikipedia.org/wiki/Power_law) says that 90% of projects that go longer than 2 weeks will die. 

6. Build **SOMETHING**. Just start.

---

If you've made it to this blog post, :tada: welcome! Ideally, you're here because you're early in your career (or are a student), and want to get some insight into building side projects. 

## Some Backstory

After reflecting on my time spent hacking away on random shit in college, _**side projects built the foundation of my career**_.

You can take a look in the [About](/about) section, but the TLDR is that I was _**very**_ busy as a student in college. Although I was a late bloomer (first exposure to coding in Spring of Freshman year), after getting a taste of software engineering, I was set on building a ton of random stuff. Some early projects that I remember were:

- very basic UI wrapping logic that was normally a very manual task (getting Addresses and ZIP codes based on school name), which was used for an Esports & High School data aggregation project
- simple SMS bot for audience members of a pitch competition to interact with during the pitch
- (with a group of people) attempting to build an LCS match analysis tool
- a from-scratch emoji selector

<sub>(among other weekend scripts, hackathon projects, oh, and like, the rest of college lmao)</sub>

Notably, none of these were for any class. I built all of these because I was either a user, or it helped to solve some sort of problem that myself or friends were running into.

I spent nearly every free weekend morning / afternoon I had in a coffee shop working on stuff. It was never glamorous. It was not always productive. There were definitely some frustrating moments. But goddamn, _**I absolutely loved it**_.

There was always a new, interesting problem to solve. There was always an exciting piece of tech to try out, or a new update of React to play with. Don't get me wrong &mdash; this maniacal persistence of non-acedemic things definitely took a hit on my GPA. I wasn't terrible in school, but I also wasn't the best. I graduated from UW with a 3.3 GPA. 

Afters literal years of this dogged consistency, I started actually being able to ship coherent, good product. Not amazing, but enough to get by and go from idea to public URL.  

And from there, the rest is history. Buidling more projects turned into getting a chance to build a startup. That (very luckily) turned into getting acquired eventually. And now I spend my time enjoying work and hacking on random stuff for fun (like [resume.lol](https://resume.lol)).

## Step 1: Get Started

The first step of this framework is to build something, anything! Whether it's a solution to a problem you've been facing or an idea that you just can't get out of your head, the goal is to create something that you or your friends could use. By actually building something, you're taking action, gaining experience, and improving your skills. Don't stress about the end result, just have fun and enjoy the ride. Focus on learning, experimenting, and getting in a creative headspace. If your first idea ends up being shit, more ideas will naturally flow _**after**_ getting started.

## Step 2: Use Existing Tools

Secondly, your goal should be to use as many existing tools as much as possible. This could include AI tools to generate ideas (such as ChatGPT or Notion AI), frameworks to help build your project (such as React, NextJS, Vue, etc), and database solutions to handle database and authentication responsibilities (such as Firebase or Supabase). Using existing tools can save you time, effort, and frustration, and help you focus on what really matters: your project.

There really is no reason to reinvent the wheel here. Unless of course, your project is to reinvent the wheel, in which case, go ham on it. 

## Step 3: Tech Stack Doesn't Matter

Third, remember that the technology stack you use for your project doesn't matter that much. Sure, some technologies are better suited for specific tasks, but at the end of the day, they're just tools in a toolbox. So, don't be afraid to use something you're unfamiliar with, as it can be a great opportunity to learn something new and expand your skillset. Sometimes you can use a screwdriver to hammer in a nail. yolo

## Step 4: Pick Something Completable

Fourth: pick a project that is completable. You don't want to start a big, complex project that you won't be able to finish. Instead, aim for something that is achievable and can be completed within a reasonable amount of time. This way, you'll be able to finish what you started, feel a sense of accomplishment, and move on to your next project with confidence.

Ideally, pick a project that you think will take like 2 weekends to complete. If its longer than that, then following a rough [Power law](https://en.wikipedia.org/wiki/Power_law), 90% of projects that go longer than 2 weeks will die, in my personal findings.

## Step 5: Ideas to Get Started

Finally, just _**get started**_. That is all! Good luck, get out there, and start building!

---

Here are some ideas to get you started: 

- scraping data on the internet with Puppeteer and Node or Python
- building a Discord bot with JavaScript or Python
- developing a website with React, NextJS, or VueJS. 

:v:


How I think about and recommend building side projects for students and early-career professionals

Thoughts on building Side Projects


When I revamped by personal site, I used [Lee Robinson's site](https://leerob.io) as inspiration. One of the things I liked most that his site has is view counts on the articles that he has written. I wanted to have the same. 

![A screenshot of Lee Robinson's website](/images/post-content/simple-analytics/leerob.png)

Researching a bit and looking into the repo, at the time, Lee was calling the Google Analytics API directly from the NextJS API routes. 

At some point in time, I saw [Pieter Levels tweet](https://twitter.com/levelsio/status/1094844599296712705) some of his graphs for his websites and it the data was collected through Simple Analytics. 

After comparing the documentation and API references side by side, I decided to go with Simple Analytics because the API documentation seems far more straightforward, and many browsers and adblockers shouldn't block Simple Analytics, especially if I am using a self hosted version of it under `sa.evan.gg`. Although Simple Analytics is a yearly subscription, I figured the lack of headaches and dev annoyance would far outweigh saving $100. 

Simple Analytics also allows you to track data on unlimited sites with your subscription. That should be great when I launch more side projects :smile:

It was super fast to get up and running, and voila, I have view counts on my pages too. Thanks for the inspiration Lee!

```jsx
// Simple NextJS API route to fetch the page views!

import fetch from "node-fetch";

export default async function handler(req, res) {
    // pages = 1 or many slugs to query
    const pages = req.query.pages;
    const headers = {
        "Api-Key": process.env.SA_API_KEY,
    };

    if (!pages) { ... }

    const url = "https://simpleanalytics.com" +
        "/evan.gg.json" +
        "?version=5" +
        "&info=false" +
        "&start=2021-05-10" +
        "&fields=pages,pageviews" +
        `&pages=${pages}`;

    const response = await fetch(url, { headers }
        ).then((r) => r.json());

    if (!response?.pages) { ... }

    const pagesResponse = response?.pages
        .map(({ value, pageviews }) => {
            return {
                path: value,
                pageviews,
            };
        });

    res.status(200).json(pagesResponse);
}
```

The dashboard is pretty sick!

![A screenshot of some data from the dashboard](/images/post-content/simple-analytics/data.png)


Simple Analytics is a delightful analytics tool

Simple Analytics is Great


TLDR: I bought a Raspberry Pi, SSH into it, and write code and various scripts. I use the VS Code Remote Explorer to open up the files on the Pi as if they were on my machine! I provide a quick guide on how to set it up!

I bought a Raspberry pi over the 2022 holidays. My inspiration for doing so was a mix between wanting to have a small computer to run periodic automations, wanting a fun project that I can hack on with whimsy, and removing the irritation for paying $5/mo for cloud compute for what would essentially be the same thing as a Pi. 

Fortunately, I was able to get one of the [Raspberry Pi 4 8GB kits](https://www.amazon.com/dp/B08B6F1FV5?psc=1&ref=ppx_yo2_dt_b_product_details)! Even though it came with a 128GB SD card, I had a 256GB card lying around that I used instead of the one from the kit. 

Setup was actually rather easy — if you set up as well, I'd recommend using an ethernet cable since downloading the OS over Wifi is pretty slow. 

So here's a simple guide for setting it up:


0. Before you begin, I assume you've already setup your Raspberry Pi and have connected it to a monitor / keyboard / mouse as per the setup instructions that came with your Pi. You'll need to have it connected to a monitor for the next step.


1. Enable your Raspberry Pi to receive SSH connection over your local network. [I used this quick guide](https://www.raspberrypi.com/documentation/computers/remote-access.html). This is a pretty straightforward guide on how to enable your Raspberry Pi to be accessible via SSH within your ***local*** network. If you want to make your PI accessible ***outside*** your local network, you'll need to do some [additional steps](https://forums.raspberrypi.com/viewtopic.php?t=20826). You'll also want to write down the local IP address, which you can find using [this guide](https://helpdeskgeek.com/networking/what-is-my-raspberry-pis-ip-address).


2. Via your command line, SSH into your Pi. should be something like `ssh pi@192.168.1.X` where X is likely to be different based on your local network. It also probably depends on your router as well. You can learn more about that [here](https://networkengineering.stackexchange.com/questions/5825/why-192-168-for-local-addresses). You want to make sure that you can access your Pi from the device you want to use VS Code Remote Explorer.


3. [Optional] After you connect via command line first, you can add your machine's public ssh key to the `authorized_keys` file so you don't need to put in your password each time! [This guide](https://askubuntu.com/questions/46424/how-do-i-add-ssh-keys-to-authorized-keys-file) should explain how to do it easily. This is nice to do because otherwise VS Code would prompt you to put in the password each time it wants to connect via SSH. This is great if you want to SSH into your Pi from multiple computers (I use both my personal Mac and gaming PC to SSH in, depending on what I'm feeling).


4. Add VS Code Remote Explorer Plugin

![searching for the plugin](/images/post-content/pi-vscode/2.png)

![preview of the plugin](/images/post-content/pi-vscode/1.png)


5. Add your Pi! You can either do this by editing your `~/.ssh/config` file to add it as a host, or manually adding the Pi as a host via the UI in VS Code.


<figure>

![ssh targets dropdown](/images/post-content/pi-vscode/3.png)

<figcaption>
  Select SSH Targets
</figcaption>

</figure>


<figure>

![config screenshot with host info](/images/post-content/pi-vscode/config.png)

<figcaption>
  Add the SSH Host info to your SSH config
</figcaption>

</figure>

<figure>

![plus button to add host](/images/post-content/pi-vscode/replus.png)

<figcaption>
  Or you can manually add it with the "+" button under the SSH Targets dropdown
</figcaption>

</figure>

6. Connect to your host and you're done!


<figure>

![open the folder](/images/post-content/pi-vscode/reopen.png)

<figcaption>
  Click on the open folder button and then select the location you'd like to open up the file viewer
</figcaption>

</figure>

<figure>

![preview of working code](/images/post-content/pi-vscode/redone.png)

<figcaption>
  And now you can have an entire workspace accessible to you at any time on your local network!
</figcaption>

</figure>

7. [Optional] Generate an ssh key on the Pi and add it to your Github, so you can read and write to your repos from your Pi.

Happy hacking! Perhaps in a future article I'll write about what I'm using my Pi for. Let me know if there's anything interesting I should do :smile:


Access your Raspberry Pi from the comfort of your favorite machine via SSH and VS Code

Raspberry Pi and VS Code Remote Explorer (via SSH)


Almost everyone has had a side project they've worked on and eventually left behind. Software Engineers are no exception. I am certainly not an exception either.

Throughout the years I've been coding, I've almost always had a side project that I've hacked on to pass the time. Whether for learning new tech, pursuing a crazy business idea, or satiating a creative spur, I've almost always had a side project to keep my IDE warm.

Tonight &ndash; after being disappointed that no one was online in League &ndash; I opened up my CLI wistfully, not certain what I should work on. Should it be one of the 3 ideas I've been bouncing around in my head? Should it be the 2 half-baked projects I've been nursing?

Navigating to my `~/code` directory, I habitually typed `ls` and then hit enter. Then it hit me. `~/code` was _basically_ my side project graveyard.

![Screenshot of home directory](/images/post-content/side-project-graveyard/home-directory.png)

_**UGH.**_

Actually... Seeing all of those in one place is kinda cool. Slightly nostalgic. Slightly sad. I wonder if other people would want to see this.

Wait a minute... I might not be the only one! What if... what if I made a side project where people can share their dead side projects! Let me check to see if a domain is open!

![Screenshot of home directory](/images/post-content/side-project-graveyard/domain.png)

Sweet, we're good to go. Let me bounce this idea off of a few people first, ideally those who have had side projects, and especially ones that have died.

Then, I'd need to cobble together my personal boilerplate, decide if it should be anonymous or if I need accounts, and then...

_**UGH.**_

This is going to turn into another dead side project, isn't it? Fuck.

You know what would be cheeky? If I wrote a blog post detailing all of my thought process, and how it would have ended up as a dead side project within itself. Meta innit?

Well, damnit. I wanted to share these side projects via a cool site I made, but I guess a blog post will do as well.

So without further ado, here is a somewhat comprehensive list of my dead side projects.

#### Legend

:bulb: = mostly just an idea

:computer: = mostly just code

:ship: = actually shipped something

#### Side Projects

(oldest to newest)

- :bulb: CSGO pro match analysis - to be used for informed skin betting, of course
- :ship: Climb.gg - programmatically analyzing pro League of Legends matches (not mine, but I worked on it)
- :computer: EsportsEDU - non-profit to engage K-12 students through competitive video games and educational content
- :computer: RA tool - I made a little tool to help me be an RA in the dorms
- :ship: meme.dating - tinder, but match based on meme preference
- :computer: Requaint - personal CRM
- :ship: noni.menu - AR food menu app
- :ship: qwerty.gg / buildspace.io - teaching kids to code through video game examples
- :ship: Kanga - not really a side project, but I could never forget you :heart:
- :bulb: ShakerKit - bar-in-a-box kit to build out your home bar. equipment, ingredients, liquor
- :ship: CafeList - yelp / nomadlist, but for cafes. Gotta get the right vibe, yo
- :ship: ezclap.gg - http://niceme.me but for EZClap
- :bulb: producthunt.gg - product hunt, but specifically for gaming products
- :computer: i'd pay for that - a marketplace for ideas, vote saying you'd pay for something, and then the maker that makes the idea can buy a list of first paying users
- :ship: domainh.ax - site that looks up available domains
- :ship: hydrohomie.xyz - service that texts you reminding you to drink water
- :bulb: code snippet sharing service - be able to share code snippets with peers super easily
- :bulb: emojidomains - idk something to do with emoji domains
- :computer: domain trading cards - see your domains in a page as trading cards
- :ship: zentab - a beautifully animated new tab
- :ship: resumdx.com - keep your resume as a markdown file and generate a nice PDF for it every time without needing to do super weird Microsoft Word formatting
- :ship: lofi.vote - lofi music with presidential result twitter embedded
- :ship: meld - reddit/hackernews/designernews but merged into 1
- :bulb: keeb.page - place to share what keyboard parts you own / marketplace to buy/sell
- :computer: use old macbook and puppteer and cron jobs to scrape random websites - idk I feel like I should collect my own datasets or something


So yeah. Most of em are dead, but I learned a lot along the way.

:v: peace


Gone but not forgotten. Here's a list of my side projects that never grew old.

Hiya, I'm Evan Frawley