Reddit Clone Frontend

A modern React application built with Create React App (CRA) that replicates Reddit's core functionality. This frontend communicates with a backend API and is designed for containerized deployment.

🚀 Features

• Modern React Architecture: Built with React 18 and Create React App (react-scripts)
• Responsive Design: Mobile-first approach with modern CSS and responsive layouts
• Component-Based Structure: Well-organized components, pages, and services
• State Management: Context API for global state (Auth, Theme)
• API Integration: Axios-based service layer for backend communication
• Theme Support: Light/Dark theme switching
• Docker Ready: Containerized deployment with Dockerfile

📁 Project Structure

frontend/
│
├── public/                       # Static assets served as-is
│   ├── favicon.ico              # Browser favicon
│   ├── index.html               # HTML entry point
│   ├── manifest.json            # PWA manifest
│   ├── Reddit-Logo.png          # Reddit logo
│   └── robots.txt               # SEO robots file
│
├── src/
│   ├── assets/                   # Static assets (images, icons)
│   │   └── icons/                # SVG/PNG icons
│   │       ├── ad.svg
│   │       ├── bell.svg
│   │       ├── chat.svg
│   │       ├── menu-btn.svg
│   │       ├── plus.svg
│   │       ├── post.png
│   │       ├── post1.png
│   │       ├── reddit.png
│   │       └── Reddit-Logo.png
│   │
│   ├── components/               # Reusable UI components
│   │   ├── Comment.jsx           # Comment display component
│   │   ├── CommunityCard.jsx     # Community card component
│   │   ├── FeedToolbar.jsx       # Feed sorting toolbar
│   │   ├── FeedToolbar.css
│   │   ├── FloatingMenuButton.jsx # Mobile menu button
│   │   ├── FloatingMenuButton.css
│   │   ├── Loader.jsx            # Loading spinner
│   │   ├── Navbar.jsx            # Top navigation bar
│   │   ├── Navbar.css
│   │   ├── PostCard.jsx          # Post card component
│   │   ├── PostCard.css
│   │   ├── SearchBar.jsx         # Search input component
│   │   ├── SearchHero.jsx        # Search hero section
│   │   ├── SearchHero.css
│   │   ├── Sidebar.jsx           # Sidebar component
│   │   └── Sidebar.css
│   │
│   ├── context/                  # React Context for global state
│   │   ├── AuthContext.jsx       # Authentication state management
│   │   └── ThemeContext.jsx      # Theme (light/dark) state management
│   │
│   ├── data/                     # Static data and mock data
│   │   └── dummyPost.json        # Sample post data for testing
│   │
│   ├── hooks/                    # Custom React hooks
│   │   ├── useAuth.js            # Hook for authentication context
│   │   ├── useFetch.js           # Hook for data fetching
│   │   └── useTheme.js           # Hook for theme context
│   │
│   ├── pages/                    # Page-level components (routes)
│   │   ├── Community.jsx         # Community/subreddit page
│   │   ├── CreatePost.jsx        # Create new post page
│   │   ├── Home.jsx              # Home feed page
│   │   ├── Login.jsx             # Login page
│   │   ├── Login.css             # Login page styles
│   │   ├── NotFound.jsx          # 404 error page
│   │   ├── PostDetails.jsx       # Single post view page
│   │   ├── Profile.jsx           # User profile page
│   │   ├── Register.jsx          # User registration page
│   │   └── Search.jsx            # Search results page
│   │
│   ├── services/                 # API service layer
│   │   ├── api.js                # Axios instance and interceptors
│   │   ├── aiService.js          # AI-related API calls
│   │   ├── authService.js        # Authentication API calls
│   │   ├── communityService.js   # Community API calls
│   │   ├── postService.js        # Post API calls
│   │   └── userService.js        # User API calls
│   │
│   ├── styles/                   # Global styles and utilities
│   │   ├── globals.css           # Global CSS styles
│   │   ├── reddit-utilities.css  # Reddit-specific utility classes
│   │   └── theme.css             # Theme variables (light/dark)
│   │
│   ├── App.jsx                   # Main App component with routes
│   ├── App.css                   # App-level styles
│   ├── App.test.js               # App component tests
│   ├── index.js                  # React entry point (CRA)
│   ├── index.css                 # Global CSS imports
│   ├── reportWebVitals.js        # Performance monitoring (CRA)
│   └── setupTests.js             # Test configuration (Jest)
│
├── .env                          # Environment variables (not in git)
├── .gitignore                    # Git ignore rules
├── Dockerfile                    # Docker image configuration
├── env.example                   # Environment variables template
├── nginx.conf                    # Nginx config for production
├── package.json                  # Dependencies (CRA/react-scripts)
├── package-lock.json             # Dependency lock file
└── README.md                     # This file

🛠️ Technologies Used

• React 18 - Modern React with hooks and functional components
• Create React App (react-scripts) - Zero-config build and dev server
• Axios - HTTP client for API communication
• CSS3 - Modern styling with CSS variables and responsive design
• Docker - Containerization for deployment (Nginx serving build)

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone <repository-url>
   cd Reddit-Clone/frontend

2. Install dependencies:

   npm install

3. Set up environment variables:

   cp env.example .env

   Edit .env and set your API URL:

   REACT_APP_API_URL=http://localhost:3001/api
   

4. Start the development server:

   npm start

5. Open http://localhost:3000 to view the application.

🐳 Docker Deployment

Build and run with Docker (production build served by Nginx):

# Build the Docker image
docker build -t reddit-clone-frontend .

# Run the container
docker run -p 80:80 reddit-clone-frontend

The application will be available at http://localhost:80.

📝 Available Scripts

• npm start - Start development server (CRA)
• npm run build - Build for production
• npm test - Run tests (Jest + React Testing Library)
• npm run eject - Eject CRA configuration (not recommended)

🎨 Design Features

• Reddit-inspired UI: Clean, modern interface matching Reddit's design language
• Responsive Layout: Optimized for desktop, tablet, and mobile devices
• Theme Support: Light and dark theme options
• Accessibility: ARIA labels and keyboard navigation support
• Performance: Optimized bundle size and fast loading times

Environment Variables

• REACT_APP_API_URL - Backend API base URL
• NODE_ENV - Environment (development/production)

CRA Notes

• CRA uses react-scripts for dev/build/test. Configuration is internal unless ejected.
• Static files live under public/. The app entry is src/index.js.

🔗 Related Projects

• Backend API (separate repository)
• Database schemas and migrations
• Deployment configurations