Front-end design

Notes with a broader focus on the front-end, covering design, architecture, and styling.

Atomic DesignBrad Frost

Checklist: • https://dev.to/javinpaul/the-2019-web-development-frontend-backend-roadmap-4le2 • https://dev.to/effingkay/front-end-checklist-3cc2 • https://frontendmasters.com/books/front-end-handbook/2019/

How to learn any front end framework:

Every time you decided to learn a front end framework, you must hear those terms over and over ( components, routing and managing state )

1. Find & Display ( clone )

   The first application which is commonly used is the clone of any known site using its public API, try to build a simple search bar with drop-down list holds results coming from endpoint API, check returning data before displaying it like if there is an image or not to display.

Endpoint API Example: • Github API • OMDb API • Spotify Web API • wunderground API • reddit API

What you will learn: • Using HTTP client to make a request to endpoint API. • Using keyboard event listener, for example, once a user hit enter call endpoint API to fetch result data. • Learn how to display single data or group of data. • Styling your display with Interpolation data. • Structural your display. • Master-Details: list results add a link for each item in result to the item details page. • Learn how to pass data from master page to a details page.

1. Auth App

   some of this endpoint API I mention in the previous section require some authentication so in this section try to add or build another app with login /register page and if the user is login redirect him or her to the user homepage and prevent guest users from pages that require the user to be logged in.

What you will learn: • Route guard: some pages require authenticated user only. • How to send and save JWT (JSON web token) to make requests that require an authenticated use.

1. CRUD App

   create, read, update and delete app is the most popular front-end app in this section you can build this app offline using local storage or using online service like Firebase or even integrated it with a back-end framework.

Project Examples: • Bookmark app. • To-Do App.

What you will learn: • Validate user input in form and display error if the user inserts wrong data. • How to make put, delete, post and get HTTP request. • Integrate your app with any back-end framework. • Try to add auth capabilities for your back-end framework.

1. Chat App

   In previous sections, all the requests to the back-end are unidirectional you don’t have a problem managing your app state there, but in this section, we try to build chat app using web sockets and it’s bidirectional and we can’t wait for the response to update the view, we need another way to manage our client-side state.

What you will learn: • learn how to use manage state solutions like redux for react, ngrx for angular 2+ or vuex for vuejs and how to integrate it with your client-side app. Make your app more reactive (listen to network state and notify the user with the new message).