Learning to code with JavaScript and building UI with React

blog image source Using Monzo API, build a web app using React called Inde$pendent. Inde$pendent will be a digital reward card that doesn’t require you to use apple or google pay at the checkout or scan some other type of card at the checkout. You don’t need to download a new app or change your preferred payment method at all. And through the utilization of Open Banking, all your transactions can be collated and count towards your reward goal. What is Open Banking Open Banking is an initiative designed to improve and enhance everyone’s banking experience. The core idea of Open Banking is that you can provide banks and other online providers with secure access to your account(s) so that you can manage your current accounts in a way that is better suited to your needs. If customers have multiple current accounts they will be able to see those accounts all in one place. Why Monzo Monzo is a digital bank built and run by a team of around 40 developers. We decided to use their API over ...

blog image source Branches are most powerful when you're working on a team. You can work on your own part of a project from your own branch, pull updates, and then merge all your work into the main branch when it's ready. Working with branches: git branch - to see what branches you have, and to check which one you’re currently on. git branch <branch_name> - to create a new branch off of the current branch. git branch -d <branch_name> - to delete a branch. git checkout <branch_name> - to change onto a branch. Merging is Git's way of putting a forked history back together again. The git merge command lets you take the independent lines of development created by git branch and integrate them into a single branch. Git Branch - https://www.atlassian.com/git/tutorials/using-branches Git Branching - https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging git - the simple guide - http://rogerdudler.github.io/git-guide/

blog image source Trello ; a web-based Kanban project management application. A Trello board has four key components: Boards - a board represents a project or a place to keep track of information. Whether you are launching a new website or planning a vacation, a Trello board is the place to organize your tasks and collaborate with your colleagues, family, or friends. Lists - lists keep cards organized in their various stages of progress. They can be used to create a workflow where cards are moved across lists from start to finish, or simply act as a place to keep track of ideas and information. Cards - the fundamental unit of a board is a card. Cards are used to represent tasks and ideas. A card can be something that needs to get done, like a blog post to be written or something that needs to be remembered, like company vacation policies. Menu - the menu is where you manage members, control settings, filter cards, and enable Power-Ups. You can also see all of the activity tha...

blog image source Heroku is a cloud platform as a service (PaaS) for Ruby, Node.js, Python, Go, PHP, and JVM-based applications, where developers manage their applications without the need for servers or administration. It features Git-based, GitHub, and API deployment strategies. Applications on Heroku are managed with Git. Simply pushing your codebase to Heroku is all it takes to deploy your application. Applications that are run on Heroku typically have a unique domain (typically ` applicationname.herokuapp.com `) used to route HTTP requests to the correct dyno. Each of the application containers, or dynos, are spread across a "dyno grid" which consists of several servers. One of the reasons Heroku is easy for people to use is that it relies on a widely used Git revision control system. In fact, you can’t deploy an app on Heroku unless you are using Git. The ` push ` command, ` Heroku push master `, is what you input on the command line to send the app from your reposi...

blog image source Group exercise - Users Sign up and Login; using BCrypt and JWT encryptions, with the option to sign-in with GitHub via OAuth. Learning objectives: Can you apply BCrypt/JWT encryption to password? Can you get validation encryption is working via Chrome dev console? Can you gather User data with password setup through MongoDB? Can you apply OAuth setup to the Signup process? Validate signup using GitHub OAuth developer application. After completing this exercise should be comfortable with the following concepts: Interacting with an API React Routing BCrypt/JWT encryptions OAuth token process OAuth setup with GitHub GitHub User Authentication OAuth 2.0 exercise -  https://github.com/SharifCoding/authentication-oauth

blog image source OAuth 2 is an authorization framework that enables applications to obtain limited access to user accounts on an HTTP service, such as Facebook, GitHub, and Google. It works by delegating user authentication to the service that hosts the user account and authorizing third-party applications to access the user account. OAuth 2 provides authorization flows for web and desktop applications, and mobile devices. OAuth2 defines 4 roles : Resource Owner: generally yourself. Resource Server: server hosting protected data (for example Google hosting your profile and personal information). Client: application requesting access to a resource server (it can be your PHP website, a Javascript application or a mobile application). Authorization Server: server issuing access token to the client. This token will be used for the client to request the resource server. There are 4 separate modes of AuthO, which are called grant types. Each mode serves a different purpose an...

My experience with  @MCRcodes   as a Quality Assurance Tester.  This is an evening part-time coding boot camp based in central Manchester which runs for 24 weeks, from February 2018 to July 2018. Week 13 (May 2018) -  A new month, and a very heavy new topic ReactJS. The plan is to focus on this technology for the next couple of months, especially since it is a highly demanding skill. I've learned a lot more about the  npm   package.json  file with better understanding, and all dependencies used by a typical React setup. Previously only had exposure to a small number of dependencies ( jest  &  eslint) , now learning about  react ,  babel ,  webpack , and more. Session 1 -  Intro to React Session 2 -  React (Class, Stateful Components, Event Handlers) Week 14 -  Single Page Applications (SPA's) is amazing!  I always thought front-end development means primarily knowing ...

blog image source JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with HMAC algorithm) or a public/private key pair using RSA. JSON Web Token (JWT) Process: Encrypted string issued by the web server Stored by the client, typically in local storage Web server signs token using a SECRET KEY When the token is sent back to the server, can verify it using the secret key If the token is tampered with, verification will fail A JWT consist of three parts: Header ; consists of two parts: the type of the token, which is JWT, and the hashing algorithm. Payload ; which contains the claims which are an entity (typically, the user) and additional metadata. Signature ; takes the encoded header, the encoded payload, a secret, the algorithm specified in the h...

Almost any application will eventually need to store a collection of passwords or another type of data that has to be stored using a hashing algorithm. Blogs, forums, issue trackers, they all need to store user data and these passwords. Hashing is the greatest way for protecting passwords and considered to be pretty safe for ensuring the integrity of data or password. There are some weaknesses in a cryptographic hash algorithm that allows an attacker to calculate the original value of a hashed password: Brute Force attack: Hashes can’t be reversed, so instead of reversing the hash of the password, an attacker can simply keep trying different inputs until he does not find the right now that generates the same hash value. Using a modern computer one can crack a 16 Character Strong password in less than an hour, thanks to GPU. Hash Collision attack: Hash functions have infinite input length and a predefined output length, so there is inevitably going to be the possibility of two diff...

blog image source Following on from the previous sessions; - Intro to React - React (Class, Stateful Components, Event Handlers) - React (Bind Methods, Render Lifecycle) - React (Fetching data from an external API) - React (Forms) React Routers: React Router is the standard routing library for React. When you need to navigate through a React application with multiple views, you’ll need a router to manage the URLs. React Router does that, keeping your application UI and the URL in sync. Here’s an example of how our routes will look: ```js <Router>   <Route exact path="/" component={Home}/>   <Route path="/category" component={Category}/>   <Route path="/login" component={Login}/>   <Route path="/products" component={Products}/> </Router> ``` You need a router component and several route components to set up a basic route as exemplified above. There are two types of routers from the React Router API: ...