Fullstack Blog Post Challenge

At Fullstack, we write substantial, instructive, code-based tutorials and you'll be expected to create working code demos with an accompanying blog post that explains the code.

Below, we'll specify the challenge and give you some writing tips along the way.

Challenge Overview

As you know, in Angular we use a router to switch between pages. Sometimes we want to limit which pages a user can navigate to. For example, if you have an admin page at /admin, a regular user should not be allowed to see that page.

At a high-level, your challenge is to create a blog post that explains how to protect routes in Angular with accompanying source code.

I'll explain more of the specific below, but first, take a look at these examples of some of the other blog posts we have written.

Example posts

• Tutorial: Building Redux in TypeScript with Angular
• An Introduction to Hooks in React
• Beginners Guide to Using HttpClient in Angular

The Challenge Requirements

The post should be at least 1,000 words, but you're free to make it even longer (some of the posts above are 4k+ words, which is great). We don't count the words in code -- only in your text (E.g. 1,000 words plus code). But ultimately word count is a guideline and not the most important thing.

The most important thing is to be clear, specific, insightful, and helpful to our readers.

Things To Include

• An introduction summary that answers the question: "What will I learn by reading this post?"
• An example of when you would need this feature (and the problems with not using it)
• An overview of the options
• A walk-through explanation of the interesting parts code (the bulk of the post)
• Security considerations
• A summary
• Where to go next
• References

BONUSES

• Screenshots, if applicable
• Asides that answer anticipated questions (BONUS)
• Diagrams (software-created or pencil and paper is fine) (BONUS)

TIPS

• Use headings generously, they make scanning easy
• Use bold and italic to emphasize ideas -- this also makes scanning easy
• Code terms should be in code formatting
• Keep your code blocks short -- Aim for 10-20 line. 30 lines of code is usually too many.
• You can embed a code demo if you want -- just drop the embed code in the post
• Be consistent in your code formatting. We recommend Prettier

Requirements

• The post is written in Markdown
• The code for the Angular app(s) should run
• Proper spelling and grammar

Collaboration

Often our posts will involve collaboration back and forth to get everything right.

We suggest that you:

• Do a bit of research on what common problems people have (e.g. protecting routes in this case)
• Draft an outline about what you'll cover, and send it to us (via Upwork messages / Slack / Whatsapp)
  • Letting us review the outline helps us course correct early-on
• Write the code examples. (While you do this, take notes about anything tricky - this is great material for the post!)
• Then write the post

Instructions

How to attempt this challenge:

1. Create a new repo in your Github account and note the git URL
2. Clone this repo
3. Solve the challenge
4. Add your blog post and your code example into this repo (no node_modules)
5. Set your new repo as the origin: git remote set-url origin ${your repo url}
6. Push your solution to your repo

You must follow these steps for your solution to be accepted -- forks or other methods will not be considered.