jarianc/redhead
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
redhead/README.md
Jarian Cottingham 988a5eaa53 initial redhead implementation.
2025-10-14 10:31:40 -05:00

2.2 KiB
Raw Blame History

Reddit Clone

A responsive Reddit-like application with infinite scroll functionality that displays the latest Reddit articles.

Features

  • Infinite Scroll: Automatically loads more posts as you scroll down
  • Responsive Design: Works well on both desktop and mobile devices
  • Image Preview: Each post displays a picture frame with a placeholder image
  • Modern UI: Clean, attractive interface with hover effects and smooth transitions

Project Structure

.
├── index.html          # Main HTML structure
├── styles.css          # Responsive styling
└── app.js              # JavaScript logic for posts and infinite scroll

How It Works

  1. The application loads the first 10 Reddit posts when the page is initially loaded
  2. As users scroll down, it automatically loads more posts (10 at a time)
  3. Uses Intersection Observer API for efficient infinite scrolling
  4. Falls back to manual scroll detection for older browsers
  5. Each post displays:
    • A title
    • An image frame
    • A link to the original Reddit post

Implementation Details

  • Responsive Design: Uses CSS Grid for adaptive layouts that work on mobile and desktop
  • Performance: Lazy loading of images and efficient scroll handling
  • Mock Data: Currently uses mock data for demonstration purposes (will be replaced with real API calls)
  • User Experience: Loading indicators and smooth animations

How to Use

  1. Open index.html in a web browser
  2. Scroll down to see more posts load automatically
  3. Click on post titles to view them on Reddit

Customization

To connect to a real Reddit API:

  1. Replace the mock data in app.js with actual API calls
  2. Update the fetchRedditPosts() and fetchMorePosts() functions to fetch from Reddit's API
  3. Adjust styling in styles.css to match desired aesthetics

Technologies Used

  • HTML5
  • CSS3 (Grid, Flexbox, Media Queries)
  • JavaScript ES6+
  • Intersection Observer API for efficient scrolling

Responsive Design

The application is fully responsive and will adapt to:

  • Desktop: Grid layout with 2-3 columns based on screen width
  • Tablet: Reduced grid columns
  • Mobile: Single column layout with appropriate spacing