{"id":31581260,"url":"https://github.com/rajan167030/sideproject","last_synced_at":"2026-05-06T17:31:17.736Z","repository":{"id":318143457,"uuid":"1070132559","full_name":"Rajan167030/sideproject","owner":"Rajan167030","description":"A full-stack web application that displays posts from Reddit's r/SideProject community with search, sort, and filtering capabilities.","archived":false,"fork":false,"pushed_at":"2025-10-05T10:50:36.000Z","size":51,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-05T12:26:01.849Z","etag":null,"topics":["flask","javascript","python"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rajan167030.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-05T10:35:52.000Z","updated_at":"2025-10-05T10:52:10.000Z","dependencies_parsed_at":"2025-10-05T12:26:05.132Z","dependency_job_id":null,"html_url":"https://github.com/Rajan167030/sideproject","commit_stats":null,"previous_names":["rajan167030/sideproject"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Rajan167030/sideproject","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rajan167030%2Fsideproject","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rajan167030%2Fsideproject/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rajan167030%2Fsideproject/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rajan167030%2Fsideproject/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rajan167030","download_url":"https://codeload.github.com/Rajan167030/sideproject/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rajan167030%2Fsideproject/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278526240,"owners_count":26001326,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flask","javascript","python"],"created_at":"2025-10-05T21:55:33.788Z","updated_at":"2025-10-05T21:55:40.355Z","avatar_url":"https://github.com/Rajan167030.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📱 r/SideProject Feed - Full Stack Web Application\n\nA full-stack web application that displays posts from Reddit's r/SideProject community with search, sort, and filtering capabilities.\n\n![Tech Stack](https://img.shields.io/badge/Frontend-React-61dafb?style=flat-square\u0026logo=react)\n![Tech Stack](https://img.shields.io/badge/Backend-Flask-000000?style=flat-square\u0026logo=flask)\n![Tech Stack](https://img.shields.io/badge/Language-Python%20%7C%20JavaScript-blue?style=flat-square)\n\n\n\u003cimg width=\"1923\" height=\"883\" alt=\"Screenshot 2025-10-05 161903\" src=\"https://github.com/user-attachments/assets/a12a4c4f-2f87-4e3b-9d5a-6dd909344b96\" /\u003e\n\n\n🔗 **GitHub Repository:** [https://github.com/Rajan167030/sideproject](https://github.com/Rajan167030/sideproject)\n\n---\n\n## 📋 Table of Contents\n\n- [Overview](#overview)\n- [Features](#features)\n- [Tech Stack](#tech-stack)\n- [Project Structure](#project-structure)\n- [Installation](#installation)\n- [Usage](#usage)\n- [API Documentation](#api-documentation)\n- [File Analysis](#file-analysis)\n- [Troubleshooting](#troubleshooting)\n\n---\n\n## 🎯 Overview\n\nThis application fetches and displays posts from Reddit's r/SideProject subreddit. It consists of:\n- **Backend**: Flask REST API that fetches data from Reddit or serves cached local JSON\n- **Frontend**: React SPA with search, sort, and filter functionality\n- **Data**: 25 pre-loaded Reddit posts with full metadata\n\n---\n\n## ✨ Features\n\n### Frontend Features\n- ✅ Real-time search across post titles and content\n- ✅ Multiple sort options (Newest, Top by upvotes, Top by comments)\n- ✅ Responsive card-based UI\n- ✅ Live refresh functionality\n- ✅ Clean, minimal design\n- ✅ Thumbnail preview support\n\n### Backend Features\n- ✅ RESTful API endpoints\n- ✅ Smart caching (60-second TTL)\n- ✅ Local JSON fallback (no internet required)\n- ✅ Query parameter support for filtering and sorting\n- ✅ Error handling with proper HTTP status codes\n- ✅ CORS-ready (proxied through React dev server)\n\n---\n\n## 🛠️ Tech Stack\n\n### Backend\n| Technology | Version | Purpose |\n|------------|---------|---------|\n| **Python** | 3.13 | Runtime environment |\n| **Flask** | 2.2.5 | Web framework |\n| **requests** | 2.31.0 | HTTP client for Reddit API |\n| **Werkzeug** | \u003e=2.2.2 | WSGI utility library |\n| **Jinja2** | \u003e=3.0 | Template engine (Flask dependency) |\n\n### Frontend\n| Technology | Version | Purpose |\n|------------|---------|---------|\n| **React** | 18.2.0 | UI library |\n| **react-dom** | 18.2.0 | React DOM renderer |\n| **react-scripts** | 5.0.1 | Create React App tooling |\n| **cross-env** | 7.0.3 | Cross-platform environment variables |\n\n---\n\n## 📁 Project Structure\n\n```\nsideproject_feed/\n│\n├── backend/                          # Flask API Server\n│   ├── app.py                        # Main Flask application (83 lines)\n│   ├── requirements.txt              # Python dependencies\n│   ├── sample_data.json              # 25 cached Reddit posts (4289 lines)\n│   ├── test_app.py                   # Diagnostic test suite (73 lines)\n│   ├── setup_env.ps1                 # PowerShell setup script (38 lines)\n│   ├── start.bat                     # Windows batch start script\n│   ├── DEBUG_SUMMARY.md              # Debug documentation\n│   └── venv/                         # Python virtual environment\n│       └── Scripts/\n│           └── python.exe            # Isolated Python interpreter\n│\n├── frontend/                         # React Application\n│   ├── package.json                  # NPM dependencies \u0026 scripts\n│   ├── public/\n│   │   └── index.html                # HTML template (10 lines)\n│   ├── src/\n│   │   ├── index.js                  # React entry point (7 lines)\n│   │   ├── App.js                    # Main App component (56 lines)\n│   │   └── components/\n│   │       └── PostCard.js           # Post card component (14 lines)\n│   └── node_modules/                 # NPM packages\n│\n├── README.md                         # Project documentation (this file)\n└── README_RUN.txt                    # Quick start instructions\n```\n\n---\n\n## 📥 Installation\n\n### Prerequisites\n- **Python 3.7+** (tested on 3.13)\n- **Node.js 14+** and npm\n- **Windows PowerShell** (for Windows users)\n- **Git** (optional, for cloning)\n\n### Step 1: Clone/Extract the Project\n\n**Option A: Clone from GitHub**\n```powershell\ngit clone https://github.com/Rajan167030/sideproject.git\ncd sideproject\n```\n\n**Option B: If you have the ZIP file**\n```powershell\ncd C:\\Users\\AANANDI\\Downloads\\sideproject_feed\n```\n\n### Step 2: Backend Setup\n\n#### Option A: Automated Setup (Recommended)\n```powershell\ncd backend\n.\\setup_env.ps1\n```\n\n#### Option B: Manual Setup\n```powershell\ncd backend\n\n# Create virtual environment\npython -m venv venv\n\n# Activate virtual environment\n.\\venv\\Scripts\\Activate\n\n# Install dependencies\npython -m pip install --upgrade pip\npython -m pip install -r requirements.txt\n\n# Verify installation\npython -m pip show Flask\n```\n\n### Step 3: Frontend Setup\n```powershell\ncd frontend\n\n# Install dependencies\nnpm install\n\n# Install cross-env for cross-platform compatibility\nnpm install --save-dev cross-env\n```\n\n---\n\n## 🚀 Usage\n\n### Starting the Application\n\n#### 1. Start Backend Server\nOpen PowerShell in the `backend` folder:\n\n```powershell\n# Using batch file (simplest)\n.\\start.bat\n\n# OR using Python directly\n.\\venv\\Scripts\\python.exe app.py\n\n# OR with global Python (if venv activated)\npython app.py\n```\n\n**Expected output:**\n```\n * Serving Flask app 'app'\n * Debug mode: on\n * Running on http://127.0.0.1:5000\n * Debugger PIN: xxx-xxx-xxx\n```\n\n#### 2. Start Frontend Server\nOpen a **new** PowerShell window in the `frontend` folder:\n\n```powershell\nnpm run dev\n# OR\nnpm start\n```\n\n**Expected output:**\n```\nCompiled successfully!\n\nYou can now view sideproject-feed in the browser.\n\n  Local:            http://localhost:3000\n  On Your Network:  http://192.168.x.x:3000\n```\n\n#### 3. Access the Application\nOpen your browser and navigate to:\n```\nhttp://localhost:3000\n```\n\n---\n\n## 📡 API Documentation\n\n### Base URL\n```\nhttp://localhost:5000\n```\n\n### Endpoints\n\n#### `GET /api/posts`\nRetrieve posts from r/SideProject\n\n**Query Parameters:**\n| Parameter | Type | Description | Example |\n|-----------|------|-------------|---------|\n| `q` | string | Search query (title or content) | `?q=ai` |\n| `sort` | string | Sort order: `new`, `ups`, `comments` | `?sort=ups` |\n\n**Response Format:**\n```json\n{\n  \"status\": \"ok\",\n  \"count\": 25,\n  \"posts\": [\n    {\n      \"id\": \"1nyfuav\",\n      \"title\": \"I built real dark mode for my website...\",\n      \"author\": \"the2ndfloorguy\",\n      \"ups\": 16,\n      \"num_comments\": 7,\n      \"created_utc\": 1728121847,\n      \"permalink\": \"https://reddit.com/r/SideProject/...\",\n      \"selftext\": \"I spent my weekend building...\",\n      \"thumbnail\": \"https://...\"\n    }\n  ]\n}\n```\n\n**Example Requests:**\n\n```powershell\n# Get all posts (newest first)\nInvoke-RestMethod http://localhost:5000/api/posts\n\n# Search for posts containing \"AI\"\nInvoke-RestMethod http://localhost:5000/api/posts?q=ai\n\n# Get top posts by upvotes\nInvoke-RestMethod http://localhost:5000/api/posts?sort=ups\n\n# Get top posts by comments\nInvoke-RestMethod http://localhost:5000/api/posts?sort=comments\n```\n\n---\n\n## 🔍 File Analysis\n\n### Backend Files\n\n#### `app.py` (83 lines)\n**Purpose:** Main Flask application server\n\n**Key Components:**\n```python\n# Imports\nfrom flask import Flask, jsonify, request\nimport requests, time, json, os\n\n# Configuration\nCACHE_TTL = 60  # seconds\nLOCAL_JSON = \"sample_data.json\"\n\n# Functions\n- fetch_reddit_json()     # Fetches from local file or Reddit API\n- simplify(data)          # Transforms Reddit JSON to simplified format\n- api_posts()             # API endpoint handler\n\n# Routes\n@app.route(\"/api/posts\")  # Main API endpoint\n```\n\n**Features:**\n- In-memory caching with 60-second TTL\n- Automatic fallback to local JSON file\n- Support for search (`?q=`) and sort (`?sort=`) parameters\n- Error handling with 500 status codes\n- Debug mode enabled for development\n\n#### `requirements.txt` (2 lines)\n```\nFlask==2.2.5\nrequests==2.31.0\n```\n\n#### `sample_data.json` (4289 lines)\n**Purpose:** Cached Reddit API response with 25 posts from r/SideProject\n\n**Structure:**\n```json\n{\n  \"kind\": \"Listing\",\n  \"data\": {\n    \"children\": [\n      {\n        \"kind\": \"t3\",\n        \"data\": {\n          \"title\": \"...\",\n          \"author\": \"...\",\n          \"ups\": 16,\n          \"num_comments\": 7,\n          // ... full Reddit post metadata\n        }\n      }\n    ]\n  }\n}\n```\n\n#### `test_app.py` (73 lines)\n**Purpose:** Comprehensive diagnostic test suite\n\n**Tests:**\n1. Flask import verification\n2. requests library verification\n3. JSON file validation\n4. App functionality testing\n5. Sample data display\n\n#### `setup_env.ps1` (38 lines)\n**Purpose:** Automated PowerShell setup script\n\n**Actions:**\n- Creates virtual environment\n- Upgrades pip\n- Installs requirements\n- Verifies Flask installation\n- Starts the Flask app\n\n#### `start.bat` (5 lines)\n**Purpose:** Simple Windows batch script to start Flask server\n\n#### `DEBUG_SUMMARY.md`\n**Purpose:** Debugging documentation with solutions to common issues\n\n---\n\n### Frontend Files\n\n#### `src/App.js` (56 lines)\n**Purpose:** Main React application component\n\n**State Management:**\n```javascript\nconst [posts, setPosts] = useState([]);      // Post data\nconst [q, setQ] = useState(\"\");              // Search query\nconst [loading, setLoading] = useState(false); // Loading state\nconst [sort, setSort] = useState(\"new\");     // Sort option\n```\n\n**Features:**\n- `useEffect` hook for data fetching on mount and sort change\n- Client-side filtering for search\n- API integration with `/api/posts`\n- Error handling in try-catch blocks\n\n**UI Components:**\n- Search input field\n- Sort dropdown (Newest, Top by ups, Top by comments)\n- Refresh button\n- Post card list\n\n#### `src/components/PostCard.js` (14 lines)\n**Purpose:** Reusable post card component\n\n**Props:**\n- `post` object with title, author, ups, num_comments, thumbnail, selftext, permalink\n\n**Rendering:**\n- Clickable title (opens Reddit permalink)\n- Author name and post metadata\n- Thumbnail image (if available)\n- Truncated self-text preview (200 characters)\n\n#### `src/index.js` (7 lines)\n**Purpose:** React application entry point\n\n**Functionality:**\n- Creates root React element\n- Renders `\u003cApp /\u003e` component into `#root` div\n\n#### `public/index.html` (10 lines)\n**Purpose:** HTML template for React SPA\n\n**Contents:**\n- Meta tags for charset and viewport\n- Title: \"r/SideProject Feed\"\n- Root div for React mounting\n\n#### `package.json` (30 lines)\n**Purpose:** NPM configuration and dependencies\n\n**Scripts:**\n```json\n{\n  \"start\": \"cross-env PORT=3000 react-scripts start\",\n  \"dev\": \"cross-env PORT=3000 react-scripts start\",\n  \"build\": \"react-scripts build\"\n}\n```\n\n**Key Configuration:**\n- `\"proxy\": \"http://localhost:5000\"` - Routes API calls to Flask backend\n- React 18.2.0 with Hooks support\n- Create React App 5.0.1 tooling\n\n---\n\n## 🐛 Troubleshooting\n\n### Backend Issues\n\n#### Issue: `ModuleNotFoundError: No module named 'flask'`\n**Cause:** Flask not installed in virtual environment  \n**Solution:**\n```powershell\ncd backend\n.\\venv\\Scripts\\python.exe -m pip install -r requirements.txt\n```\n\n#### Issue: `UnicodeDecodeError` when reading JSON\n**Cause:** JSON file has UTF-8 characters  \n**Solution:** Already handled in `app.py` with `encoding=\"utf-8\"`\n\n#### Issue: Wrong Python interpreter\n**Cause:** Using global Python instead of venv  \n**Solution:** Always use `.\\venv\\Scripts\\python.exe` explicitly\n\n#### Issue: `404 Not Found` on `http://localhost:5000/`\n**Cause:** Root path has no route  \n**Solution:** Use `/api/posts` endpoint instead\n\n### Frontend Issues\n\n#### Issue: `npm run dev` - Missing script error\n**Cause:** Old `package.json` without `dev` script  \n**Solution:** Use `npm start` or update `package.json`\n\n#### Issue: `PORT is not recognized` error\n**Cause:** Windows doesn't support `PORT=3000` syntax  \n**Solution:** Install `cross-env`:\n```powershell\nnpm install --save-dev cross-env\n```\n\n#### Issue: API calls fail with CORS error\n**Cause:** Proxy not configured  \n**Solution:** Verify `\"proxy\": \"http://localhost:5000\"` in `package.json`\n\n### General Issues\n\n#### Issue: Backend works but frontend can't connect\n**Solution:**\n1. Verify backend is running on port 5000\n2. Check `package.json` has proxy configured\n3. Restart frontend dev server\n\n#### Issue: Ports already in use\n**Solution:**\n```powershell\n# Kill process on port 5000\nnetstat -ano | findstr :5000\ntaskkill /PID \u003cPID\u003e /F\n\n# Kill process on port 3000\nnetstat -ano | findstr :3000\ntaskkill /PID \u003cPID\u003e /F\n```\n\n---\n\n## 📊 Application Flow\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│                         USER BROWSER                        │\n│                    http://localhost:3000                    │\n└────────────────────────────┬────────────────────────────────┘\n                             │\n                             ▼\n┌─────────────────────────────────────────────────────────────┐\n│                    REACT FRONTEND (PORT 3000)               │\n│  ┌─────────────────────────────────────────────────────┐   │\n│  │  App.js                                             │   │\n│  │  - Fetches data from /api/posts                     │   │\n│  │  - Handles search \u0026 sort logic                      │   │\n│  │  - Renders PostCard components                      │   │\n│  └─────────────────────────────────────────────────────┘   │\n│              │                                              │\n│              │ Proxy: http://localhost:5000                 │\n└──────────────┼──────────────────────────────────────────────┘\n               │\n               ▼\n┌─────────────────────────────────────────────────────────────┐\n│                   FLASK BACKEND (PORT 5000)                 │\n│  ┌─────────────────────────────────────────────────────┐   │\n│  │  app.py                                             │   │\n│  │  @app.route(\"/api/posts\")                           │   │\n│  │                                                      │   │\n│  │  1. Check if sample_data.json exists                │   │\n│  │     ├─ YES: Load from local file (UTF-8)            │   │\n│  │     └─ NO: Fetch from Reddit API with caching       │   │\n│  │                                                      │   │\n│  │  2. Simplify data structure                         │   │\n│  │  3. Apply filters (q parameter)                     │   │\n│  │  4. Apply sorting (sort parameter)                  │   │\n│  │  5. Return JSON response                            │   │\n│  └─────────────────────────────────────────────────────┘   │\n└─────────────────────────────────────────────────────────────┘\n```\n\n---\n\n## 🔐 Security Notes\n\n⚠️ **Development Mode Only**\n- Flask debug mode is enabled (`debug=True`)\n- No authentication or authorization\n- No input sanitization on search queries\n- CORS handled via proxy (not production-ready)\n\n**For Production:**\n- Use Gunicorn/uWSGI instead of Flask dev server\n- Disable debug mode\n- Implement proper CORS headers\n- Add input validation and sanitization\n- Use environment variables for configuration\n- Add rate limiting\n\n---\n\n## 📈 Performance Considerations\n\n- **Caching:** Backend caches Reddit API responses for 60 seconds\n- **Local Data:** Uses `sample_data.json` to avoid API rate limits\n- **Client-side Filtering:** Search is performed on frontend (fast, but loads all data)\n- **Minimal Dependencies:** Small bundle size for quick loading\n\n---\n\n## 🎨 Customization\n\n### Change Port Numbers\n\n**Backend (Flask):**\nEdit `app.py`, line 83:\n```python\napp.run(debug=True, port=5000)  # Change 5000 to desired port\n```\n\n**Frontend (React):**\nEdit `package.json`, scripts section:\n```json\n\"start\": \"cross-env PORT=3000 react-scripts start\"  // Change 3000\n```\n\nDon't forget to update the proxy setting in `package.json`:\n```json\n\"proxy\": \"http://localhost:5000\"  // Match backend port\n```\n\n### Add More Reddit Data\n\nReplace `backend/sample_data.json` with fresh data from:\n```\nhttps://www.reddit.com/r/SideProject/.json\n```\n\nOr change the subreddit in `app.py`, line 27:\n```python\nurl = \"https://www.reddit.com/r/SideProject/.json\"\n```\n\n---\n\n## 📝 License\n\nThis project is for educational purposes. Reddit data is subject to Reddit's API terms and policies.\n\n---\n\n## 👨‍💻 Author\n\n**Created:** October 5, 2025  \n**Platform:** Windows 11 with Python 3.13 \u0026 Node.js  \n**Status:** ✅ Fully functional and tested  \n**GitHub:** [@Rajan167030](https://github.com/Rajan167030)  \n**Repository:** [https://github.com/Rajan167030/sideproject](https://github.com/Rajan167030/sideproject)\n\n---\n\n## 🙏 Acknowledgments\n\n- Reddit API for data\n- r/SideProject community\n- Flask and React communities\n- Create React App team\n\n---\n\n**Happy Coding! 🚀**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajan167030%2Fsideproject","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frajan167030%2Fsideproject","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajan167030%2Fsideproject/lists"}