DEV Community

Trey Huffine for gitconnected

Posted on • Edited on

Hacktoberfest React Project

Hacktoberfest

Hacktoberfest 2018 Project

Build a Hacker News clone using React and Redux. Collaborate with other developers.

Learn More >

Project Overview

A Hacker News clone (in night mode!) using all open source technology.

Try it out: Download the Chrome Extension

Website: View on gitconnected

GitHub: Follow the Source Code

Hacktoberfest 2018 is underway! Join the developer community from gitconnected in working together to build a Hacker News clone for your Hacktoberfest project. Use your favorite frontend library (or follow along with our solution using React) and utilize the open source Hacker News API for your data.

Our community will be collaborating and working together to help everyone become a better developer. Join us if you're interested in learning web development.

What You'll Learn

  • React
  • Redux
  • Styled Components
  • CSS Grid
  • CSS Flex
  • CSS Animations
  • Using an API
  • Axios for network requests
  • Redux middleware
  • Create React App to bootstrap a project
  • localStorage for persisting state

Getting Started

First initialize the project. Our solution uses Create React App, but feel free to use whatever you want, even static HTML.

Review the Hacker New API documentation. You will need the /topstories endpoint to get the list of the story IDs and the /item endpoint to get the data for each story individually.

Finally, get your project into production. We chose to use a Chrome Extension, but you can host it in any manner than you wish. GitHub pages is a great option. The final solution should show a list of the top stories on Hacker News.

Join the Slack channel to collaborate and get help. This project can be difficult, so make sure you work on it with some friends!

Demo

Hacktoberfest Demo

Hacktoberfest Screenshot

Top comments (7)

Collapse
 
j2kfaalam profile image
JSON

I am wondering if this is open for react beginners?

Collapse
 
treyhuffine profile image
Trey Huffine

It is! The goal is for React beginners-intermediate to build their own Hacker News reader and hopefully learn a bunch along the way.

Collapse
 
syreix profile image
Miklós Covaciu

Any chance there is something similar to this just with Angular?

Collapse
 
treyhuffine profile image
Trey Huffine

Unfortunately I don't know Angular, or I would be happy to build the solution. If you're interested, you could join our Slack channel community.gitconnected.com and look for others that want to build the project in Angular.

If you do build one, we would love to feature it on the website :)

Collapse
 
pandaa880 profile image
Prashant Chaudhari

What is the actual process to make a PR. Do i have to build my own or contribute to the existing repo ?

And if I have to build my own, then how it is going to get merged in the main repo ?

Collapse
 
treyhuffine profile image
Trey Huffine

We have a list of issues for the main project if you're interested in to those - github.com/gitconnected/hacker-new...

If you want to propose additional functionality, that is gladly welcomed.

If you build your own, we will feature it / link to it in the main repo (github.com/gitconnected/hacker-new...) and on our Hacktoberfest page (gitconnected.com/hacktoberfest)

Let me know if you have any questions :)

Collapse
 
pandaa880 profile image
Prashant Chaudhari

Sounds interesting...I will contribute to the main project.