{"id":26924141,"url":"https://github.com/amirfakhrullah/reddit-client-app","last_synced_at":"2026-04-04T20:32:14.045Z","repository":{"id":54374560,"uuid":"339071849","full_name":"amirfakhrullah/reddit-client-app","owner":"amirfakhrullah","description":"A front-end web app displaying data fetched from Reddit API. The web app is designed using React and Redux with testing using Enzyme. The goal is to redesign the Reddit website to fit my preference; which are clean and minimalist with a matte black tone.","archived":false,"fork":false,"pushed_at":"2021-03-04T11:25:49.000Z","size":785,"stargazers_count":4,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-03T09:25:18.093Z","etag":null,"topics":["react","react-router","reactjs","reddit","reddit-api","reddit-client","redux","vercel"],"latest_commit_sha":null,"homepage":"https://reddit.amrf.me","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amirfakhrullah.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-15T12:33:02.000Z","updated_at":"2025-07-31T21:07:51.000Z","dependencies_parsed_at":"2022-08-13T13:50:12.164Z","dependency_job_id":null,"html_url":"https://github.com/amirfakhrullah/reddit-client-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/amirfakhrullah/reddit-client-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amirfakhrullah%2Freddit-client-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amirfakhrullah%2Freddit-client-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amirfakhrullah%2Freddit-client-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amirfakhrullah%2Freddit-client-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amirfakhrullah","download_url":"https://codeload.github.com/amirfakhrullah/reddit-client-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amirfakhrullah%2Freddit-client-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31413267,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T20:09:54.854Z","status":"ssl_error","status_checked_at":"2026-04-04T20:09:44.350Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-router","reactjs","reddit","reddit-api","reddit-client","redux","vercel"],"created_at":"2025-04-02T01:53:19.666Z","updated_at":"2026-04-04T20:32:14.024Z","avatar_url":"https://github.com/amirfakhrullah.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Reddit Client App\n\n![demo](./demo.JPG)\n\n## Description\n\nA front-end web app displaying data fetched from Reddit API. The web app is designed using React and Redux with testing using Enzyme. The goal is to redesign the Reddit website to fit my preference; which are clean and minimalist with a matte black tone.\n\n## Table of Contents\n\n* [Description](#description)\n* [Technologies](#technologies)\n* [Lighthouse Score](#lighthouse-score)\n* [Setup Process](#setup-process)\n* [Ongoing / Future Works](#ongoing-/-future-works)\n* [Others](#others)\n* [Acknowledgments](#acknowledgements)\n\n## Technologies\n\n### Languages\n\n* Javascript\n* JSX\n* HTML\n* CSS\n\n### Framework / Libraries\n\n* React\n* Redux\n* Material UI\n* AbortController\n\n### Testing Technology\n\n* Enzyme\n\n### Deploy Technology\n\n* Vercel\n\n### Other Technologies\n\n* VSCode\n* Git\n* GitHub\n\n### Files structure\n\nfolder structure for the main files with some brief explanations.\n\n```\n\u003e App.js\n\u003e App.css\n\u003e index.js\n\u003e src /\n    \u003e app /\n        \u003e reddit.js         # file for Reddit Api fetch call\n        \u003e scrollToTop.js    # scroll to top when navigate to page feature\n        \u003e store.js          # redux store\n    \n    \u003e features /\n            \u003e AllSubredditsPage /       # page to show all the subreddits -\u003e href=/subreddits\n                    \u003e AllSubredditsPage.js\n                    \u003e AllSubredditsPage.css\n                \n            \u003e Header /              \n                    \u003e Header.js\n                    \u003e Header.css\n            \u003e RedditPost /          # box for displaying each post\n                    \u003e RedditPost.js\n                    \u003e RedditPost.css\n                \n            \u003e RedditPostList /      # container to display all posts\n                        \u003e RedditPostList.js\n                        \u003e RedditPostList.css\n                        \u003e RedditPostListSlice.js    # reducer logic and action for home posts, and several catagorised posts\n                \n            \u003e RightSideBar /        # displaying subreddits for programmers on the right side of the page (hardcoded)\n                        \u003e RightSideBar.js\n                        \u003e RightSideBar.css\n\n            \u003e SearchResults /       # page for displaying search results\n                        \u003e SearchResults.js\n                        \u003e SearchResults.css\n\n            \u003e SideBar /         # left side bar: navigation and trending subreddits\n                        \u003e SideBar.js\n                        \u003e SideBar.css\n\n            \u003e SinglePost /      # page for displaying singular posts with its comments, and can click on image\n                        \u003e SinglePost.js\n                        \u003e SinglePost.css\n\n            \u003e SubredditBox /        # feature in the SideBar to display trending subreddits\n                        \u003e SubredditBox.js\n                        \u003e SubredditBox.css\n                        \u003e SubredditsSlice.js   # reducer logic and action for storing trending subreddits in redux store\n\n            \u003e SubredditPage /       # page to display the selected subreddit\n                        \u003e SubredditPage.js\n                        \u003e SubredditPage.css\n```\n\n## Lighthouse Score\n\n![lighthouse-score](./lighthouse-score.JPG)\n\n## Setup Process\n\n* Clone or download the repository\n* Open the directory on the terminal and run the development by typing 'npm run' (make sure to npm install everything)\n\n## Ongoing / Future Works\n\n### Ongoing works\n\n* Testing suite using Jest, Enzyme and Selenium\n* Circular loading icon feature when loading the page\n\n### Future works\n\n* Adding test for all components, etc.\n* Adding the user page\n\n## Others\n\n* if you guys interested in contributing to this web app (fixing bugs or adding new feature), open a new issue.\n\n## Acknowledgements\n\nThis project obtains the data from Reddit API. I have nothing to do with the content displayed in the web app. This is a Codecademy project for Full-Stack Software Engineering Course. The goal was to practice and implement the front-end skills gained during the course (HTML, CSS, JavaScript, React, Redux, Jest, Enzyme and Selenium, Git and Github Projects, Command line, Wireframes).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famirfakhrullah%2Freddit-client-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famirfakhrullah%2Freddit-client-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famirfakhrullah%2Freddit-client-app/lists"}