The latest articles on DEV Community by Kai Chen (@kxchen). https://dev.to/kxchen 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%2Fuser%2Fprofile_image%2F380392%2Fb1fad155-0c35-4128-864b-9887554210d0.png https://dev.to/kxchen en Kai Chen Tue, 26 May 2020 05:37:41 +0000 https://dev.to/kxchen/graduation-project-2f2c https://dev.to/kxchen/graduation-project-2f2c <h2> My Final Project </h2> <p>I built a desktop app for reading Reddit without an internet connection.</p> <p>Pre-download subreddits to read offline, including posts and their comments.</p> <p>I built it with <a href="https://sidhyatikku.com">Sidhya Tikku</a> who did the design, with the code being written by me.</p> <h2> Demo Link </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MpShdfPL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/zp3w7c1tknjzre3hqqzf.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MpShdfPL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/zp3w7c1tknjzre3hqqzf.png" alt="Alt Text"></a><br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Bci7ww_b--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/est3hcr3gyjxyn37bkvh.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Bci7ww_b--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/est3hcr3gyjxyn37bkvh.png" alt="Alt Text"></a></p> <h2> Link to Code </h2> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vWogaON8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/github-logo-28d89282e0daa1e2496205e2f218a44c755b0dd6536bbadf5ed5a44a7ca54716.svg" alt="GitHub logo"> <a href="https://github.com/kx-chen"> kx-chen </a> / <a href="https://github.com/kx-chen/Backpack"> Backpack </a> </h2> <h3> Backpack Reader - Read Reddit without an internet connection. </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <h1> Backpack Reader</h1> <p><a href="https://travis-ci.com/kx-chen/reddit-offline-desktop" rel="nofollow"><img src="https://camo.githubusercontent.com/660711f1646899b79782f0970bfabc823209093c/68747470733a2f2f7472617669732d63692e636f6d2f6b782d6368656e2f4261636b7061636b2e7376673f746f6b656e3d7368556475504b634c585152507035685a696871266272616e63683d6d6173746572" alt="Build Status"></a></p> <p>Backpack Reader is a desktop app for downloading and reading Reddit while offline.</p> <p><a rel="noopener noreferrer" href="https://raw.githubusercontent.com/kx-chen/Backpack/master/resources/main.png?raw=true"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--nKACifZg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/kx-chen/Backpack/master/resources/main.png%3Fraw%3Dtrue" alt="Dashboard view" title="Dashboard view"></a></p> <p><a rel="noopener noreferrer" href="https://raw.githubusercontent.com/kx-chen/Backpack/master/resources/sidebar.png?raw=true"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mgFS_JWN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/kx-chen/Backpack/master/resources/sidebar.png%3Fraw%3Dtrue" alt="Sidebar shrunk" title="Shrunk sidebar"></a></p> <p><a rel="noopener noreferrer" href="https://raw.githubusercontent.com/kx-chen/Backpack/master/resources/search.png?raw=true"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IasJiv3D--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/kx-chen/Backpack/master/resources/search.png%3Fraw%3Dtrue" alt="Search for subreddit" title="Search for subreddit"></a></p> <p><a rel="noopener noreferrer" href="https://raw.githubusercontent.com/kx-chen/Backpack/master/resources/post.png?raw=true"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_HDvMFPo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/kx-chen/Backpack/master/resources/post.png%3Fraw%3Dtrue" alt="Post detail" title="Post detail"></a></p> <h2> Install</h2> <p>First, clone the repo via git. And then install the dependencies with yarn.</p> <div class="highlight highlight-source-shell"><pre>$ <span class="pl-c1">cd</span> Backpack $ yarn</pre></div> <h2> Starting Development</h2> <p>Start the app in the <code>dev</code> environment.</p> <div class="highlight highlight-source-shell"><pre>$ yarn dev</pre></div> <h2> Packaging for Production</h2> <p>To package apps for the local platform:</p> <div class="highlight highlight-source-shell"><pre>$ yarn package</pre></div> <h3> Running Tests</h3> <p>This project uses Jest as the test runner.</p> <p><code>$ yarn test</code></p> <h3> End to End Tests</h3> <p>Coming soon.</p> <h2> Code Structure/Tech Stack</h2> <p><code>app/</code></p> <p>Main JavaScript code for Backpack Reader. Components are built with React.</p> <p>Tech Stack:</p> <ul> <li>React</li> <li>Redux</li> <li>Jest</li> </ul> <h2> Contributions</h2> <p>All contributions, pull requests, and feedback welcome! Roasts of all kinds welcome</p> <h2> Future Plans</h2> <ul class="contains-task-list"> <li class="task-list-item"> End to End tests.</li> </ul> <h2> Authors and Acknowledgement</h2> <ul> <li> <strong><a href="https://sidhyatikku.com" rel="nofollow">Sidhya Tikku</a></strong> - <em>Design work</em> </li> <li> <strong><a href="https://kaixingchen.com" rel="nofollow">Kai Chen</a></strong> - <em>Programming work</em> </li> </ul> <p>See also the list of <a href="https://github.com/kx-chen/Backpack/contributors">contributors</a> who participated in this project.</p> </div> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/kx-chen/Backpack">View on GitHub</a></div> <br> </div> <br> <h2> How I built it (what's the stack? did I run into issues or discover something new along the way?) </h2> <p>Built with Electron, React, and Redux. Got more familiar with JavaScript, React, and Yarn along the way. </p> <p>It was interesting and fun to look at Reddit on one screen and try to recreate its CSS by eyeball on the other.</p> <p>Not too many fancy libraries were used, most of the code (like the navbar/sidebar) were created from scratch. Mostly using <code>node-fetch</code> for API requests, and <code>node-fs-extra</code> for managing files locally.</p> <p>One of the challenges that we faced was collaborating. I live in Canada and Sidhya lives in India, so we had to schedule our Zoom calls at late in the night.</p> <h2> Additional Thoughts / Feelings / Stories </h2> <p>If you think this is a cool idea, it would mean the world to us if you gave a star on GitHub!</p> <p><a href="https://github.com/kx-chen/Backpack">https://github.com/kx-chen/Backpack</a></p> octograd2020 devgrad2020