feat: 🎨

README.md

@@ -1,62 +1,70 @@
 # Reddit Client  
 
+<div align="center">
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/8e0a7204-8850-4b4a-9340-01317eaabc56/deploy-status)](https://app.netlify.com/sites/redditclient/deploys)
+[![CircleCI](https://circleci.com/gh/funmilolajire/redditclient.svg?style=svg)](https://circleci.com/gh/funmilolajire/redditclient)
+[![Maintainability](https://api.codeclimate.com/v1/badges/41d360fd6a9955a30487/maintainability)](https://codeclimate.com/github/funmilolajire/redditclient/maintainability)
+[![GitHub Issues](https://img.shields.io/github/issues/funmilolajire/redditclient.svg)](https://github.com/funmilolajire/redditclient/issues)
+[![GitHub Pull Requests](https://img.shields.io/github/issues-pr/funmilolajire/redditclient.svg)](https://github.com/funmilolajire/redditclient/pulls)
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)
+
+</div>
+
 > This is a web application that retrieves data from reddit using it's api and allows users to view and search posts and comments provided by the api.
 
 ## Table of contents  
 
 - [General info](#general-info)
+- [Screenshots](#screenshots)
+- [Technologies](#technologies)
+- [Setup](#setup)
 - [Features](#features)
 - [Status](#status)
 - [Inspiration](#inspiration)
 - [Contact](#contact)
 
 ## General info  
 
-This project is built on reddit's api, user's are able to see an initial view when first visiting the site, they can search for posts using terms, can filter the results based on predefined categories and view comments under each post. It is responsive and can be used on any modern browser.  
-This project is built to practice my react, redux, and test driven development skills. I use git for version control, zenhub for project management, jest and enzyme to write unit tests, testcafe for end to end tests, gsap for animations, circleci to set up the project's ci/cd workflow, code climate for code coverage and maintainability, and wrote the code following web accessiblity best practices.  
+This project is built on reddit's api, user's are able to see an initial view when first visiting the site, they can search for posts using terms, can filter the results based on predefined categories and view comments under each post. It is responsive and can be used on any modern browser.
 
-<!-- ## Screenshots include wireframes plix  
+## Screenshots  
 
-(!)[Example screenshot](./img/screenshot.png)
+![mainScreenshot](./public/screenshots/RedditClient.png)
+![modalScreenshot](./public/screenshots/RedditClientModal.png)
 
 ## Technologies  
 
-- Tech 1 - version 1.0
-- Tech 2 - version 2.0
-- Tech 3 - version 3.0
+- React - version 17.0.1  
+- ReduxJS/Toolkit - version 1.5.0
+- TailwindCSS - version 2.0.3
+- TypeScript - version 4.0.3
+- GSAP - version 3.6.0
+- Node Sass - version 5.0.0
+- VideoJS - version 7.11.4
+- Enzyme - version 3.11.0
+- DayJS - version 1.10.4
+- HTML React Parser - version 1.2.4
+- React Icons - version 4.2.0
 
 ## Setup  
 
-Describe how to install / setup your local environement / add link to demo version.
-
-## Code Examples  
-
-Show examples of usage:
-`put-your-code-here`
--->
+Visit [redditclient](https://redditclient.netlify.app) i your browser.
 
 ## Features  
 
-<!--List of features ready and TODOs for future development
-- Awesome feature 1
-- Awesome feature 2
-- Awesome feature 3
--->
-
-To-do list:  
-
 - Application can be used on any device
 - Application can be used on any modern browser
 - Shows an initial view of data to user on first visit
 - Users can search data using terms
 - Users can filter data based on predefined categories
 - Users are shown a detail view when they select an item
 - Users are able to leave an error state
-- Application should be a progressive web app
+- Application is a progressive web app
 
 ## Status  
 
-Project is: _in progress_
+Project is: _finished_
 
 ## Inspiration  
 

coverage/lcov-report/app/App.tsx.html

@@ -72,8 +72,8 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">app</a> App.tsx
 <a name='L13'></a><a href='#L13'>13</a>
 <a name='L14'></a><a href='#L14'>14</a>
 <a name='L15'></a><a href='#L15'>15</a>
-<a name='L16'></a><a href='#L16'>16</a>
-<a name='L17'></a><a href='#L17'>17</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L16'></a><a href='#L16'>16</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -87,32 +87,29 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">app</a> App.tsx
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { Header } from '../components/Header';
-// import { ComingSoon } from '../components/ComingSoon';
-import { Posts } from '../components/Posts';
-import { Subreddits } from '../components/Subreddits';
+import { Main } from '../components/Main';
+import { Sidebar } from '../components/Sidebar';
+import { ScrollToTop } from '../components/ScrollToTop';
 import '../scss/main.scss';
-export const App = () =&gt; {
-    return (
-        &lt;div className="App"&gt;
-            &lt;Header /&gt;
-            {/* &lt;ComingSoon /&gt; */}
-            &lt;main&gt;
-                &lt;Subreddits /&gt;
-                &lt;Posts /&gt;
-            &lt;/main&gt;
-        &lt;/div&gt;
-    )
-}</pre></td></tr></table></pre>
+&nbsp;
+export const App = () =&gt; (
+    &lt;div className="App"&gt;
+        &lt;Header /&gt;
+        &lt;main&gt;
+            &lt;Sidebar /&gt;
+            &lt;Main /&gt;
+        &lt;/main&gt;
+        &lt;ScrollToTop /&gt;
+    &lt;/div&gt;
+)</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
             </div><!-- /wrapper -->
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Mon Mar 15 2021 02:15:09 GMT+0100 (West Africa Standard Time)
+                at Mon Apr 05 2021 21:16:59 GMT+0100 (West Africa Standard Time)
             </div>
         </div>
         <script src="../prettify.js"></script>

coverage/lcov-report/app/index.html

@@ -95,7 +95,7 @@ <h1><a href="../index.html">All files</a> app</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Mon Mar 15 2021 02:15:09 GMT+0100 (West Africa Standard Time)
+                at Mon Apr 05 2021 21:16:59 GMT+0100 (West Africa Standard Time)
             </div>
         </div>
         <script src="../prettify.js"></script>

coverage/lcov-report/components/ComingSoon.tsx.html

@@ -123,8 +123,8 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">components</a>
     })
 &nbsp;
     return (
-        &lt;div ref={boxRef} className="container flex items-center justify-center h-screen font-extrabold ComingSoon"&gt;
-            &lt;div className="bg-yellow-500 border-2 border-gray-800 border-solid skew-y-2 transform-gpu text-gray-50 text-9xl"&gt;
+        &lt;div ref={boxRef} className="ComingSoon"&gt;
+            &lt;div&gt;
                 &lt;p&gt;Coming Soon&lt;/p&gt;
             &lt;/div&gt;
         &lt;/div&gt;
@@ -136,7 +136,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">components</a>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Mon Mar 15 2021 02:15:09 GMT+0100 (West Africa Standard Time)
+                at Mon Apr 05 2021 21:16:59 GMT+0100 (West Africa Standard Time)
             </div>
         </div>
         <script src="../prettify.js"></script>

coverage/lcov-report/components/Header.tsx.html

@@ -144,7 +144,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">components</a>
 export const Header = () =&gt; {
     const boxRef = useRef&lt;HTMLDivElement&gt;(null);
     const logoRef = useRef&lt;HTMLImageElement&gt;(null);
-    const titleRef = useRef&lt;HTMLHeadingElement&gt;(null);
+    const nameRef = useRef&lt;HTMLHeadingElement&gt;(null);
 &nbsp;
     useLayoutEffect(() =&gt; {
         const tl = gsap.timeline({});
@@ -156,7 +156,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">components</a>
             opacity: 0,
             ease: 'circ'
         })
-        tl.from([titleRef.current], {
+        tl.from([nameRef.current], {
             x: '3000px',
             opacity: 0,
             ease: 'slow'
@@ -170,7 +170,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">components</a>
                     &lt;figure ref={logoRef}&gt;
                         &lt;img src={logo} alt="site logo" /&gt;
                     &lt;/figure&gt;
-                    &lt;h1 ref={titleRef}&gt;
+                    &lt;h1 ref={nameRef}&gt;
                         &lt;span&gt;Reddit&lt;/span&gt;Client
                     &lt;/h1&gt;
                 &lt;/section&gt;
@@ -184,7 +184,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">components</a>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Mon Mar 15 2021 02:15:09 GMT+0100 (West Africa Standard Time)
+                at Mon Apr 05 2021 21:16:59 GMT+0100 (West Africa Standard Time)
             </div>
         </div>
         <script src="../prettify.js"></script>