https://github.com/amirfakhrullah/reddit-client-app
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.
https://github.com/amirfakhrullah/reddit-client-app
react react-router reactjs reddit reddit-api reddit-client redux vercel
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/amirfakhrullah/reddit-client-app
- Owner: amirfakhrullah
- License: gpl-3.0
- Created: 2021-02-15T12:33:02.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-03-04T11:25:49.000Z (over 5 years ago)
- Last Synced: 2025-08-03T09:25:18.093Z (11 months ago)
- Topics: react, react-router, reactjs, reddit, reddit-api, reddit-client, redux, vercel
- Language: JavaScript
- Homepage: https://reddit.amrf.me
- Size: 767 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Reddit Client App
## 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.
## Table of Contents
* [Description](#description)
* [Technologies](#technologies)
* [Lighthouse Score](#lighthouse-score)
* [Setup Process](#setup-process)
* [Ongoing / Future Works](#ongoing-/-future-works)
* [Others](#others)
* [Acknowledgments](#acknowledgements)
## Technologies
### Languages
* Javascript
* JSX
* HTML
* CSS
### Framework / Libraries
* React
* Redux
* Material UI
* AbortController
### Testing Technology
* Enzyme
### Deploy Technology
* Vercel
### Other Technologies
* VSCode
* Git
* GitHub
### Files structure
folder structure for the main files with some brief explanations.
```
> App.js
> App.css
> index.js
> src /
> app /
> reddit.js # file for Reddit Api fetch call
> scrollToTop.js # scroll to top when navigate to page feature
> store.js # redux store
> features /
> AllSubredditsPage / # page to show all the subreddits -> href=/subreddits
> AllSubredditsPage.js
> AllSubredditsPage.css
> Header /
> Header.js
> Header.css
> RedditPost / # box for displaying each post
> RedditPost.js
> RedditPost.css
> RedditPostList / # container to display all posts
> RedditPostList.js
> RedditPostList.css
> RedditPostListSlice.js # reducer logic and action for home posts, and several catagorised posts
> RightSideBar / # displaying subreddits for programmers on the right side of the page (hardcoded)
> RightSideBar.js
> RightSideBar.css
> SearchResults / # page for displaying search results
> SearchResults.js
> SearchResults.css
> SideBar / # left side bar: navigation and trending subreddits
> SideBar.js
> SideBar.css
> SinglePost / # page for displaying singular posts with its comments, and can click on image
> SinglePost.js
> SinglePost.css
> SubredditBox / # feature in the SideBar to display trending subreddits
> SubredditBox.js
> SubredditBox.css
> SubredditsSlice.js # reducer logic and action for storing trending subreddits in redux store
> SubredditPage / # page to display the selected subreddit
> SubredditPage.js
> SubredditPage.css
```
## Lighthouse Score
## Setup Process
* Clone or download the repository
* Open the directory on the terminal and run the development by typing 'npm run' (make sure to npm install everything)
## Ongoing / Future Works
### Ongoing works
* Testing suite using Jest, Enzyme and Selenium
* Circular loading icon feature when loading the page
### Future works
* Adding test for all components, etc.
* Adding the user page
## Others
* if you guys interested in contributing to this web app (fixing bugs or adding new feature), open a new issue.
## Acknowledgements
This 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).