Code Monkey home page Code Monkey logo

troddit's Introduction

Troddit

An alternative front end web client for Reddit

Live at troddit.com

ko-fi

Images

Flexible column viewing.

Shown browsing a multi-reddit. Subreddits pane and options menu open. columns_options

Classic rows view

classicrows_light

with inline media expansion and custom reddit video player

lightmode_row_open

Open posts with comments to the side and use arrows for navigation

post_open

Search for subreddits, users, and posts.

Shown in single column mode with wide UI disabled. Sort options menu is open. search_narrow

Fully responsive, downloadable as PWA

responsive_troddit

Features

  • Secure logins with Reddit to enable voting, commenting, managing your subreddits and multireddits (aka feeds), and access to your personal front page.
  • 'Offline mode' to follow subreddits and manage multis locally without login. Autogenerates a personal front page.
    • Visit your subreddits multi and copy the multireddit link. Replace 'reddit' with 'troddit' in the URL and then use the 'Join All' option to quickly follow all subs locally.
  • Search Reddit for posts or subreddits quickly with auto-complete.
  • Filter posts by type (Images, Video/GIFs, Links, Self)
  • View posts in single column, custom multi-column with a grid-masonry layout, or a simple row mode. All with infinite-scrolling.
  • Choose your card style: Original for full post text in card, Compact to exclude post text, or Media to hide all text and card padding.
  • Gallery view: Click on a post and navigate through the feed with on screen buttons or your arrow keys. Shows the post content as well as its comments from Reddit. Smart portrait mode to automatically arrange vertical photos and videos side by side with comments.
  • Hover mouse over Reddit videos to play. Enable to Autoplay option to play videos automatically when entering the viewport. Enable the Audio option to play sound on hover as well.
  • Responsive desktop and mobile layouts.
  • PWA to download to your computer or phone.
  • Docker support

Developing

Clone the repo and install all packages with npm or yarn. Then to run development server:

npm run dev
# or
yarn run dev

Open http://localhost:3000 with your browser to see the result.

To contribute create a branch and submit a PR!

Environment Variables

To use login functionality the following environment variables need to be defined in a .env.local file placed in the root directory:

CLIENT_ID=<ID of your Reddit app>
CLIENT_SECRET=<Secret from your Reddit app>
REDDIT_REDIRECT=http://localhost:3000/api/auth/callback/reddit
NEXTAUTH_SECRET=<See https://next-auth.js.org/configuration/options#secret>
NEXTAUTH_URL=http://localhost:3000

To create a Reddit app visit https://old.reddit.com/prefs/apps/. The redirect uri should match the REDDIT_REDIRECT variable.

Docker

To Deploy the Docker Image

docker pull bsyed/troddit
docker run -d --name troddit -p 3000:3000 bsyed/troddit

Alternatively for arm64:

docker pull bsyed/troddit:arm64

To Build the Image Yourself

By default, the Docker will expose port 3000, so change this within the Dockerfile if necessary. When ready, simply use the Dockerfile to build the image.

git clone https://github.com/burhan-syed/troddit
cd troddit
docker build . -t troddit

This will create the troddit image and pull in the necessary dependencies. To run:

docker run -p 3000:3000 troddit

troddit's People

Contributors

burhan-syed avatar dependabot[bot] avatar elijahpepe avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.