Reddit Clone (React + Vite)

A lightweight Reddit-style front page built with React and Vite. It includes a mocked OAuth PKCE login flow, a protected Profile page, and a Hot Posts feed with a Reddit-like UI. No backend is required for the current mock flow.

Features

• Mocked OAuth PKCE login and logout flow with a callback route
• Protected Profile page showing token-gated sample data
• Hot Posts feed with Reddit-style cards and sidebars
• Minimal routing using browser history; handled paths: /, /callback, /profile
• Tailwind UI via CDN (no build-time CSS setup)
• ESLint configured

Tech Stack

• React 19, Vite 7
• React Router (BrowserRouter wrapper)
• ESLint 9
• Axios is available for future API calls

Getting Started

Prerequisites:

• Node.js 18+ and npm

Install and run:

npm install
npm run dev

Open http://localhost:5173 and use the Login button to trigger the mock OAuth flow. You will be redirected to /callback, and then to the protected /profile page.

Build and preview:

npm run build
npm run preview

Lint:

npm run lint

OAuth Setup (Optional, Real Reddit)

The app ships with a mocked PKCE flow. To integrate a real Reddit OAuth:

• Create a Reddit app at https://www.reddit.com/prefs/apps
• Set type “web app” and add redirect URI http://localhost:5173/callback
• Update CLIENT_ID and verify REDIRECT_URI in src/App.jsx
• Perform the token exchange on your backend against https://www.reddit.com/api/v1/access_token using authorization_code, code_verifier, and your redirect_uri

Note: A .env file is present with generic OAuth variables but is not wired to src/App.jsx in the current implementation. You can repurpose it when adding a real provider or wiring axios-based API calls.

Project Structure

• src/App.jsx — main app, auth context, routes, UI
• src/main.jsx — React entry with BrowserRouter
• src/components/ — UI building blocks (e.g., voting buttons)
• src/pages/ — legacy pages (Home, CreatePost)
• src/context/GlobalStateContext.jsx — legacy global state
• src/api/apiClient.js — dummy API helpers
• index.html — loads Tailwind via CDN and mounts the app

Scripts

• npm run dev — start dev server
• npm run build — production build
• npm run preview — preview built assets
• npm run lint — run ESLint