An open API service indexing awesome lists of open source software.

https://github.com/uidotdev/react-course-curriculum

Curriculum for ui.dev's React course.
https://github.com/uidotdev/react-course-curriculum

Last synced: 7 months ago
JSON representation

Curriculum for ui.dev's React course.

Awesome Lists containing this project

README

          



UI.dev Logo



React Course Curriculum - Hacker News Clone

### Info

This is the repository for UI.dev's "React" course curriculum project.

For more information on the course, visit __[ui.dev/react](https://ui.dev/react/)__.

### Project

This is a (soft) "Hacker News" clone.

You can view the final project at __[hn.ui.dev](https://hn.ui.dev/)__

### Solution

If you get stuck, you can view my solution by checking out the `solution` branch.

You will need to use React's `dangerouslySetInnerHTML` prop to show the HTML posts that the API gives you. We didn't cover it in the course but you can [read about it here](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml).

### Approaches

There are a few different ways you can approach this, each with varying difficulties.

+ Hardest: Look at the [finished project](https://hn.ui.dev/) and build it. This is obviously the hardest approach but the one you'll gain the most learning from. The only thing that you'll need is the documentation for the [Hacker News API](https://github.com/HackerNews/API).

+ Whatever word is between "Hardest" and "Easiest": Copy my [api.js](https://github.com/uidotdev/react-course-curriculum/blob/solution/app/utils/api.js) file to your project then build the app. After all, you're here to learn React, not the Hacker News API. If you took this approach, I wouldn't blame you.

+ Easiest: Take 10-15 minutes to walk through [my code](https://github.com/uidotdev/react-course-curriculum/tree/solution). Notice how I approached different problems and how you may or may not want to do something similar. From there, start building and reference my project only as you need it.

### Project Preview

Light Mode | Dark Mode
:-------------------------:|:-------------------------:
![](https://user-images.githubusercontent.com/2933430/55542659-c0b0e100-5684-11e9-9877-20f218c8fde5.png) ![](https://user-images.githubusercontent.com/2933430/55542657-c0184a80-5684-11e9-9473-8a153a232301.png) ![](https://user-images.githubusercontent.com/2933430/55542656-c0184a80-5684-11e9-923b-2836944a474a.png) | ![](https://user-images.githubusercontent.com/2933430/55542654-c0184a80-5684-11e9-9436-9b3ae973e8b5.png) ![](https://user-images.githubusercontent.com/2933430/55542658-c0b0e100-5684-11e9-821f-03dc5f80c97c.png) ![](https://user-images.githubusercontent.com/2933430/55542655-c0184a80-5684-11e9-832b-657b683d0625.png)

### [Tyler McGinnis](https://twitter.com/tylermcginnis)