TechLadies Bootcamp 4 - Technical Task Submission

• 1. Introduction
• 2. The Technical Task
  • Want to increase your chances of being selected for the bootcamp?
  • Want some Brownie Points?
  • Sample Application
• 3. Submitting Your Entry
• 4. How do I get started?
  • Resources
• 5. Questions?

1. Introduction

The TechLadies Bootcamp #4 is a 12-week part-time accelerated learning program designed for women who wish to be professional programmers. Participants will be guided by industry experts to create products for Sustainable Solutions Network Singapore (SSN Singapore) OR Centre for a Responsible Future (CRF) using JavaScript technologies.

Visit the bootcamp info page for more details.

2. The Technical Task

As part of the application process, you will need to complete a technical task. This will help us evaluate your technical capabilities for the bootcamp. Don't let the technical task scare you! We are here to help you acquire the skills you need to complete the task with 3 prebootcamp workshops covering the basics of HTML, CSS, JavaScript, React, Express, and MongoDB and walking you through building a simple web application, as well as a list of online resources below.

Technical Task: Create a to-do list web application using ReactJS.

This application should have the following features:

1. An About Me page with a few paragraphs describing who you are, why you want to be part of the TechLadies Bootcamp, and include one image (it can be a photo of yourself or anything you like (cats are always a good option!))
2. A To-Do page where a user can add to-do tasks to a list, update existing tasks, delete existing tasks, and mark tasks as done.
3. A navigation bar which allows you to navigate between the About Me and To-Do page.

This need only be a pure front-end application, we do not need you to store the data to a database (so it's fine if your to-dos disappear when you refresh the page).

Hat tip: To stand out from the rest, you are highly encourage to not follow a single online tutorial to the T. Do read up on multiple resources to understand the concepts or google your way to finding how to accomplish what you want to code.

Want to increase your chances of being selected for the bootcamp?

Complete the Bonus Task for extra points! The Bonus Task builds on top of the Technical Task and is more complex.

It's not mandatory to complete this task and skipping this task does not preclude you from being accepted for bootcamp. But if you're itching for a challenge, try this!

Bonus Task: Integrate your to-do list web application with a NodeJS server (backend) built with the Express web framework, connected to a MongoDB database.

This application should have the following feature:

1. Your to-dos should be saved to a database. That means you should still see your to-dos after you refresh the page.

Want some Brownie Points?

To stretch your knowledge even further (remember, we are here to help!), try the following:

Brownie Points: Deploy your web application to Heroku.

This will require knowing how to use a version control system such as Git. You can complete this task whether you're doing only the Technical Task (to deploy a pure front-end app), or the Bonus Task (to deploy the full-stack application).

Sample Application

Here is a link to a sample technical task application (do note that it may take some time for the webpage to load). This is just to give you an idea of what you can build and what your final product might look like. In no way are we expecting you to replicate this or do anything in a similar style (we don't want to limit your creativity!). However, it is also perfectly fine if you choose to do so.

3. Submitting Your Entry

1. After you have finished building your personal website, you will need to share the source code with us. You should do so:

• Through a link to a Git repository on GitHub or Bitbucket (its free!)
• Through a link to a Zip file on Dropbox or Google Drive.

2. Visit [fill in url for new form here]
3. [change instructions accordingly] Under section 2, include the URL (web address) of where we can find your file.

4. How do I get started?

Join us at our upcoming pre-bootcamp workshops where we will teach you the skills to complete the Technical Task!

1. Workshop #1 on 14 July, 1 - 6pm: [url to RSVP]
2. Workshop #2 on 21 July, 1 - 6pm: [url to RSVP]
3. Workshop #3 on 28 July, 1 - 6pm: [url to RSVP]

Remember, we have lots of online resources to help you out!

Resources

Setting up your machine for development

• Please go through our handcrafted setup guide here!

JavaScript

• Introduction to JavaScript on Codeacademy
• ES6 tutorial for beginners

React

• Official React tutorial
• Building a todo app with React
• Getting started with React with Create React App
• A Comprehensive Guide to Building Apps with React

Express

• Hello world Express starter
• MDN Express and NodeJS tutorial series

React + Express + MongoDB

• Create React App with an Express backend
• React, Express, MongoDB App starter code

MongoDB + Mongoose

• Installing MongoDB on OSX
• MongoDB Getting Started
• Integrating Express with MongoDB
• Mongoose Docs
• Installing MongoDB on Windows and Ubuntu
• Integrating Express with MongoDB in Windows

React + Heroku

• Deploying Create React App to Heroku with zero configuration

React + Express + Heroku

• Deploying a React + Express App to Heroku
• Running a Create React App + Express App to Heroku

5. Questions?

If you have any other questions regarding the task, do contact Huimin at [email protected] or Shirlaine at [email protected].

To ask a technical question or get help for bugs you're facing, please join our Facebook group and ask them there.