👨‍💻 Crafting the Ideal Portfolio for a Junior Frontend Developer

Introduction

Landing an entry-level frontend developer job can feel like a mountain climb these days! 🧗‍♀️ However, with a stellar portfolio and a sprinkle of luck, you can certainly make it! 🍀

What Makes a Strong Junior Developer

What makes a strong junior developer, you ask? I'd say, at the bare minimum, having at least one CRUD application in your portfolio. CRUD stands for

Create (e.g. Add a new article to your blog platform),
Read (e.g. View the details of an existing blog post),
Update(e.g. Edit the content of a blog post you've previously created),
Delete (e.g. Remove an outdated or irrelevant blog post from your platform)

The four basic operations you can perform on any data. Besides that, showcasing various marketing or landing pages developed in your preferred framework or library can go a long way.

What Your Portfolio Could Look Like

For clarity, your portfolio could look something like this:

A CRUD application with both authentication and authorization
A fictional software house's marketing website (with multiple pages)
A portfolio website for a fictional photography studio
A blogging platform with neat RichText features integrated with a popular CMS (Contentful, Sanity).

Why Multiple Marketing Pages

Wondering why multiple marketing pages? The logic is simple: you want to be useful from day one. Think about your actual job duties - CSS, styling, perhaps integrating CMS. By having a diverse portfolio, you're simply preparing for your everyday tasks.

Some might jokingly refer to such developers as Coding Monkeys, and there's some truth in that. Yes, being a developer means more than just writing lots of code, but when you're just starting, this is a good first step. It's a simple way to bring value to a company without spending many years learning everything that makes you a complete engineer.

Requirements of the CRUD App

Let's dive into the requirements of the CRUD app that will make your portfolio shine ✨:

Even as a frontend developer, make your app full-stack. You're likely to work with cloud databases and auth providers in real life project. Having a bit of backend know-how is vital unless you aim for a corporate or product team with more rigid roles.
Your app doesn't have to be coded flawlessly, but it must work. If you don't know better, workarounds and hacks can be used, but common edge cases, like network errors, should always be handled gracefully. Add some ErrorBoundaries and spinners to make the app seem more professional.
Beauty matters! Doing design all by yourself might not give the best result. I suggest using commercially used tools like Figma Design Systems under MIT licenses or libraries like UI ShadCN. They offer well-styled elements with great accessibility and aesthetics.
Lastly, detail your app well in the README. It's one thing to deploy an app and another to make it easily accessible. Credentials in the README, for instance, make it easier for others to explore your app beyond the login screen.

Don't Sweat About the App Idea

Regarding the app idea - don't sweat it too much! It's mainly a showpiece, not your billion-dollar startup. Use an idea generator, pick a concept that tickles your fancy, and start coding!

Choosing the Right Technology

The tech you use matters as well. Smaller firms would likely prefer candidates familiar with their stack. So, if you're applying to a software house that uses styled components, learn and use styled components.

If it's a Next.js role, don't use React + Vite or Vue + Nuxt.js. Embrace Next.js and exploit its features.

The challenge comes when you're applying to multiple firms with diverse stacks. In that case, go with the most popular tools. Check npm installs for reference. So, choose Redux over Zustand because, well, there's a higher chance you'll encounter it in a commercial project.

Conclusion

If you have any questions don't hesitate to contact me directly on LinkedIn.

Happy coding! 👩‍💻👨‍💻