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.
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 image or not to display.
Endpoint API Example:
for more endpoint API examples check this github repo
public-apis - A collective list of public JSON APIs for use in web development.github.com
What you will learn:
- using http client to make request to endpoint API.
- simple user interaction get search keyword from user to send it to back-end.
- 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 to item details.
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 )
- how to send and save JWT ( json web token ) for requested.
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
- Todo App
What you will learn:
- validate user input in form and display error if user insert wrong data.
- how to make put, delete, post and get http request.
- integrate your app with 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 is uni-direction you don’t have until this project state problem but in this section we tray to build chat app using websockets and it’s bi-direction and we can’t wait response to update the view so we need another way to manage our client-side state.
What you will learn:
- lean how to use manage state 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 notfiy user with new message).
Free tutorials i found
i will update this section frequently.