<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: gitconnected</title>
    <description>The latest articles on DEV Community by gitconnected (@gitconnected).</description>
    <link>https://dev.to/gitconnected</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F1032%2F6594c353-e8be-40ef-890b-79fcf9da3a0d.png</url>
      <title>DEV Community: gitconnected</title>
      <link>https://dev.to/gitconnected</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/gitconnected"/>
    <language>en</language>
    <item>
      <title>Hacktoberfest React Project</title>
      <dc:creator>Trey Huffine</dc:creator>
      <pubDate>Wed, 03 Oct 2018 15:18:24 +0000</pubDate>
      <link>https://dev.to/gitconnected/hacktoberfest-react-project-28ee</link>
      <guid>https://dev.to/gitconnected/hacktoberfest-react-project-28ee</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fragi6l42chbxhcmgporn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fragi6l42chbxhcmgporn.png" alt="Hacktoberfest" width="800" height="420"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Hacktoberfest 2018 Project
&lt;/h1&gt;

&lt;h4&gt;
  
  
  Build a Hacker News clone using React and Redux. Collaborate with other developers.
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://gitconnected.com/hacktoberfest" rel="noopener noreferrer"&gt;Learn More &amp;gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Project Overview
&lt;/h2&gt;

&lt;p&gt;A Hacker News clone (in night mode!) using all open source technology.&lt;/p&gt;

&lt;p&gt;Try it out: &lt;a href="https://chrome.google.com/webstore/detail/hacker-news/hknoigmfpgfdkccnkbfbjfnocoegoefe?pli=1&amp;amp;authuser=1" rel="noopener noreferrer"&gt;Download the Chrome Extension&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Website: &lt;a href="https://gitconnected.com/hacktoberfest" rel="noopener noreferrer"&gt;View on gitconnected&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;GitHub: &lt;a href="https://github.com/gitconnected/hacker-news-reader" rel="noopener noreferrer"&gt;Follow the Source Code&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/aTimQHf4zlM"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Hacktoberfest 2018 is underway! Join the developer community from &lt;a href="https://gitconnected.com" rel="noopener noreferrer"&gt;gitconnected&lt;/a&gt; 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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  What You'll Learn
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;React&lt;/li&gt;
&lt;li&gt;Redux&lt;/li&gt;
&lt;li&gt;Styled Components&lt;/li&gt;
&lt;li&gt;CSS Grid&lt;/li&gt;
&lt;li&gt;CSS Flex&lt;/li&gt;
&lt;li&gt;CSS Animations&lt;/li&gt;
&lt;li&gt;Using an API&lt;/li&gt;
&lt;li&gt;Axios for network requests&lt;/li&gt;
&lt;li&gt;Redux middleware&lt;/li&gt;
&lt;li&gt;Create React App to bootstrap a project&lt;/li&gt;
&lt;li&gt;localStorage for persisting state&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Getting Started
&lt;/h2&gt;

&lt;p&gt;First initialize the project. Our solution uses &lt;a href="https://github.com/facebook/create-react-app" rel="noopener noreferrer"&gt;Create React App&lt;/a&gt;, but feel free to use whatever you want, even static HTML.&lt;/p&gt;

&lt;p&gt;Review the &lt;a href="https://github.com/HackerNews/API" rel="noopener noreferrer"&gt;Hacker New API&lt;/a&gt; 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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;Join the &lt;a href="https://community.gitconnected.com" rel="noopener noreferrer"&gt;Slack channel&lt;/a&gt; to collaborate and get help. This project can be difficult, so make sure you work on it with some friends!&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/3HwA2U7rZgn0pRnV9f/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/3HwA2U7rZgn0pRnV9f/giphy.gif" title="Hacktoberfest Demo" alt="Hacktoberfest Demo" width="480" height="186"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fgitconnected%2Fhacker-news-reader%2Fraw%2Fmaster%2Fpublic%2Fhacktoberfest-screenshot.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fgitconnected%2Fhacker-news-reader%2Fraw%2Fmaster%2Fpublic%2Fhacktoberfest-screenshot.png" title="Hacktoberfest Screenshot" alt="Hacktoberfest Screenshot" width="800" height="262"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>hacktoberfest</category>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
