Scribd
Upload
23 views4 pages

Project Template

Uploaded by

Brian Omoga
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views4 pages

Project Template

Uploaded by

Brian Omoga
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Project Template

You want to create a great side project. One that increases your hireability, skillset and expands
your knowledge (and maybe your salary).

We are going to walk through the step by step process I’ve used to create side projects that
have done just that.

The problem with your standard TODO app is that it exposes you to a technology but is nothing
like what you will encounter in a production environment. You may think you know ReactJS or
MongoDB from creating a simple CRUD app. You’re not wrong. You’ve gained some
information and practical skill but at best you have shallow knowledge.

Let’s build something interesting.

When I first started writing code professionally, I used AngularJS, C# and SQL. Not the most
cutting edge stack. The next role: ReactJS, NodeJS and MongoDB. So how did I land a job as a
mid-level developer at a ReactJS/NodeJS shop? Well, I built a complex web app using these
technologies which prepared me for the interview and the actual job. I was able to hit the ground
running.

Here are the steps I use to create a solid side project:

Pick an API
The API layer is the heart of the application. If you’re stuck on what to build, always start with
the API/s.

A good API will have solid documentation and should challenge you in its implementation.

Ideally it’s more than just a single endpoint with a GET request but that’s fine to start with if you
are a beginner or it fits your needs.

Here are some lists of APIs you can start with:


https://www.programmableweb.com/category/government/api
https://free-apis.github.io/#/browse

1.Pick a Front End Framework


Let me make this pretty simple for you: choose one of the BIG 3 JS frameworks
● ReactJS/NextJS/RemixJS
● Angular
● Vue
A good rule of thumb is to pick a framework you’re interested in learning or diving deeper into.
For example, you may use ReactJS at work but not Typescript. This is a great opportunity to
incorporate TS.
State management is an integral part of any sophisticated app. Choose one you want to learn
more about:
● Redux
● MobX
● Zustand
● React-Query

2.Pick a Backend Stack


The application API will handle authentication and persist any data which needs to be stored in
a database.

Pick a language and framework you want to learn more about. I use Node/Express at work so I
might pick Python/Django for a backend option or Go.

For a DB, you have some economical (read - FREE) choices. MongoDB is a safe choice. AWS
offers a similar key-value store, DynamoDB. Supabase if you want to be part of the cool kids
stack. Of course SQL.

3.Authentication
For authentication (which I strongly suggest you add after finishing your main features) you can
use Auth0 or roll your own if you want an additional challenge. If you do decide to create your
own authentication logic, I can pretty much guarantee it’s not safe to deploy for “real” users. You
don’t want to be on the hook when someone hacks into your DB or deciphers your poorly
encrypted passwords. You’ve been warned.

If you do decide to do your own authentication, remember to have flows for resetting passwords,
changing passwords and using session tokens or JWTS to keep users logged in without having
to sign-in over and over… and then, just use an off the shelf solution 😉.

4.Pick a CSS Framework


Are you still using Bootstrap 3 at work? I was 😅. Pick a cutting edge CSS framework or one
that you want to learn. Remember this project is about learning not falling back on the same
stack you use at work. Tailwind, AntD or Material UI may suit your needs. Or if you’re over CSS
libraries, maybe you explore css modules in React?

Plain CSS?! What a novel idea.

5.User Flow
Now you have your languages, frameworks and APIs chosen. Good. Here comes the fun part:

Perhaps the most difficult aspect of building a side project is deciding what the app should
actually do… this is why I suspect so many people fall back on TODO lists, weather apps and
movie finders.
Dig into the API you’ve chosen in step 1. What are some interesting features you can leverage?
For example, the city of San Francisco used to offer an API to search for violent crime which
returned the coordinates of crime events. Displaying that information on a map would be
interesting or pairing it with a graph to display crime trends could be useful as well.

Map out the basic user flow.

Do they need to login?

What is the first screen they are greeted with?

Draw some crude sketches of the main screens you need to support. Don’t get too caught up in
the details of things like forgot password flows or anything other than the MUP (minimum usable
product). What are the must haves? Focus on those as they can take longer than you expect.

6. Hosting
Netlify? Heroku? Vercel? Other?

Just use AWS. Nearly every company uses AWS for hosting. There are free tiers on AWS and
using services like EC2, Amplify, Code Pipelines and Lambdas will give you some hands-on
experience in the devops process.

Using AWS is actually where I found the most value as a front end focused developer. The
exact same processes I learned when deploying my front end and API apps, I was able to apply
to my current role as a developer. I could speak more intelligently with our devops engineers
and add value to the discussions we had around pipeline issues and troubleshooting.

Wrapping Up
It can be tempting to use ALL the new technologies when building a side project. I suggest
picking 50% new technologies and 50% familiar choices. Going all in on a brand new stack,
language, deployment process and database layer can be overwhelming. The high level goal is
to build something complex which you can deploy and iterate on.

You’re going to learn a hell of a lot more following this process than another TODO app. Good
luck!

Your Turn

Fill out the sections here to get a clear outline of the project you plan on making.

1. API

_______________________________________

2. Front end framework


_______________________________________

3. Back end stack

_______________________________________

4. Authentication

_______________________________________

5. CSS library

_______________________________________

6. User flow tool (figma, Excalidraw, a piece of paper, etc)

_______________________________________

7. Hosting/Deployment (AWS, Vercel, Heroku, etc)

_______________________________________

8. Now build that sh*t!

Step 8.5 - Join Parsity and build cool sh*t with me. Apply here.

You might also like