Class of 2020

Web App From Scratch @cmda-minor-web 1920

https://wafs.netlify.com/

[(https://app.netlify.com/sites/wafs/deploys)

Web-app with regular internet

Web-app with slow 3G-internet (showing skeletonUI)

✅ To-do

• [ ] Add search (in-repo or global? idk yet)
• [ ] Error handling everywhere
• [ ] Add function to captitalize usernames
• [ ] Work out detail-page with visualized stats
• [ ] Work out an actual stats-page with graphs and a leaderboard, based on commmits and such.
• [ ] Add interaction diagram
• [ ] Styling
• [ ] Apply nerd-score? (based on what kind of extra's used, etc)
• [ ] Localstorage.getItem (something) in an if-state to check with new data if (localStorage.getItem('stations')) {}

📋 Concept

What does your app do, what is the goal? (passing butter)

This app is for keeping track of the current participants of the Web App From Scratch class in the minor Webdevelopment (2020).

⚙️ Installation

Clone this repository to your own device:

$ git clone https://github.com/deannabosschert/web-app-from-scratch-1920.git

Then, navigate to this folder and run:

python -m SimpleHTTPServer 8000`

Helpers

The used external packages are located in the 'helpers'-folder as a static file. Used helpers and their sources:

• Transparency
• Routie
• Fetcher

🧑🏼‍ Actor Diagram

Which actors are there in your application? (actor diagram)

↔️ Interaction diagram

How does flowed interaction through the application? (interaction diagram)

• Overview
• Stats
• Detail page

1. Check LocalStorage
2. Go to routing and use routie to get the current route
3. Then, based on if there's data in LS !=, then go to loadNerds, api call, filter and store, then render the page via render.js === , then render the corresponding page via render.js

🌍 Design patterns

Not sure, but I think those count:

• The usage of Modules?
• The usage of .map .filter .reduce?
• My 'filterArray'-function?

👍🏽 Best practices

• Work in branches, even if it's a one-man project. It helps staying focused on one feature until it's finished, and keeps your from doing 10 different things at the same time. Saves you merge conflicts, too.
• ^ also helps with 'closing' a feature, so you are more likely to move on to the next. Too little time, too much ideas.
• Commit early, commit often.
• Make single-purpose commits.
• Always fix your .gitignore-contents asap; node_modules or the like won't ever be pushed that way.
• Styling comes last. It's gonna change anyways so most of the time, it's better to fix the technical stuff first.
• Don't use declarations in the global scope.
• Start your project with writing down the future function names (pre-actors, basically).
• Make your own template for your readme
• Google, google, google. 99% of the time, it'll get you to the solution of your problem.
• Set timers for solving problems that aren't super relevant in the current sprint but you do would like to work on; 25 mins tops, otherwise you'll be stuck with this for too long.
• Make an actor diagram halfway through, it's a great reminder to refactor the code.
• Explicitly limit the scope of your functions
• Remember that most problems/features that have to do with the UI, can be fixed with mainly CSS.
• Do not use .innerHTML
• If there's an error, walk through your code from the top/beginning; explain it to your rubber ducky and state where certain data is passed.
• Implement useful error handling.

🗃 Data

🐒 Github API

What external data source is featured in your project and what are its properties? The API I've used is Github's.

I'm using this API to fetch data of the repositories that are forked from cmda-minor-web/web-app-from-scratch-1920.

Properties

The endpoint I'm using on the overview page is the following: https://api.github.com/repos/cmda-minor-web/web-app-from-scratch-1920/forks?per_page=50

Base URL: ${endpoint}/repos${minor}${course}${year}${tag}?per_page=${limit}

Rate limiting

For API requests using Basic Authentication or OAuth, you can make up to 5000 requests per hour. Authenticated requests are associated with the authenticated user, regardless of whether Basic Authentication or an OAuth token was used. This means that all OAuth applications authorized by a user share the same quota of 5000 requests per hour when they authenticate with different tokens owned by the same user.

For unauthenticated requests, the rate limit allows for up to 60 requests per hour. Unauthenticated requests are associated with the originating IP address, and not the user making requests.

So, if you aren't an authenticated user, your rate limit is 60 requests per hour.

If you do exceed this limit, you'll see the following error message and it's probably a better idea to request as an Authenticated user:

HTTP/1.1 403 Forbidden
Date: Tue, 20 Aug 2013 14:50:41 GMT
Status: 403 Forbidden
X-RateLimit-Limit: 60
X-RateLimit-Remaining: 0
X-RateLimit-Reset: 1377013266
{
   "message": "API rate limit exceeded for xxx.xxx.xxx.xxx. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)",
   "documentation_url": "https://developer.github.com/v3/#rate-limiting"
}

If you are authenticated, you should be able to receive the following data:

(49) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

💽 Data cleaning

What has been done with the fetched data?

Filtering the data using array.filter

function filterArray(array) {
  return array.filter(results => {
    return {
      name: results.owner.login,
      description: results.description,
      avatar: results.owner.avatar_url,
      homepage: results.homepage,
      id: results.id,
      ding: results.ding,
      id: results.id
      }
   }
}

Result:

{
name: "web-app-from-scratch-1920", description: "Web App From Scratch @cmda-minor-web 1920", avatar: "https://avatars1.githubusercontent.com/u/36165810?v=4", homepage: "https://deannabosschert.github.io/web-app-from-scratch-1920/src", id: 237659708, …}
name: "web-app-from-scratch-1920"
description: "Web App From Scratch @cmda-minor-web 1920"
avatar: "https://avatars1.githubusercontent.com/u/36165810?v=4"
homepage: "https://deannabosschert.github.io/web-app-from-scratch-1920/src"
id: 237659708
node_id: "MDEwOlJlcG9zaXRvcnkyMzc2NTk3MDg="
full_name: "deannabosschert/web-app-from-scratch-1920"
private: false
owner: {login: "deannabosschert", id: 36165810, node_id: "MDQ6VXNlcjM2MTY1ODEw", avatar_url: "https://avatars1.githubusercontent.com/u/36165810?v=4", gravatar_id: "", …}
html_url: "https://github.com/deannabosschert/web-app-from-scratch-1920"
__proto__: Object
}

Rendering the data to html-representation using array.map

   <article class="student">
            <h3 class="projectName"></h3>
            <p class="description"></p>
            <a class="html_url">
              <div class="avatarWrapper">
                <img class="avatar">
              </div>
              <p class="homepage"></p>
            </a>
            <p class="id"></p>
            <p class="node_id"></p>
            <p class="name"></p>
            <p class="full_name"></p>
            <p class="private"></p>
            <p class="owner"></p>
          </article>

👯🏿‍ Features (+ wishlist)

What would you like to add (feature wishlist / backlog)?

• [ ] Showing the latest commits per student
• [ ] Showing a 'nerd-leaderboard' based on the amount of lines/commits, fixed issues, open issues etc
• [ ] Showing stats about the implementation of certain things (who uses branches, pushes enough commits, has a wiki, has a license added etc)
• [ ] Who's where in the curriculum? (check presence of 'routing', 'templating', 'modules' etc.
• [ ] Who uses micro libraries, and who's a supernerd and e.g. writes their own virtual DOM or router?

🏫 Assignment

Rubric

Rubric- detailed rating of my project

ℹ️ Resources

https://developer.github.com/v3/

Credits

• Our superamazingteachers at the minor WebDev @CMD
• Async loading- Joost
• SPA web app- Laurens
• Routie
• Transparency
• Routie
• Fetcher

Small inspiration sources

• Responsive square for avatar skeleton

🗺️ License

Author: Deanna Bosschert , license by MIT