How i learn any front-end framework

Building projects

In order to understand aspects of something you need to know it well and this knowledge does not come from reading books or watching visual lessons only, the real test comes with a real problem in real life, during this article I bring you some ideas for projects covering many aspects of any frontend framework you choose.

Notes:

  • the projects listed in this subject are gradual in their difficulty and each project adds to its predecessor.
  • the order of projects from the youngest to the most comprehensive.

1. Find & Display ( clone )

The first application which is commonly used is the clone of any known site using it’s public API, tray to build 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:

for more endpoint API examples check this github repo

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 data ( one data or array of data ).
  • Styling your display with Interpolation data.
  • Structural your display.
  • Master-Details: when you list results, make a link for each item in result to item details page.
  • Learn how to pass data from master page to details page.

2. Auth App

some of this endpoint API i mention in 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 to his / her homepage and prevent guest users from pages that require user to be logged in .

What you will learn:

  • Route guards ( some pages require authenticated user only ).
  • How to send and save JWT ( JSON web token ) to make requestes that require authenticated user.

3. CRUD APP

create, read, update and delete app is 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 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.
  • Tray to add auth capabilities for your back-end framework.

4. 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 tray to build chat app using web sockets and it’s bidirectional and we can’t wait for 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 integrated it with your client-side app.
  • Make your app more reactive ( listen to network state and notify the user with the new message).

Free tutorials i found

i will update this section frequently.