guildcrafts / web-development-js Goto Github PK

Craft repository for Web Development with JavaScript

Home Page: http://jsdev.learnersguild.org/

License: Other

Ruby 52.45% HTML 32.30% CSS 15.24%

web-development-js's Introduction

Craft: Web Development with JavaScript

This repository stores information useful for learning the craft of web development and primarily serves as our goal library.

This is a shared resource, and it is collaboratively developed by all learners. To learn how to contribute, read CONTRIBUTING.md.

Getting Started

Authoring and Editing Goals

If you are just authoring or editing goals, then you can make edits directly to the files in the _goals/ directory.

Goals are just plain-text Markdown files, which when published to the master branch are rendered on the production site: http://jsdev.learnersguild.org/.

To preview the goals as they would appear on a browser, however, you'll need to set up your own development server.

Setting Up a Local Development Server

The site is published on GitHub Pages using Jekyll. Jekyll is a package for the Ruby language. You don't need to know Ruby, but you do need to have it installed in order to preview your changes locally.

Clone this repo and change into the directory

$ git clone [email protected]:GuildCrafts/web-development-js.git
...
$ cd web-development-js

Install rbenv and ruby-build plugin with Homebrew

$ brew install rbenv ruby-build

Install the version of Ruby specified in .ruby-version file

$ rbenv install

Install Jekyll and Bundler gems

$ gem install jekyll bundler

Install the dependencies listed in the Gemfile

$ bundle install

Start the server and auto-update when changes are made

$ bundle exec jekyll serve --watch

Make any changes and review your results

Goals

This repo is the home to our goal library. Goals are stored as files in the _goals/ directory.

You can create new goals! Before you do so, please review the instructions in CONTRIBUTING.md, especially the Authoring Goals section. Use the goal template to author your new goal.

If you don't have time to author a new goal, but you still think it should be a part of the goal library, please make a goal suggestion by submitting a new issue. Read the Suggesting Goals section of the CONTRIBUTING.md file to learn more.

Playlists

Playlists are possible paths to becoming a full-stack JavaScript web developer. They are collections of goals organized by other learners to provide meaningful courses of learning.

All playlists are stored in the playlists directory.

This directory is a collection of trails intended to help travelers in making their own. There are as many paths as there are people aspiring to become one. Ultimately, every aspiring developer must learn to navigate the terrain on their own terms and create their own path if they are to become life long learners.

To author your own playlist, submit a pull request your playlists added to the playlists directory. To make suggestions/updates to an existing playlist, submit a pull request, and tag the playlist's owner.

web-development-js's People

Contributors

Stargazers

Watchers

Forkers

looknotime

web-development-js's Issues

IRL Community Project Sharing

Description

Provide a brief, high-level overview of what the final product (artifact) of this goal is. Include any relevant resources or dependencies here.

Context

_Why is this goal important?
It brings multiple people in a community together to share skills, assets, and other resources.

How is it useful? What questions will it raise?_

Community can post projects through a form and inputted into a database
Projects will be map - geolocated

Specifications

List of specifications (specs) for the completed goal. These are declarative sentences (statements) describing some quality or behavior of the final product.

Community can post projects through a form and inputted into a database
Projects will be map - geolocated

Spec Three.

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Infinite Image Scrolling Website

Description

Provide a brief, high-level overview of what the final product (artifact) of this goal is. Include any relevant resources or dependencies here.

Context

Why is this goal important? How is it useful? What questions will it raise?

Specifications

List of specifications (specs) for the completed goal. These are declarative sentences (statements) describing some quality or behavior of the final product.

Spec One.
Spec Two.
Spec Three.

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Scramble Word Game with HTML/CSS/JS

Description

Make a small Scrabble type game for a single-page web app.

This game would be made of three words. You may style these in any way that you would like on the page.

The program needs to scramble the three words, then the end user would have to unscramble the three words.

If they are not successful, then they have to try again. They should have unlimited tries.

Hint: think about arrays, if else statements. Code would be HTML/CSS/Javascript_

Context

This goal is important since we need to go ahead and continue our use of HTML, CSS, and Javascript!

Make sure to look at templates if you need to, but you should create the code from scratch.

Specifications

Code can be viewed as a web page.
There are three words in the program that randomly scramble on page refresh.
User is prompted for an answer.
User is alerted of game results.
Basic CSS styling is used.

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Learn About Programming Competencies

Description

The artifact will be a gitbook which documents what you have learned about the big picture of learning to program. You will do research, not just reading docs and taking tutorials but actually making your own list of competencies, reviewing things you and others have built, connecting theory and practice.

Context

Because although you learned a lot from past projects, more is possible. This SHOULD be part of code quality, part of our overall process and your education.

Imagine having a chance to go back to your past four projects, compare what you learned and how you learned it. Bringing the puzzle pieces together. Finding gaps. Finding whole new puzzles that you haven't touched. Getting curious.

Specifications

Each group member has their own "Learning To Code" gitbook
Those gitbooks may share some structure, but the content is different to reflect individual thought
Each gitbook includes some discussion/review of the resources Shereef posted [see below]
Each gitbook includes your own list (or better yet, mindmap) of programming competencies
Each gitbook includes a review of your last four projects (at least four) and which of those
competencies you learned

Optional

Get clear on what "code quality" means to you; rate your last four projects and prepare to incorporate what you learn into future projects
Take a past project that was left incomplete and move it forward in some way
Consider if you learned anything about non-technical aspects of programming (project management, group dynamics, productivity, workflow] and add those to the gitbook

Shereef's Notes

Folks, here are some decent maps:
http://competency-checklist.appspot.com (not specific to web developer, but relevant)
http://www.theodinproject.com (ruby on rails but lots of stuff applies to all web development)
https://developer.mozilla.org/en-US/Learn (incomplete, but a decent effort)
http://docs.webplatform.org/wiki/concepts/general_programming (don't skip over the programming parts)
http://javascriptissexy.com/how-to-learn-javascript-properly (pretty opinionated, I like it!)
https://bento.io/grid (great grid of resources, and a decent table of contents. The content is open sourced here: https://github.com/bento-io/collection/blob/gh-pages/content.json and here: https://github.com/bento-io/matrix)
https://www.w3.org/community/webed/wiki/Main_Page (good overview table of contents)

Finally, here's a dump of everything Tanner and I took a look at:
https://docs.google.com/spreadsheets/d/18zz17nAos3Vv4EzxP5McBRX9LsdojILXemG_oo0sMdo/edit?usp=sharing
Choose File

So yeah, lots of maps!

GuildCrafts Goal (Re)Viewer App

Description

A repo that pulls in our goals/issues and displays them while maximizing a great UX.
Basically, you need to duplicate the functionality of a Rails app: GitHub repo, live on Heroku.

Context

Serving an actual customer is a huge part of writing good software. If you take on this goal, you will be the customer, and have access to 19 other users - so you can talk to them, and learn about good User Experience Design (UX).

Required Specs (Must Have)

Optional Specs (Nice To Have)

Auth is handled through GitHub Oauth
Add another view, such as goals-as-cards and/or a nicely detailed show page for goals
Integrate with echo to pull in info of who's already completed one goals (instead of having to enter it manually as currently done)
Be creative! Anything you can think of, that you or users would want
Write all your code in ES2015
Add unit and feature tests
Create an iOS app

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Project Euler

Description

Project Euler is a very challenging programing project that will improve your JavaScript skill.

https://projecteuler.net/archives

Context

This is a very good fit for people who has done (NPM module for common JS utility functions).
after finishing each challenge you would be able to see other programmers code who has done the same challenge. This would help you to compare your code with other programmers to see other approaches to solve the problem.

Specifications

Complete at least 15 challenges.
write test for each challenge.
include two other possible approach from other programmers.
The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Tarot Card Self Reflection Web App with React

Description

The tarot is a pack of playing cards (most commonly numbering 78), used from the mid-15th century in various parts of Europe to play a group of card games. From the late 18th century until the present time the tarot has also found use by mystics and occultists for divination. Each card has a picture and title that represents a specific concept or archetype. The belief in divination associated with Tarot focuses on the prospect that whatever cards are dealt to the participant will be revelatory.
It can also be a tool for self reflection, which will be the primary purpose of the app.

Write a simple tarot card reader using React.
Simple Functionality Example: http://wildandbad.com/cards/

Context

Sometimes using metaphor and archetype is a good way to dive into your own psyche.
User experience is a critical part of any successful app and this project will use front end

Reflection Questions
Do you need a database or Oauth log in?
What does quality code look like?

Learning:

Reinforce back end and front end development skills.
build skills in React
deploy app using heroku
Learn about user experience.

User Stories & Specifications

As a User...

I can access the app the web.
Choose 1 of (at least) 3 card layouts.
Learn about each card layouts.
Sort cards into the layouts face down and click them to turn them over.
I can get self reflection questions based on my card results.
I am pleased by the user experience. The app is both attractive and intuitive to use.

Additional Specifications:

Create a library of Tarot cards and write a function that randomly presents them
If you use any frameworks or code libraries cite them.
Use design & UX principals to make the app clear and easy to use.
Use Node to create a back end
Use React Native to create and deploy a functional phone app.
This is a multi page app:

Optional Goal Ideas

NOT use any front-end framework [no react, do it from scratch]
Use react native to deploy as a iphone app.
Use Test Driven Development using Jasmine.
card flipping/sorting animations

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Emoji cipher with ES2015

Description

Let's build a cipher using emoji. High five! 🙌🏽

To complete this goal, you'll create a Node.js module that exports two functions: one to encode a string of alphanumeric characters into emoji, and another to decode an emoji message to the original string.

Here's an example usage:

import {encode, decode} from "emoji-cipher"

encode("secret message")
// => "😸🏃🐴👿🏃🤓 🐥🏃😸😸🌵🌎🏃"

decode("😸🏃🐴👿🏃🤓 🐥🏃😸😸🌵🌎🏃")
// => "secret message"

If you're not familiar with Node.js and/or ECMAScript 2015, you'll need to do some research to become familiar with these technologies. For compiling, consider using Babel.

Context

A cipher is "a secret or disguised way of writing; a code" (source: Google). Technically, a cipher is a mapping between two sets of symbols.

One of the earliest and simplest ciphers in history is something you may have played with as a child: a Caesar cipher.

Translating between different representations of data is a such a common task in programming, and a cipher is a good (and fun) way to become familiar with this process.

As you work on this goal, consider the following questions:

What does it mean to encode or decode something? Where else are these processes used?
Which characters will the cipher support? How will the mapping between characters and emoji be represented?
How should the functions respond to invalid input? What are the possible errors and how should they be handled?

Specifications

Code is packaged as a module that exports (at least) the two functions encode and decode.
Exported functions can encode and decode alphanumeric characters to/from emoji.
Tests for both encode and decode functions are included and passing.
All source code is written using ECMAScript 2015 syntax.
Source code contains a README.md file with instructions and example usage.

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Income Share Agreement Web Calculator

Description

Create an online calculator that allows a prospective Learners Guild applicant to determine various outcomes of opting in to the Income Share Agreement (ISA) and stipend.

Customer: for deployment on Learnersguild.org
User: a prospective applicant

Context

Why is this goal important? How is it useful? What questions will it raise?

This goal is important because it has an actual customer (Learners Guild) and actual users (prospective applicants). This is an opportunity to analyze and explore UX. How can one effectively, clearly, visually communicate these complex mathematical equations?

For many applicants, the concept of an ISA is new, and the details around how it works and the financial implications can be confusing.

An example of a spreadsheet designed to run some of these calculations can be found here.

This calculator can help applicants make informed decisions around the ISA and Living Allowance.
Changing variables, like salary and amount of stipend, can result in thousands of dollars of difference in the amount of tuition paid.

Required Specs (Must Have)

Optional Specs (Nice To Have)

The app is responsive and mobile-friendly.
Calculator includes an annual raise variable that defaults to 5%
The app compares ISA outcomes with upfront tuition.
Variables will have (?) hover links to provide more background about the components of the ISA and stipend.
Team has interviewed at least three potential users about features and UX.
Auto update
Save the sheet
Print out report
Uses same UI elements + Bootstrap theme of Learnersguild.org (link will be provided)

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Simple Book Store

Create a simple content management system that allows users to view, add, delete, and update books to a bookstore application.

This goal is published. Check it out at: http://jsdev.learnersguild.org/goals/69

Mobile Friendly Community Money Sharing App

Description

An app that allows communities to share monetary resources based on how much income they have and need. This idea is based off a SuSu or Tanda method of loan circles popular in some Black and Brown communities (here and abroad).

APP will be able to:

SIGN IN / AUTHENTICATION
JOIN A NETWORK
FIGURE OUT HOW MUCH YOU CAN SHARE
MOBILE FIRST

DATABASE:

USER INFO / INCOME SHARING INFO
NETWORK INFO & RELATIONSHIPS BETWEEN USERS

CRUD:

USER WILL BE ABLE TO CREATE, READ, UPDATE, DELETE - user info and income sharing information, network information.

User Story

JOJO wants to join **** and goes to the homepage and then clicks to a new user form.

New user JOJO clicks to the form to fill out an application. The form/application includes:

A modal that includes relevant information for the group
User information is stored in a MongoDB Database
User is authenticated and allowed to log in

JOJO sees a network he wants to join. He asks for permission to join.

Relationship between users that the database determines
User is authenticated and allowed to join the network

On the network page, there is a link to an income sharing calculator. The link to the income sharing calculator brings you to a page where you enter the following financial information into a form:

Your income earned last month
Expenses from last month
Preferred shared rate

This information goes through an algorithm that puts out a number that JOJO can then agree to donate into the group's pot. They have to electronically agree to this number. JOJO is then able to see the percentage other network participants will be donating into the pot.

Algorithm is triggered after the last person enters the network (5 people)
Algorithm spits out a percentage rate for each person to donate out of their monthly income.

The next month, JOJO's financial situation has changed. He has to update his information. He has also changed his email address and moved to a new residential address:

User can delete, edit, and update his financial information
User can delete, edit and update his user information

Context

YOU WILL LEARN SO MUCH DOING THIS PROJECT!
One, lots of folks do this already --- wouldn't it be awesome to help communities trade resources more efficiently????

You will learn:

How to design a relational database
How to build your own API and connect it to a really modern/superfriendly/awesome UI
How to do oAUTH
How to write a basic algorithm (for the money sharing calculator)
How to Create Read Update Delete in your OWNNN API!!!

Specifications

Product is mobile responsive
Uses the Bootstrap design framework
Able to use dynamic data
Includes a money sharing calculator
Able to do user authentication – Log In/Log Out/Sign Up
User are able to update profile
Displays how many users are in the network
Implements an algorithm to figure out how much each person in the network must share

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

Quality Rubric

UI is clean and modern-looking [50pts]
Team uses test driven development (visible in commit history: tests are committed before or at same time as implementation) [50pts]

CAMERA APP!!! SO COOL

Description

Create an app that allows a user to take a picture, store the picture in the application and then share the location of the picture on a map. The user can also share an obscure/custom share URL to other people.

Context

Learn how to connect camera/photo taking features with an application
Learn how to save photographs
Learn how to CRUD
Learn how to use Map API's
Learn how to plot lat-long data on a map

Specifications

User can take a picture through the application
User can store photographs in the application
User can place pictures taken through the application and geolocated through Mapbox's API
User can deploy application on a hosting site
App can generate custom/obscured share URL

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

HTML and CSS Independent of Pre-existing Tools

Description

We propose completing one full project cycle with self-sustaining and unique code outside of frameworks, libraries, and pre-existing shortcuts.

Context

All projects can be created utilizing frameworks, libraries, and other pre-disposed tools. As learners dedicated to curating a deep understanding of all aspects of code, it is most beneficial to have the capability of completing one full project cycle with unique and self-sustaining HTML and CSS.

Specifications

List of specifications (specs) for the completed goal. These are declarative sentences (statements) describing some quality or behavior of the final product.

Code is written independently.
Code functions with equal quality as if it had been written with pre-existing tools.
Code operates without assistant from tools.
All links, images, and other elements are correct and live.

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Street Sweeper Tracker Site

Description

As anyone who has a car and parks on the street, it is terrible to receive a parking ticket due to street sweeping times. Especially since the street sweeper may or may not show up but the traffic ticket person definitely will make it.

Basic use flow:

Type address (or use current location using GPS)
Press enter
Show list of 10 nearby streets with sweeping times
Update map with today's and tomorrow's street sweeping streets highlighted in red on map
Notify whether or not it is clear to park on current street.
Show nearby areas where street sweeping is not happening soon (within next 24 hours)
Show parking garages or other unrestricted forms of parking nearby to park easily

Context

This goal helps the public avoid parking in street sweeping areas and search for better non-restricted parking spaces nearby to park instead.

Specifications

Be able to search for an address or use my current location to show street sweeping times
Show list of 10 nearby streets with sweeping times
Notify whether or not it is clear to park on current street
Show nearby street where sweeping is not happening within next 24 hours in GREEN on map
Show nearby street where sweeping is happening within next 24 hours in RED on map
Show parking garages or other unrestricted forms of parking nearby to park easily
Mobile friendly (usable + responsive)
Save favorite locations to track (Home, work,...)

Quality Rubric

Tested - All specs passing
Documented - Contains instructions for a user to set up app locally or how to use website
Functional - Project runs in localhost or on heroku
Structured - Directory structure allows new developers to quickly find and add files
Clearly Named - Functions, variables, files, CSS classes and ids
Abstracted - Small, single-responsibility functions leveraged for encapsulation & reusability
Git Logged - Readable and clean with clear, complete, professional commit messages
Not Commented - Unless truly necessary. No dead code, console.logs, fits/xits

Stack

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Reverse-engineered social media site with HTML & CSS

Description

Take screenshots of pages on a popular social media site (Twitter, Facebook, Pinterest), and reverse engineer the HTML and CSS from scratch.

You can copy images and inspect the page using developer tools, but avoid copy-pasting! You'll learn a lot more this way.

Get as close as you can to the screenshot.

You don't need to add behavior.

Context

Looking at the design of an interactive social media site is a great way to learn just how powerful the code that drives them can be. It is in reading and re-writing the code where we can continue to enhance our learning.

Feel free to use frameworks and other libraries, but do not copy-paste, it is crucial that in typing the code out allows you to continually read and discover how the code works.

As you code your site, you will likely encounter scenarios that you may not have expected, which is fine, it only means that you have more opportunities to problem-solve!

Specifications

Screenshot(s) of original site included in final product
Includes at least one error-free HTML page
CSS is written in its own file(s) and included in the HTML with a <link> element
Final, rendered HTML page(s) are almost indistinguishable from the original screenshot(s)

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

Quality Rubric

Code is well formatted without any linting errors [25pts]
Proper spacing and indentation are used in all HTML & CSS files [25pts]
CSS classes, ids, etc. are meaningfully named [25pts]
HTML/CSS files are well organized into a meaningful file structure [25pts]

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

CHANGE YOUR VOTE

Description

Provide a brief, high-level overview of what the final product (artifact) of this goal is. Include any relevant resources or dependencies here.

Context

Why is this goal important? How is it useful? What questions will it raise?

Specifications

List of specifications (specs) for the completed goal. These are declarative sentences (statements) describing some quality or behavior of the final product.

Spec One.
Spec Two.
Spec Three.

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Draft goal

Description

Provide a brief, high-level overview of what the final product (artifact) of this goal is. Include any relevant resources or dependencies here.

Context

Why is this goal important? How is it useful? What questions will it raise?

Specifications

List of specifications (specs) for the completed goal. These are declarative sentences (statements) describing some quality or behavior of the final product.

Spec One.
Spec Two.
Spec Three.

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Economy clicker game

Description

This project would have you reverse engineer a game that is text based.

http://orteil.dashnet.org/cookieclicker/

The above is an example.

Context

This is important because creating this game would allow you to focus mainly on an interactive language and how it interacts with the elements on the page, which change over time. You would learn how the functionality of certain parts of the code depend on each other.

Specifications

As a user, I can save the game.
As a user, I can "buy" items that increase the counter rate.
As a user, I can see the amount of "currency" I have.
As a user, I can reload my game data.
The game increases currency depending on an algorithm that calculates the rate.

Stretch Goals

Required

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Blackjack Game for the Node.js Console

Description

The goal of this project is to build an asynchronous Javascript blackjack game for the console using Node.js.

Context

This goal is designed to be completed after the user has completed another BlackJack game in javascript. The idea is to highlight the differences between synchronous and asynchronous development.

Specifications

List of specifications (specs) for the completed goal. These are declarative sentences (statements) describing a feature of the final product.

Handles basic rules of blackjack
- Bust on 21
- Player can hit or stay
- Player loses if dealer has more points but hasn't busted
- Player wins if dealer has fewer points at end of round
- Bust on 21
Manages multiple process threads
- ** seeking input from pro players - what are some good goals to demonstrate async **
The artifact produced is properly licensed, preferably with the MIT license.

Quality Rubric

What are some appropriate quality objectives for this goal? These are statements about the internal characteristics of the product that demonstrate fine design and craftspersonship, not its external features.

Game is playable and fun: 25
Code is readable and intuitive: 25

- Artifact is demonstrably asynchronous: 50

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Fake Nature Picture Sharing Application

Description

This application will allow anyone to upload images to it and will allow those with Facebook accounts to share the pictures to their accounts.

Context

There are multiple useful components to this project. The developers would need to learn to work with databases that would store information, would need to work on an authentication process so they could log in to the application, would need to be able to let users upload their pictures, and would need integration with Facebook.

Specifications

As a user, I can create an account and log in.
As a user, I can upload my pictures.
As a user, I can bring up a map and find and click the location where the picture was taken and tag the picture with the geotag.
As a user, I can view all of my uploaded images.
As a user, I can see the images uploaded by my friends on Facebook.
As a user, I can share these pictures to Facebook.

Required

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Personal portfolio site with GitHub Pages

Description

A portfolio website is a great way to showcase your work as a developer. It also doesn't need to be too complicated: a simple static page with links to projects will do just fine.

Using GitHub Pages, you can publish the site on the web for free.

There are lots of good resources on the web to support development of a site like this. For a full tutorial covering the skills you'll need to complete this goal, try the curriculum on FreeCodeCamp leading up to their Personal Portfolio Webpage, especially the HTML5 and CSS section.

Ideally, each member of your team produces their own site and you all collaborate on every site together. However, if that seems like too much, then pick just one or two team members to build a portfolio site for.

Context

Building a simple HTML and CSS "from scratch" is a great way to learn just how powerful these two technologies are, and how to wield them well.

While in most websites you'll be using external libraries, templates, and frameworks, sometimes these tools can hinder real understanding and cause confusion about what HTML and CSS are capable of on their own.

This does not at all mean that you can't look at libraries and frameworks (like Pure) for inspiration and example—by all means do so! Feel free to use anything on the internet as inspiration to help you solve the particular problem you encounter.

As you code your site, you will likely encounter questions such as:

How can a web page be organized into columns, rows, and other basic layout features?
What are all the different HTML tags and how should they be used?
Why should websites be "responsive" and how do they become so?

Specifications

Every site is published and visible on the web.
Visitors to each site can read information about the author.
Visitors to each site can see a list of projects (fine to use fake projects as placeholders).
No external CSS libraries or frameworks are used—all CSS is written from scratch.
No HTML templates are used—all HTML is written from scratch.
All links work correctly (i.e. no broken links).
All images and other external resources load correctly.

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Create a Simple Shopping Cart application with React.js

Description

Based off of this tutorial: https://scotch.io/tutorials/creating-a-simple-shopping-cart-with-react-js-and-flux

Want to learn how to create a basic shopping cart application? Want to learn how to use react.js? Then this goal is for you!

Context

This goal is important because react is cool to learn. But don't just listen to me, read these quotes from the following leaders in the industry:

Quotes about React.js

"React is a JavaScript library for building user interfaces, created and open-sourced by Facebook. It was first released in 2013, and its original slogan was, “Rethinking best practices.” Why? Because the most well-known JavaScript frameworks (i.e., Ember.js and AngularJS) at the time based their architecture on the MVC pattern, which largely focuses on separating the application logic from the view.

But the team behind React thought they had a better idea. Instead of completely separating the application logic from the view, it coupled the logic and view into one file using something called the component-based architecture, which allowed the composition of these components.

The programming community was initially a bit confused by this approach and didn’t seem to take to it. Now fast-forward to today: Both Ember and Angular, as well as some newer frameworks and view libraries, have moved toward a component-based architecture — even coupling some of the logic and the view code in the same file like React." - Code School Blog, 4/19/2016

"React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.

We built React to solve one problem: building large applications with data that changes over time."
- React Facebook Team

Specifications

Display a product with several options
Change the price when selecting an option
Add items to the cart
Remove items from the cart
Display the number of items in the cart
Display the total price of items in the cart
Display the total price for each option in the cart based upon quantity
Change our "Add to Cart" button caption to "Sold Out" and disable it when inventory is depleted for a given option
Display the cart after adding a product or clicking the "View Cart" button

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Appointment booking system

On going project

This is an ongoing project, and you'll work on top of the existing project that other learners have created.

BackEnd: https://github.com/Farhad33/appointment-backend
FrontEnd: https://github.com/Farhad33/appointment-frontend

Description

As a business owner, I want a system that allows me to add all of my employees and set their availability and available blocks of time.

As a business customer, I want a system that allows me to book an appointment for a specific block of time with a specific employee.

Context

This is important because it will provide opportunity to explore some key web development skills:

Working with a backend (code running on a server)
Working with a sql database
Rendering a complex HTML view (the calendar)
Incorporating interactive elements around a calendar view

Example Application

https://www.agendize.com/

Specifications

Customers and employees are able to sign in and sign up.
Employees are able to set their availability.
Customer is able to make an appointment for a specific service.
Customer/employee/appointment data is stored in database.
Customer should be able to see available time slots on their calendar.
Users can cancel and update appointments.

Optional Stretch Goals:

Users receive push notifications as Calendar gets updated in real time
Database is secure
Mobile friendly (responsive)
Users can check the availability of specific employees and choose those times
Employs an algorithm to choose the available employees for the appointment, so that the work load is evenly distributed

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Beastmode Rush

Description

Deliver signed Beastmode products to users via Uber's RUSH API.

Context

Why is this goal important? How is it useful? What questions will it raise?

Learn how to code for mobile.
Integrate with an API
Do a project that might actually be used (and make money?)

Specifications

List of specifications (specs) for the completed goal. These are declarative sentences (statements) describing some quality or behavior of the final product.

Integrate w/ Beastmode Inventory system (mock at first - perhaps real later)
Integrate w/ Uber Rush API
User can view a catalog of signed Beastmode Products
User can place an order through the app (via STRIPE?)
User can track order as it leaves the store and makes its way to them.

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Shared link library API with Node.js & MongoDB

Description

Create a link database with different methods for organization and sharing. Store & share learning resources, tutorials, good videos, etc.

The interface for this app will be a HTTP API that serves JSON. There will also be a minimal web UI for account creation and management.

For example, if a user wanted to get all of their links tagged with javascript, they may issue the following HTTP request:

$ curl -X GET http://www.app.url/myUsername/links?tag=javascript&token=myAuthToken

...and get a JSON response looking like this:

[
  {
    "url": "https://davidwalsh.name/es6-generators",
    "createdOn": "Thu Jul 14 14:21:01 EDT 2016",
    "tags": [
      "javascript",
      "generators",
      "es6"
    ]
  },
  {
    "url": "https://github.com/adam-s/js-interview-review",
    "createdOn": "Mon Jul 11 08:21:01 EDT 2016",
    "tags": [
      "javascript",
      "interviewing",
      "career-prep"
    ]
  },
]

Use Node.js and MongoDB.

Context

Building an application programming interface (API) for the web is a great way to learn how they work. In cases where the primary consumers of a piece of software are other programs and not human users, a user interface (UI) is overkill.

That doesn't mean that an API can ignore the rules of good design, but it is a different way to think of interface design.

There are many examples of apps and APIs similar to this one, so you'll have lots to compare to.

As you work on this goal, consider the following questions:

What is the most appropriate data model for this app?
Which requests should be available to all users? Which should require authorization?
How should different endpoints be structured? Can a RESTful interface be implemented?

Specifications

Stories:

Build specs:

Site is deployed and live on the web
JS source code is written using ES6
Client-side JS scripts are compiled using a tool like Babel.js

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

Quality Rubric

Code is well formatted without any linting errors [25pts]
Variables, functions, etc. are meaningfully named (no comments exist in code to explain functionality - the names serve that function) [50pts]
Functions are small and serve a single purpose [50pts]
Code is well organized into a meaningful file structure [25pts]
Code is reasonably tested with a test suite [50pts]

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Blackjack Console Game from Scratch

Description

Provide a brief, high-level overview of what the final product (artifact) of this goal is. Include any relevant resources or dependencies here.

Context

Why is this goal important? How is it useful? What questions will it raise?

Specifications

List of specifications (specs) for the completed goal. These are declarative sentences (statements) describing some quality or behavior of the final product.

Spec One.
Spec Two.
Spec Three.

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

3 CRUD Apps in 3 Languages

Description

The goal is to create the same web application using three different language/framework combinations: Ruby on Rails, Node.js/Express and Python/Django.

Context

Javascript and Node.js have a particular world view. We can better understand them by comparing and contrasting that world view to alternatives.

Required

Do not remove these specs - they are required for all projects.

Three different web apps are deployed using heroku
- One app is built with Ruby on Rails
- One app is built with Node.js/Express
- One app is built with Python/Django.
Anonymous users can create, retrieve, update and destroy some "things" resource
The artifact produced is properly licensed, preferably with the MIT license.

Optional

"Things" can have various attributes - time, category - be creative
Each app has at least one test

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

You Dont Know JavaScript

Description

Do all of these challenges https://github.com/getify/You-Dont-Know-JS

Context

Solidify your knowledge of the JavaScript language

Specifications

Required

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Common JS Utility Functions [Lodash]

Create a library of commonly used JavaScript utility functions by reverse engineering the popular Lodash library.

This is a sister goal to #202.

This goal is published. Check it out at: http://jsdev.learnersguild.org/goals/37

Battle Game of Coding

Description

A multilevel timed coding competition. Two players would be side by side on screen with a console each. A random generator would give them a task (make an animation, change this element, etc.). They would race to write code that accomplishes this task. Win by finishing first and having the task completed, OR by having an allotted time that both players get and whoever's code tests better/is closest to completion wins. Users can save their results with "profiles" or individual login abilities. Can be used in LG for fun and practice.

Context

This is important because it will really push us- there are multiple live users interacting with each other, testing, dynamic pages, and a need for a lot of different elements. I am open to adding things that make it harder!

Specifications

Testing for the players' code.
Users can create individual logins and save/track their past results. (Sign up, login, logout.)
Create a challenge page where players can select an opponent
Visual and aural feedback when a player wins or loses.
Challenge page has two side by side consoles (one for each competitor). You can only edit your own code.
Task/problem is randomly generated and appears at the top of the screen.

Extension Specifications

Multiple levels of difficulty of tasks/challenges.
Profile pages for users.
Live updating "rank" scoreboard (who's on top)

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

GitBook for Notes/Tips/References

Co-author a gitbook with notes, tips, references for yourself and your team.

Context

You will learn to use git to edit something other than code. This will give you an idea of where the line between where git ends and the source code you are controlling begins.

Gitbook: https://www.gitbook.com/

Specifications

Create a shared gitbook repo
Everyone should fork from this repo
Add content and submit via a pull request
Merge N pull-requests with good content for your shared book
Merge in changes from the main repo into your personal fork
Use git and hub commands to commit, push and create pull requests

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Google Maps Easter Egg extension

Description

Anytime you type a word into the extension it takes you to interesting places on the map.

e.g. Search success takes you to an awesome inspiring place.

Context

Why is this goal important? How is it useful? What questions will it raise?

Specifications

List of specifications (specs) for the completed goal. These are declarative sentences (statements) describing some quality or behavior of the final product.

Spec One.
Spec Two.
Spec Three.

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Mapping Oakland's Potholes and Current Paving Contracts

Description

Provide a brief, high-level overview of what the final product (artifact) of this goal is. Include any relevant resources or dependencies here.

The point is to map out the city's pothole's using the data from the city and compare that with the current paving contracts that the city has. It would give an opportunity to measure the city's ability to maintain the steets. It would also give user the ability to see where there are potholes and/ or construction via a map that they can use.

Context

Why is this goal important? How is it useful? What questions will it raise?

_It would give developers an ability to link data using API's and create a map _

It is useful to the city and citizens' because it would give a visual overview of the data provided, as well as give the city a metric to compare and analyze it's ability to maintain the city's streets.

A good question to keep in mind is how can we add an algorythm that would measure the data provided, in terms of the city's ability to address its problems with potholes.

Specifications

List of specifications (specs) for the completed goal. These are declarative sentences (statements) describing some quality or behavior of the final product.

Grab Data from the city of Oakland through its APIs via https://data.oaklandnet.com/.
Find a way to render that data on a map, perhaps via GoogleMaps API, and keep it up to date in real time.
Have a simple and easy to understand display for all the information and the data on the map.
Be able to search specific locations in the map and navigate with the map by avoiding the potholes and current and future construction zones.
Make it Mobile Friendly (Stretch Goal?)
Create an algorithm that would compare and measure the two data sets, the potholes and the city's current paving contracts. (Stretch Goal?)

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Blackjack Game for the Web

Description

Create a blackjack to be played in a web browser based on the command line version available here: https://github.com/phoniks/BlackJack

Context

This goal will teach the difference between synchronous and asynchronous applications.

Specifications

List of specifications (specs) for the completed goal. These are declarative sentences (statements) describing some quality or behavior of the final product.

Blackjack:

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Social media network for Learners Guild

Description

A Facebook style social network which allows users to post status updates, connect with friends, message one another, and view a news feed of their friends' posts.

Context

This project will support you in learning:

how to use a database to manage data.
how to develop a notification system.
how to manage users and their properties.
how to create authentication mechanisms.

Proposed framework: KeystoneJS

Specifications

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Greater Bay Area Movie Theater App

Description

Create a web app that connects to Google Maps, with a search bar that looks specifically for movie theaters in the Bay Area. Use HTML, CSS, Javascript, JQuery, and you may also implement databases or other libraries to help you gather the information for these theaters. The information that will be collected and displayed to the user should include, film showtimes, reviews, theater reviews (i.e. customer service, environment, the behavior of other patrons, etc).

You should still write the code for the site, including creating the space for the plugins and you must be able to explain all of your choices for third party software.

Do not publish this site, just use the html index for us to access for review at the end of the cycle.

Context

As a user, when I visit a page about movie theaters, I want a clean and simple interface, a way to save my favorite theater, my payment info, and my preferred genre. Create a site that allows that, and does so with a map interface, when the page loads up though, the user wants nothing more than a postal code, so that they can begin as simply as possible.

Creating an interactive web app that accesses large databases for your specific website use is a great way to understand the concept of full stack development, since you will definitely need to access the skills on multiple languages and frameworks. This project in particular would help the end user with accessing information about new release films, which has become a popular pastime.

Feel free to use frameworks and other libraries, but do not copy-paste, it is crucial that in typing the code out allows you to continually read and discover how the code works. The exception would be for plug-ins or pathways to accessing large datasets.

As you code your site, you will likely encounter scenarios that you may not have expected, which is fine, it only means that you given more opportunities to problem-solve!

Specifications

When the site loads up, I want a map to appear and a way where I just enter my zip code and then the map automatically transports me to the theaters closest to me.
When I click on a theater location, I just want a theater photo, information, customer rating (for the theater), price rating ($ - $$$$), and a button to click through to current showtimes.
I want a service that saves credit card info, preferred theater, and preferred film genre.
Please make sure everything loads for me, thanks!
If you use any frameworks or code libraries, please cite them and/or explain how you implemented them in a gitbook, or on your README.
Bonus: Optimize for Mobile.

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Custom-color web page with JavaScript

Description

Different websites and applications allow different features and colors depending on the user's location, name, or other factors. Many of these apps or websites will allow a user to choose to turn the colors on or off, if necessary. For example, the iPhone allows users to change the color of the screen during the evening, and there is a Chrome extension that does the same. Google maps changes colors at night.

Context

This goal is important because users like interactivity in the technologies they use. Knowing how to change the colors of a page or app allows for that interactivity and even accessibility for certain users who might need to increase the contrast between the text and background fonts/colors of their own volition. Someone who takes on this project will have to think about the following:

What are the base colors for the page?
When does the page change? Depending on a person's name? The first letter of their name? The time of day when they access the app? Or with some other factor?
Does the user choose the colors they can change the page to, or is it a preset by the creator of the page?
What are the different functions in Javascript that can be used to achieve the specifications?

Specifications

Using HTML and CSS, create at least one web page with information on it for a user to read. This could be a current event, a short story, an instruction set, or an about me page, for example.
Using Javascript, create a function that allows the text color and the page background color to be changed according to the factors that the creator sets forth.
If the user chooses the colors that the page can be, make buttons for the user to choose or cycle through available sets of colors.
If the creator of the page does not allow the user to change the colors, create an alert that logs an answer and uses the user's response in order to change the colors.

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Transit App Rebuild

Description

Remake the Transit iOS app for the web and/or iOS.
Transit App: https://itunes.apple.com/us/app/transit-app-real-time-tracker/id498151501?mt=8
Feature in google: https://maps.google.com/landing/transit/index.html

Context

When you ride a bike, ride buses, ride BART or other forms of public transportation an app that unifies those different forms of transportation based on need would be great.

For instance, if I am riding my bike but I need to take the bus to go from Alameda to Oakland, I should be able to put in my destination and the app figures out bus stops along the way and shows bike paths to follow safely.

Specifications

Users can enter starting address and/or use current location.
Users can choose specific forms of transportation that should go into the algorithm.
Users can enter and view favorite destinations such as home, work, etc.
User can authenticate through Google, Facebook, and GitHub.

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Goal Tracker

Description

Habits are hard to form!

This goal tracking application can measure how consistently a user completes their desired improvements and allows them to remain accountable for their defined objectives.

Build a simple application where a user could define their goals, be it at a day-to-day, short-term, or long-term frequency. The user records goal completion with a press of an icon. As time progresses, the user can see the aggregated data of goals completed & otherwise.

Context

This is a simple, straight-forward project that covers a lot of key concepts in web development:

Managing a stateful resource that users can create, read, update, and delete (CRUD)
Graphical rendering of timeline data
User authentication

Specifications

Users can sign up & sign in
Users can CRUD goals
Users can record when they accomplish the goal
Users can see a graph of how often they completed their goals

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Great Fence of Learners

Description

Tracking movements of people, so that a notification is sent when someone enters or leaves a specific geofence location.

Context

Why is this goal important? How is it useful? What questions will it raise?

Keeps attendance of participants accountable.
Learn how to pull data from an API, How to use data in forms

Specifications

List of specifications (specs) for the completed goal. These are declarative sentences (statements) describing some quality or behavior of the final product.

Spec One.
Spec Two.
Spec Three.

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Extend echo by adding goals-reviewer functionality

Description

Players can review goals, and the data gets saved into the echo database.

Context

Interfacing with another app is difficult but definitely worth learning. It will be real software, with real clients. You may get to meet SJ, Trevor and Jeffrey (our LOS team).

Specifications

List of specifications (specs) for the completed goal. These are declarative sentences (statements) describing some quality or behavior of the final product.

Spec One.
Spec Two.
Spec Three.

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Go Game!

Description

Two people can play Go on the same webpage.

AND/OR

One person can play Go against an AI player.

Context

Go is an existing, fixed feature set.

A Go game can be implemented in almost any web technologies.

The team can scale the difficulty of the specs along a large range of complexity

[no game logic]<----------->[working game logic with an AI opponent]

Specifications

Required

Define complete set of user stories by reverse engineering Go
Players can decide between 9x9, 13x13 or 17x17 board size
The board can scale to the window size
The artifact produced is properly licensed, preferably with the MIT license.

Optional

Two player games work on
The game state is persisted (so reloading the page resumes where you left off)
Each game has a unique, individual URL (like bit.ly)
Display users' Gravatars (users will have to provide their email address)

Quality

There is a clear separation of game logic code from view/rendering code.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Threes iOS app in ionic

Description

Many of my friends are addicted to this iPhone app game. Be warned! It might happen to you...

Context

The problem is very clear and very simple. It requires no backend... though of course you can choose to add one as a Stretch Goal. This allows you to reverse engineer an app and learn to write features, and then focus on the user experience.

Required Specifications [Must Have]

All code is in ionic/Angular (replace this if you have other ideas!)
A single player can play the game to completion
There is a user interface, similar to the app
You have some test coverage

Optional Specifications [Nice To Have]

High scores and names can be saved, via some registration process and a database
The artifact produced is properly licensed, preferably with the MIT license
You build some artificial intelligence element which analyzes best moves, and optionally coaches you as you play.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Building a news website

Description

Create a website that pulls information from your preferred news websites.

Context

This project is is going to be extremely important since aggregating information is a critical component in many of the APPS we use. Use whatever frameworks/ libraries you need to complete the goal.

Specifications

aggregates news from no less than 2 websites.
displays news title in the body element
each headline will take you to the full story on the news websites page.
a way to sign in (Oauth) in header
keeps itself updated on a timed basis with a manual refresh button

Required

-[ ] all links work properly

a way to update the news so that it pulls in fresh news articles
The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Advanced JavaScript Tutorials

Description

Complete basic and advanced JavaScript Training on TreeHouse and FreeCodeCamp, a high quality interactive tutorial websites.

Context

Do you feel like you are not able to effectively communicate with your team mates on your project? Ever wanted to become a great JavaScript developer?

Well now you can get an AWESOME, SOLID FOUNDATION to help you with this journey. This one week long cycle will OVERLOAD and EXPAND your MIND. This project will allow you to have a better understanding of all future javascript goals.

Specifications

Javascript Tutorials:

Databases:

Modifying Data with SQL
Reporting with SQL
SQL Basics
Mongo Basics
The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Beastmode Rush

Description

Deliver signed Beastmode products to users via Uber's RUSH API.

Context

Why is this goal important? How is it useful? What questions will it raise?

Learn how to code for mobile.
Integrate with an API
Do a project that might actually be used (and make money?)

Specifications

List of specifications (specs) for the completed goal. These are declarative sentences (statements) describing some quality or behavior of the final product.

Integrate w/ Beastmode Inventory system (mock at first - perhaps real later)
Integrate w/ Uber Rush API
User can view a catalog of signed Beastmode Products
User can place an order through the app (via STRIPE?)
User can track order as it leaves the store and makes its way to them.

Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Local organization website

Description

Build a website for a local organization.

Find an organization in your local community that has a website. It could be a business, a non-profit, a sports team, a community center, or something else in that vein.

This will be your source of content. Then, design and build a new site for the organization. You can use the same content (text and images) to populate the site, but come up with a different design.

If the site you pick has more than 3 pages, aim to build at least 3 of the most important pages (e.g. "Home", "About", "Contact").

Context

A common job for web designers and developers working in consultancies or as freelancers is to redesign an existing site. Whether because they've become buggy, are poorly designed, or have gone out of style, websites occasionally need to be refreshed.

Practicing with pre-existing content is a great way to focus on the structure and style of the site.

As you work on this goal, consider these questions:

What is the best way to package and display different types of content?
When content needs to be re-used in different places, how can templates and/or components be deployed to avoid duplicating code?
Why is browser compatibility important and what are some ways to test for it?

Specifications

Site has at least 3 pages.
Site is not published on the web*.
Site can be viewed locally on a browser by opening its index.html file.
All links work correctly (i.e. no broken links).
All images and other external resources load correctly.

*Copying another website's content is fine for practicing, but publishing it would likely infringe upon the original site's copyright.

Required

Do not remove these specs - they are required for all goals.

External resources used are properly cited.
The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

To Do List App

In this goal, you will build a simple to-do list app, where users can store their tasks in a database, see their tasks, and mark them complete.

This simple application is a great introduction to learning how the browser communicates with a server, and how the server communicates with a database.

This goal is published. Check it out at: http://jsdev.learnersguild.org/goals/64

Add OAuth Authentication to a website

Description

Provide a brief, high-level overview of what the final product (artifact) of this goal is. Include any relevant resources or dependencies here.

Allow users to be able to log in using the OAuth protocol with Google or Facebook

OAuth - OAuth is an open standard for authorization, commonly used as a way for Internet users to log in to third party websites using their Microsoft, Google, Facebook, Twitter, One Network etc. accounts without exposing their password.
http://oauth.net/2/

Context

Why is this goal important? How is it useful? What questions will it raise?

Every good site needs authentication, and its a huge hassle for users to remember different passwords for all the various sites they log into.

Specifications

List of specifications (specs) for the completed goal. These are declarative sentences (statements) describing some quality or behavior of the final product.

Site has a log in page.
Users can choose to log in using Facebook or Google.
Once logged in users are taken to dashboard.
Required

Do not remove these specs - they are required for all goals.

The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Create a news app that will pull information from preferred news sources

Description

Create a website that pulls information from your preferred news websites.

Context

This project is is going to be extremely important since aggregating information is a critical component in many of the APPS we use. Use whatever frameworks/ libraries you need to complete the goal.

Specifications

aggregates news from no less than 2 websites.
lists news sources headlines with the news source in parenthesis
each headline will take you to the full story on the news websites page.
a way to sign in (Oauth)
keeps itself updated on a timed basis with a manual refresh button

Required

-[ ] all links work properly

a way to update the APPs news so that it pulls in fresh news articles
The artifact produced is properly licensed, preferably with the MIT license.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

guildcrafts / web-development-js Goto Github PK

web-development-js's Introduction

Craft: Web Development with JavaScript

Getting Started

Authoring and Editing Goals

Setting Up a Local Development Server

Contents

Goals

Playlists

web-development-js's People

Contributors

Stargazers

Watchers

Forkers

web-development-js's Issues

Description

Context

Specifications

Required

Description

Context

Specifications

Required

Description

Context

Specifications

Required

Description

Context

Specifications

Optional

Shereef's Notes

Description

Context

Required Specs (Must Have)

Optional Specs (Nice To Have)

Description

Context

Specifications

Description

Context

User Stories & Specifications

Required

Description

Context

Specifications

Required

Description

Context

Required Specs (Must Have)

Optional Specs (Nice To Have)

Description

User Story

Context

Specifications

Required

Quality Rubric

Description

Context

Specifications

Required

Description

Context

Specifications

Required

Description

Context

Specifications

Quality Rubric

Stack

Required

Description

Context

Specifications

Required

Quality Rubric

Description

Context

Specifications

Required