{"id":19443768,"url":"https://github.com/aretecode/reddit-lite","last_synced_at":"2026-05-13T22:35:47.657Z","repository":{"id":85930948,"uuid":"186697842","full_name":"aretecode/reddit-lite","owner":"aretecode","description":"minimal reddit client using react","archived":false,"fork":false,"pushed_at":"2019-05-16T23:03:13.000Z","size":329,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-25T08:16:25.328Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://reddit-lite.aretecode.now.sh","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aretecode.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-14T20:46:03.000Z","updated_at":"2023-03-08T03:42:04.000Z","dependencies_parsed_at":"2023-05-03T15:33:34.008Z","dependency_job_id":null,"html_url":"https://github.com/aretecode/reddit-lite","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aretecode/reddit-lite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aretecode%2Freddit-lite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aretecode%2Freddit-lite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aretecode%2Freddit-lite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aretecode%2Freddit-lite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aretecode","download_url":"https://codeload.github.com/aretecode/reddit-lite/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aretecode%2Freddit-lite/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33002875,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"ssl_error","status_checked_at":"2026-05-13T13:14:51.610Z","response_time":115,"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":[],"created_at":"2024-11-10T15:44:06.569Z","updated_at":"2026-05-13T22:35:47.641Z","avatar_url":"https://github.com/aretecode.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Reddit Lite (React Clone)\n\n\u003e displays a list of posts in any subreddit, 25 at a time with the ability to page for more.\n\n[![StackShare](https://img.shields.io/badge/tech-stack-0690fa.svg?style=flat)](https://stackshare.io/aretecode/reddit-lite)\n[![Build Status](https://travis-ci.org/aretecode/reddit-lite.svg?branch=master)](https://travis-ci.org/aretecode/reddit-lite)\n\n[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/aretecode/reddit-lite)\n\n## Usage\n1. to select a subReddit, append `subReddit=NAME_HERE` to the search params (_[example here](https://reddit-lite.aretecode.now.sh/?subReddit=canada)_)\n2. to use a custom graphql endpoint, use `graphql=API_URL_HERE` in the search params (_[example here](https://reddit-lite.aretecode.now.sh/?subReddit=canada\u0026graphql=https://reddit-lite-graphql.now.sh/graphql)_)\n\n### Deployments\n##### Reddit React Lite\n[reddit-lite.aretecode.now.sh](https://reddit-lite.aretecode.now.sh/)\n\u003e for the React code (_with Redux devtools enabled_)\n\n![reddit lite](https://user-images.githubusercontent.com/4022631/57826883-0f5c9b00-775a-11e9-99ae-cd5582993d50.gif)\n\n##### Reddit React Lite (GraphQL)\n- [reddit-lite.aretecode.now.sh/graphql](https://reddit-lite.aretecode.now.sh/graphql) for graphql playground\n- [aretecode/reddit-lite-graphql](https://github.com/aretecode/reddit-graphql) for the code\n\n\u003cimg width=\"1091\" alt=\"Screen Shot 2019-05-15 at 9 38 21 PM\" src=\"https://user-images.githubusercontent.com/4022631/57826875-07046000-775a-11e9-9219-993d2e91c6e7.png\"\u003e\n\n\n##### Storybook\n- [reddit-lite.aretecode.now.sh/ui/index.html](https://reddit-lite.aretecode.now.sh/ui/index.html?path=/story/post--as-dynamic-variables) for the static storybook deployment\n\n\u003cimg width=\"652\" alt=\"Screen Shot 2019-05-15 at 9 37 54 PM\" src=\"https://user-images.githubusercontent.com/4022631/57826877-0966ba00-775a-11e9-955c-94d5be3f27d6.png\"\u003e\n\n\n## Development\n\n```bash\ngit clone git@github.com:aretecode/reddit-lite.git\n\nyarn install\nyarn dev\n```\n\n#### Storybook\n```bash\nyarn dev:storybook\n```\n#### Tests\n```bash\nyarn test\n```\n\n## Requirements/Priorities\n\n\u003e \"it doesn’t exist if it’s not written down”\n\n1. Minimal, simple styles, high code quality\n2. Each post must include (_the \"classic\" view_)\n\n- title\n- link to the post/site\n- a thumbnail if it exists\n- the user who posted it\n- time submitted\n- a link to the comments on reddit\n\n3. The viewer must automatically refresh the data every minute (_ideally, without losing position of the page so that the content doesn’t jump around_).\n\n4. Don't use a Reddit API library\n5. Basic documentation\n\n## Execution\n\n\u003e _can move execution to github project if needed_\n\n1. project requirements\n2. research\n3. project setup (_readme, configs, utils, typings, ssr setup [since we are using next.js]_)\n4. initial component shells (_page, header, list, default styles_)\n5. api data\n6. defining the data model\n7. tests\n8. data flow\n9. deploy\n10. more tests, polish\n\n## API\n\n- [aretecode/reddit-lite-graphql](https://github.com/aretecode/reddit-graphql) contains the important apollo graphql server around the reddit api\n- [example json response](https://reddit.com/r/vancouver.json) (_add .json to any subreddit_)\n- [reddit - official api](https://www.reddit.com/dev/api/) (_not required... yet_)\n\n## Stack\n\n- [react](https://github.com/facebook/react/) ui framework\n- [next.js](https://nextjs.org/) for quick starting SSR ready react apps\n- [redux](https://github.com/reduxjs/redux) state management (_though we do not need it much here_) with [hooks](https://medium.freecodecamp.org/how-to-integrate-react-hooks-into-your-project-without-changing-your-redux-code-974e6f70f0b0)\n- [apollo graphql](https://github.com/apollographql/apollo-client) to use the reddit api in a better way, decoupling frontend from backend.\n- [styled-components](https://www.styled-components.com/) for the best css in es6 solution\n- [stylelint](https://stylelint.io/user-guide/css-processors/) to lint our css (_integrated with styled-components_)\n- [typescript](https://www.typescriptlang.org/) for type safe, scalable js\n- [editorconfig](https://editorconfig.org/) for consistent formatting across editors\n- [eslint](https://eslint.org/) with [eslint-plugin-typescript](https://github.com/typescript-eslint/typescript-eslint) to lint our js and ts (_since it has some rules not included in tslint_)\n- [tslint](https://palantir.github.io/tslint/) to lint typescript\n- [jest](https://jestjs.io/) for unit testing\n- [travis-ci](https://travis-ci.org/) to run those tests\n- [danger-js](https://danger.systems/js/) to automate common PR chores (_just to comment files changed in PRs here_)\n- [Makefile](https://gist.github.com/isaacs/62a2d1825d04437c6f08) classic build system to simply run our tasks by just typing `make`\n- [zeit now](https://zeit.co/now) to quickly and easily deploy code\n- [material design icons](https://material.io/tools/icons/) simple SVG icon components\n- [yarn](https://yarnpkg.com/en/) to handle package management **NOTE**: the `resolutions` are used to de-duplicate dependencies from dependencies of dependencies\n- [storybook](https://github.com/storybooks/storybook) to run our components in their own page easily\n- [babel](https://babeljs.io/) with [babel-preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript) to integrate with next.js and add polyfills where required\n\n## Code Structure\n\n- as per default [next.js](https://github.com/zeit/next.js/), `pages` are in `pages/*` (_along with `_app.tsx` and `_document.tsx` which basically setup every page_), the rest is in `src/`\n- `src/AppStyles` has the default app styles\n- `src/graphql` contains apollo client, and the queries\n- `src/redux` our redux state\n- `src/utils` common utils **NOTE**: for this project, they have been tested externally and copied in, they can be published as their own libraries, or swapped for external libraries\n- each component (_generally_) contains\n  - `index.ts` exports the other files\n  - `FolderNameHere.tsx` this means we have `FolderNameHere/FolderNameHere.tsx` which makes it very easy to find when searching components\n  - `FolderNameHere.story.tsx` the storybook story (_at least a `default` story_)\n  - `__tests__` with jest unit tests (_at least a `snapshot` test of exports \u0026| render_)\n  - `styled.ts` elements used by other components, and styled() wrappings of components for use in easy styling\n  - `renderProps.tsx` if any renderProps exist, they are here\n  - `typings` typescript interfaces \u0026 typings if they exist\n\n## Learn More\n\n- [reddit graphql - code](https://github.com/clayallsopp/graphqlhub/blob/master/graphqlhub-schemas/src/reddit.js)\n- [reddit graphql - graphqlhub](\u003chttps://www.graphqlhub.com/playground?query=%7B%0A%20%09reddit%20%7B%0A%20%20%20%20user(username%3A%20%22kn0thing%22)%20%7B%0A%20%20%20%20%20%20username%0A%20%20%20%20%20%20commentKarma%0A%20%20%20%20%20%20createdISO%0A%20%20%20%20%7D%0A%20%20%20%20subreddit(name%3A%20%22movies%22)%7B%0A%20%20%20%20%20%20newListings(limit%3A%202)%20%7B%0A%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20comments%20%7B%0A%20%20%20%20%20%20%20%20%20%20body%0A%20%20%20%20%20%20%20%20%20%20author%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20username%0A%20%20%20%20%20%20%20%20%20%20%09commentKarma%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D\u003e)\n- [Example reddit - official reddit site](https://www.reddit.com/r/vancouver/)\n- [Official Redux Example with reddit](https://redux.js.org/advanced/example-reddit-api)\n- [Example Redux Example with reddit - codesandbox](https://codesandbox.io/s/72j28q2k50)\n- [Example Redux React Client with Semantic UI](https://github.com/iksz1/reddit-client)\n- [Reddit React Native](https://codeburst.io/creating-a-reddit-reader-in-react-native-with-expo-styled-components-and-redux-saga-21e7fffba20e)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faretecode%2Freddit-lite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faretecode%2Freddit-lite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faretecode%2Freddit-lite/lists"}