How many coding projects do I need on my resume?
Tags: portfolio, webdev, frontend, backend
Published: 2023-05-31 23:44:37

## It's not as many as you'd think

When considering the number of portfolio projects to include on your resume, it's important to shift your perspective and think like an employer. Their ultimate goal is to make the best hire - someone who has clearly demonstrated their engineering skills.

> But how do you showcase your competence if you lack professional experience? The common misconception is that you need a laundry list of projects to prove yourself.

There are alternative paths to demonstrate your engineering prowess, such as contributing to open-source projects or focusing on a **single flagship portfolio project**.

> Yes, you read that right: **just one flagship portfolio project**. Its size is not as crucial as the *quality* and *completeness* of the work.

Consider this: what speaks louder to your engineering competence? Five unfinished projects or one well-executed project that showcases your skills? Huge bonus points if there's a live demo. Let's explore the impact a single flagship project can have and guide you on how to choose the right project - one that interesting, and most importantly **something that you can finish**.


## What is engineering competence?

Engineering competence encompasses a range of skills that go beyond problem-solving.

- A competent engineer **is concise**.
	- Include a clear `README.md` in your project that articulates what the project is and how to run it. Bonus points if you have a live demo.
	- Use clear abstractions in your code. When working within an abstraction you should be able to focus on a smaller chunk of the problem and disregard the other project details.
- A competent engineer **demonstrates problem-solving skills**.
	- Highlight interesting challenges in your `README.md`.
- A competent engineer **is aware of their weaknesses.**
	- Outline any known bugs in your `README.md` as well as areas that could be improved for performance, readability, or other reasons.
- A competent engineer **follows good engineering practices**.
	- Don't include important credentials such as passwords or API keys in your repo. Instead use environment variables, or even better: a secret management service.
	- Make [atomic commits](https://www.aleksandrhovhannisyan.com/blog/atomic-git-commits/) when using version control.
	- Keep your repository tidy by [only checking necessary files into version control](https://git-scm.com/docs/gitignore).
- A competent engineer writes **secure code**.
	- Avoid critical vulnerabilities such as [Cross-Site Scripting (XSS)](https://owasp.org/www-community/attacks/xss/) and [SQL Injection](https://owasp.org/www-community/attacks/SQL_Injection) attacks.
- A competent engineer is **autonomous**.
	- Unblock yourself by leveraging official documentation, tutorials, and developer communities. Massive bonus points for improving public docs or creating a tutorial along the way.

And most importantly:
- A competent engineer **delivers.**
	- Demonstrate this by *actually shipping* a small fully-functioning project.
	- Simplify devops by using services such as [Vercel](https://vercel.com/) or [Heroku](https://www.heroku.com/) for full stack applications, or [GitHub Pages](https://pages.github.com/) for front-end only apps.
	- Don't rebuild things that already exist, unless it's a deliberate learning exercise or your version will be better in some way.

Also, be prepared to chat in-depth about your project. This is primarily motivated by two things:

1. **Verifying you did the work**. Some candidates may receive too much help on a project, or not contribute much to a group project. Answering rich technical questions about your project is a strong indicator that you're deeply familiar with the project.
2. **Genuine interest**. Hopefully your project was interesting to you. It could be interesting to the interviewer as well. This is where identifying ways the project can be further enhanced can really pay off.

To prepare for an interview that may discuss your project, setting the project up locally and making a few simple changes is a great way to prime yourself for an interesting discussion.


## Things to avoid when choosing a flagship project

- **Feature creep**. Stay focused on features that enable your MVP. Anything extra will slow you down and decrease your chances of delivering.
- **Tough technical challenges**.
	- 3D graphics. Quaternions, pixel shaders, physics, oh my!
	- real-time networking. Handling race conditions and pairing users together will 10x the complexity of your originally well-scoped MVP.
	- Your own AI, unless you're using an off-the-shelf API like [ChatGPT](https://platform.openai.com/docs/guides/chat) or [Perspective](https://perspectiveapi.com/)
- **DevOps**. If you're not looking for devops work, then you shouldn't spend a lot of time managing your own servers. Consider hosted services like [Heroku](https://www.heroku.com/) or [Vercel](https://vercel.com/)

## What makes a good flagship project

A good flagship project is one that you *can build* and *want to build*. It may be tempting to add many features to your first version, but you can demonstrate your **autonomy** and ability to **deliver** by shrinking down your project's feature set as much as possible.

## Project Ideas

Try one of these projects out, or use these ideas as inspiration for  your own. Be sure to scope a **Most Viable Product** that is as simple as possible while still being viable. (Yeah, that's what that means) Ideally, something you could complete in one day.

Enhancements can be considered when designing your original application, but I strongly suggest tackling and shipping the MVP first.


- A URL shortening service
	- Example: [free-url-shortener.rb.gy](https://free-url-shortener.rb.gy/)
	- MVP:
		- a page that takes a URL as input and returns a shortened URL as output
		- the browser receives a [HTTP redirect](https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections) to the original input URL when visiting the shortened URL
	- Potential enhancements:
		- add link click analytics
		- prompt the user if they would like to not be redirected based on the destination (eg: adult content)
- A speech and audio only interface to [ChatGPT](https://platform.openai.com/docs/guides/chat)
	- Example: [Talk to ChatGPT Chrome Extension](https://chrome.google.com/webstore/detail/talk-to-chatgpt/hodadfhfagpiemkeoliaelelfbboamlk)
	- MVP:
		- use [browser-based speech recognition](https://www.google.com/intl/en/chrome/demos/speech.html)
		- use [browser-based speech synthesis](https://codepen.io/matt-west/pen/DpmMgE)
	- Potential enhancements:
		- create a streamlined UI with sound-reactive visualizations
		- edit and cancel query support
- A podcast player
	- Example: [podbay.fm](https://podbay.fm/)
	- MVP:
		- a page with a hardcoded list of podcasts
		- a page for each podcast that parses the podcast's [RSS Feed](https://www.nasa.gov/rss/dyn/curious-universe.rss) and lists each episode
		- support for listening to an episode via the native [<Audio/> tag](https://codepen.io/z-smith/pen/WayyoO)
	- Potential enhancements:
		- add podcast search via the [Podcast Index API](https://podcastindex-org.github.io/docs-api/#overview--libraries)
		- add offline support
- [John Conway's Game of Life simulator](https://conwaylife.com/)
	- Example: [playgameoflife.com](https://playgameoflife.com/)
	- MVP:
		- the ability to turn cells on and off
		- reset, step, play, and pause functionality
	- Potential enhancements:
		- add a stamp feature to add premade shapes
		- add rewind support
- A typing speed test
	- Example: [monkeytype.com](https://monkeytype.com/)
	- MVP:
		- a typing speed test page
		- a page with your typing speed results
	- Potential enhancements:
		- add improved visualizations of your typing performance
		- add the ability to share your results

Now, go build! Feel free to share your progress here for feedback and to inspire others - you're in good company!