janlin002/2021-06-25

If you cannot view the video, download vlc player. It will be able to play anything.

For both assignments regarding React:

1. Use customs hooks and/or context. It's important that you show you understand how to create custom hooks and understand context, how to create and use context and pass it down your app.

2. Use functional components

3. Seperate components and hooks into individual files

4. Check the console to make sure you fix all errors. You shouldn't have any errors.

A note on the search function: You can make the search as you type or wait until you finish typing and click 'search'. In real production apps, the search should happen as you type if all the data has been loaded to the local cache. If it hasn't been loaded to the local cache, then only send the search to the server after the user has finished typing. Since this is a quick and simple test, either is okay.

After you have completed the assignments, please push it to your own repos on GitHub and let me know the links. I'll go read your code.

Thank you.

---

ASSIGNMET #1

---

REACT AND REST API

You will use React to build a sample page to retrieve data from https://hn.algolia.com/api using the search api.

api: http://hn.algolia.com/api/v1/search?query=

On your page, please make these features:

1. Search box to search Hacker News
2. Display the results in a table (don't use any packages).
3. Delete each result from the table
4. Load more (only load 10 results each time). Load More button should only be shown when there are results.

To see what the finish product looks like, see the video.

---

ASSIGNMET #2

---

REACT AND GRAPHQL API

You will use the countries api at https://countries.trevorblades.com/ and Apollo Client and React Router.

On your page, please make these features:

1. A table on the top with all the continents. Each continent has a link. When users click on the continent link, it displays another table below.

2. The second table lists all the countries on that continent, with the following information: Code, Name, Native, Capital, Currency, Language

To see what the finish product looks like, see the video.