Skip to main content Link Search Menu Expand Document (external link)
Software For Love

Challenges: Software Developer

Hey Candidates! Glad you could make it :)

We have for you a few small challenges that shouldn’t be too difficult to complete!

First and foremost:

  1. Create a Github account
  2. Learn about Github
  3. Set up Git

Now that you’ve gone over the basics, let’s get our hands dirty! Here’s your challenge:

Website

Node

We need to get used to working with node.js!

  • Node.js Install: (Win/macOS) https://nodejs.org/en/download/

    We’ll be using TypeScript (we’re going to be using TypeScript since it removes a lot of ambiguity!)

Node can be hard to install/get used to - you’re going to have to get comfortable using the command line!

You should be able to run npm in your command line after installation.

Gatsby & Yarn

Once you’ve installed node on your machine, you’re going to install Gatsby.js!

You’re going to run this command in your command line: npm install -g gatsby-cli

You should now be able to write gatsby -h to get the gatsby command line help menu!

We’re also going to be using yarn as our dependency management tool rather than npm because it’s cooler.

npm install -g yarn

Template

After that you’re going to download this template through your command line via:

gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default

You should see a new folder called gatsby-starter-default.

cd into it and run gatsby develop to run the website on your localhost!

Tinker around with it a bit! (check under /src for js files).

Challenge

This is the most crucial part. Now that you have your website up and running, we want you to incorporate a nav bar in the header of the site. The nav bar should be able to navigate between the homepage, “Page 2” and the “Go to using Typescript” pages on the current site. Make a new branch from your main branch in your Github repository. Once you’re done, make a pull request and merge your changes back into the main branch. You can make the header as sophisticated as you want, but we’re going to assess only the functionality of the nav bar, and look at coding practices you have employed in your solution. Designing a clean header will earn you bonus points!

Deploying

After fiddling around with the template! You’re going to deploy it using Netlify!

Upload your code to a git repo!

Follow the instructions on Netlify to connect and deploy your application. Make sure to ask for help if you need any!

Check https://sesanotes.netlify.app/ to see a site developed with Gatsby and deployed with Netlify!

Submission

Submit a link to your Github repository through email to team@softwareforlove.com. Add a README.md to the root of your repository to state your name and any other relevant pieces of information you want to convey. If you’ve used code from an external source then make sure to list it in the README as well!

Summary

So you’re going to:

  1. Add your name the proper way to the file in Git! (We’re going to get merge conflicts based on the order we submit so get ready to deal with those!)
  2. Install node/gatsby/yarn
  3. Challenge: Implement a nav bar that navigates to the 3 pages of the site
  4. Create a Netlify account and deploy your own website
  5. Send a link to your Github repository through email to team@softwareforlove.com.

This should be completed within 7 days of you being assigned this task!

Good luck!