Multi-Lane Reddit Client

A modern browser-based Reddit client that displays multiple subreddits side-by-side in customizable, responsive lanes. Add, remove, and manage subreddit feeds effortlessly, with your layout and preferences saved automatically.

Project URL: https://roadmap.sh/projects/reddit-client

Features

• Multi-Lane View: Browse posts from multiple subreddits at once, each in its own lane.
• Add/Remove Lanes: Enter any subreddit name to add a new lane. Remove lanes as needed.
• Live Reddit Feed: Fetches posts using Reddit's public JSON feed:
  https://www.reddit.com/r/{subreddit}.json
• Post Details: View each post's title, author, and vote count.
• Validation & Error Handling: Verifies subreddit existence and shows clear error messages for invalid subreddits or API issues.
• Loading States: Loading indicators show while fetching data.
• Persistence: Your custom layout is saved in local storage and restored when you revisit.
• Responsive UI: Optimized for desktop and mobile screens.

Demo

Getting Started

Prerequisites

• Node.js
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/PurvDabhi/reddit-client.git
   cd reddit-client

2. Install dependencies:

   npm install
   # or
   yarn install

3. Start the development server:

   npm run dev
   # or
   yarn dev

   By default, the app runs at http://localhost:5173.

Usage

• Type a subreddit name (e.g., javascript, cats) and add it as a new lane.
• Each lane displays recent posts from its subreddit.
• Remove a lane using its close/delete button.
• Your custom lanes are saved and reloaded automatically.

Project Structure

.
├── index.html
├── package.json
├── vite.config.js
└── src
    ├── App.jsx
    ├── Lane.jsx
    ├── index.css
    └── main.jsx

• App.jsx: Main app logic and lane management.
• Lane.jsx: Renders posts for a single subreddit.
• index.css: Styles for the app.
• main.jsx: Entry point.

Technologies Used

• JavaScript (React)
• CSS
• HTML
• Vite

Links

• Project URL: https://roadmap.sh/projects/reddit-client
• Reddit API Docs: https://www.reddit.com/dev/api/

Acknowledgments

• Inspired by multi-column dashboards and Reddit’s open JSON API.