DEV Community

Cover image for Want recruiters attention? Build this πŸ”₯ project in ⌚ 5 minutes to πŸš€ your portfolio!

Want recruiters attention? Build this πŸ”₯ project in ⌚ 5 minutes to πŸš€ your portfolio!

Brandon on October 26, 2020

So you're ready to start creating a portfolio but can't think of any ideas? Here's one AMAZING idea to demonstrate full stack skills and impress an...
Collapse
 
wannabehexagon profile image
ItsThatHexagonGuy

It'll take just 5 minutes if you copy/paste everything from the post

Collapse
 
nlabrad profile image
Nico

Might as well fork it and call it yours

Collapse
 
brandonkylebailey profile image
Brandon

Thanks for the comment Nico πŸ˜„ this project isn't hosted on my Github at this time!

Thread Thread
 
nlabrad profile image
Nico

Don’t get me wrong, I love the content, it just feels like faking it. If I were to put this and get attention by a hiring manager, I’d be lying if I said I knew how I got to make this to work lol

Thread Thread
 
brandonkylebailey profile image
Brandon

Not at all! I appreciate that! You're completely right! the idea is to get something built as quickly as possible and use that to develop and expand their (who ever builds this) knowledge. When i first learned how to code it took such a long time for me to understand concepts and tools because i just didn't build any real life projects!

Collapse
 
fomenkogregory profile image
Greg

Even so, it won't. Setting up mongodb, installing dependencies... 20 minutes at least. :|

Collapse
 
brandonkylebailey profile image
Brandon

Thanks for the comment Mydrax! It might take just 5 minutes if you're a fast reader πŸ˜„

Collapse
 
drcat7 profile image
Cat

I think you should expand your opening paragraph to make it clearer what is being built with this project. You can guess it's a URL shortener with "mkdir url-shortener", but it would be good if this was written explicitly, and also a few words on the features/functionalities that will be implemented.

Collapse
 
brandonkylebailey profile image
Brandon

Thanks for the feedback! Those are some solid suggestions and I'll definitely implement them! πŸ˜„

Collapse
 
z2lai profile image
z2lai

Nice example code with comments, but I think you forgot to mention what the heck you are building. Also, it looks like you didn't include how to set up the MongoDB database.

Collapse
 
brandonkylebailey profile image
Brandon

Thanks for the comment z2lai! You're right, i could have made it more clear in the introduction what was being built. It is mentioned in the project set up section however πŸ˜„ And you're right! my previous blog post mentions this! hope that helps πŸ˜„

Collapse
 
oscarmrom profile image
Oscar • Edited

I think it would be helpful to link to your previous post for people that want to run the entire application you walk us through. Well done!

Thread Thread
 
brandonkylebailey profile image
Brandon

That's true! I'll make sure to improve things with my next blog post. Thanks for the feedback! πŸ˜‡

Collapse
 
lexiebkm profile image
Alexander B.K.

"Want recruiters attention ?"
Do you think this will be enough when the recruiters want to see some skills in React/Angular/Vue ? We know a lot of job requirements state this thing among other things.
For me, using the same project, in order to enhance impression for them, I may replace all related codes in front end with codes written in React + Bootstrap 4.
As for backend :

  1. I will use mySQL, with or without ORM, instead of MongoDB.
  2. Beside Express, I will probably try Hapi too. So there can two code versions : one written with Express, the other with Hapi. One thing that I like in your approach is that you use MVC pattern, although only model and controller. I am quite familiar with this architecture pattern, because in my current real project (not in github), I use PHP + Laravel. I am relatively new in Node.js, and actually still learning, so maybe I will write this Node.js project in github. Of course I will try it locally before deployment.

Thanks for sharing your idea and approach in creating a portfolio.

Collapse
 
hoggworks profile image
Brian Hogg

On my browser, there's a weirdly huge graphic repeated after every step; anyone else seeing that?

Collapse
 
andyinpembs profile image
andy • Edited

I saw it in Vivaldi so pasted the url into chrome where it seems fine.
Tried to upload an image but for some reason that's not working...

Collapse
 
brandonkylebailey profile image
Brandon

Hey Brian! Thanks for leaving a comment! Can you share what this graphic looks like? What browser are you using? Thanks ! πŸ˜„

Collapse
 
hoggworks profile image
Brian Hogg

It seems like it's looking fine now; maybe there was a dev.to issue that got resolved, I didn't take a screenshot when I noticed the issue, unfortunately. The image I saw was black with white braces, sort of like an icon you might use around a QR code in an icon to denote an ability to scan, but with nothing inside it.

Collapse
 
lexiebkm profile image
Alexander B.K.

The 1st time I load this page, I experienced the same thing. After I reloaded, everything was fine.

Collapse
 
maxberko profile image
Max B

Hey Brandon,

Cool tutorial. How do you start the project locally ?

Thanks

Collapse
 
brandonkylebailey profile image
Brandon

Great question Max! Simple run node server/index.js in a terminal from the root of your project!

Collapse
 
oscarmrom profile image
Oscar • Edited

Including this in the article may be helpful along with how to run the frontend on a browser (i.e. In your browser address bar navigate to "localhost:8080/. I've learned that we should assume readers know the bare minimum and I think your guide does a good job so far. Just a couple more bits of information for the newcomers.

Thread Thread
 
brandonkylebailey profile image
Brandon

Hey Oscar thanks for commenting! That's a very good point and I appreciate the feedback! I'm going to take all this on board for my future posts and hopefully improve! 🀯

Collapse
 
andyst81 profile image
andyst81

I like this project. It's very similar to a freeCodeCamp project in the API and Microservices course, which is one of the certificates I enjoyed the most.

I've been thinking of going back to my answer for that activity and personalising it. I might just do it after reading this. Thank you OP.

Collapse
 
svda profile image
Sander van den Akker • Edited

Very nice. In order to really impress a recruiter you could consider TDD and add some unit tests.

Collapse
 
brandonkylebailey profile image
Brandon

Very true! Thanks for your comment Sander ! πŸ™Œ

Collapse
 
pdelcogliano profile image
Paul Delcogliano

I think this is a great, fun, project. Would you mind if I port it to .Net and make it available on GitHub?

Collapse
 
brandonkylebailey profile image
Brandon

Go ahead!

Collapse
 
pdelcogliano profile image
Paul Delcogliano

Hi Brandon,

It took me a while longer than expected, but I finally have a working port of your app in .Net Core. I am planning on a series of posts to describe my project. I also made my source code available on GitHub. Would you mind linking to my Dev.to post and GitHub repo? Here are the URLs: dev.to/pdelco/a-reference-applicat... and github.com/pdelco/m-url for generating shortened URLs

I appreciate it!

Collapse
 
ng_update profile image
Kieran

Nice Project. It reminds me of the Url Shortener on FreeCodeCamp. This took me MAYBE in minutes real-time to crank out, with typing and adding notes. The title is "Build it in 5 minutes", not "Hold my Hand as I walk you through the finer points of Express", so I'm not sure why people are complaining that you don't go into explicit detail regarding setup...
If you can't kick this little app out quickly, you're probably not ready to talk to recruiters.

Collapse
 
brandonkylebailey profile image
Brandon

Thanks for commenting Kieran!

I actually haven't seen that one so I will have to check it out!

I appreciate the support! I think many people have viewed the post with different expectations of how much support this post would provide for the more junior devs out there! Which is totally valid! I'm working to maintain a balance to not bore the more experienced viewers whilst still being able to provide value to the juniors! πŸ’©

Collapse
 
imacchiavello profile image
imacchiavello

Thank you for the tutorial brandon.

Collapse
 
brandonkylebailey profile image
Brandon

Thanks for the comment imacchiavello ! πŸ˜„

Collapse
 
webdevinci profile image
webdevinci

Very nice. Add the host name for 'm.url/' (micro url) to point to 'localhost:8080/' to make it more 'micro'

Collapse
 
brandonkylebailey profile image
Brandon

Hey webdevinci! Thanks for the comment! that is something i wasn't aware of and really like actually! hopefully someone else sees this too! thanks! πŸ˜„

Collapse
 
whitewarrior profile image
White Warrior

Cool

Collapse
 
brandonkylebailey profile image
Brandon

Thank you!

Collapse
 
bennycode profile image
Benny Code

Cool project. If you don't mind I will create a TypeScript version of it. πŸ˜ƒ

Collapse
 
brandonkylebailey profile image
Brandon

Thanks for commenting! Excited to see that!

Collapse
 
jenueldev profile image
Jenuel Oras Ganawed

wow, this was a nice Idea. Thanks, @brandonkylebailey , More content like this is very useful. Create more sample projects where people will learn new Ideas.

Collapse
 
leomjaques profile image
leo πŸ‘¨πŸ»β€πŸ’»

I'd first put what we are building at the top of the post. I only figured it out when at the bottom of it, with the images. I will give it a try!

Collapse
 
lyavale95 profile image
LyAVALE95

5 minutes to git clone all the stuff (kidding, thanks!)

Collapse
 
brandonkylebailey profile image
Brandon

Haha no worries! Thanks for commenting πŸ˜ƒ

Collapse
 
dostuffthatmatters profile image
Moritz Makowski

What is this? Why isn't there a πŸ‘ŽπŸ» button?

Collapse
 
brandonkylebailey profile image
Brandon

Thanks for the comment Moritz! πŸ˜„ You'll have to take that up with dev.to πŸ˜