{"id":29200282,"url":"https://github.com/professorlearncode/cs50x-flaskstrap","last_synced_at":"2025-07-02T10:35:36.751Z","repository":{"id":301862898,"uuid":"1010517105","full_name":"ProfessorlearnCode/cs50x-FlaskStrap","owner":"ProfessorlearnCode","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-29T08:53:37.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-29T09:33:42.320Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/ProfessorlearnCode.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}},"created_at":"2025-06-29T08:37:01.000Z","updated_at":"2025-06-29T08:53:40.000Z","dependencies_parsed_at":"2025-06-29T09:33:44.000Z","dependency_job_id":"5ec446f9-14c9-4ff4-99c6-c484bb26bac1","html_url":"https://github.com/ProfessorlearnCode/cs50x-FlaskStrap","commit_stats":null,"previous_names":["professorlearncode/cs50x-flaskstrap"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ProfessorlearnCode/cs50x-FlaskStrap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProfessorlearnCode%2Fcs50x-FlaskStrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProfessorlearnCode%2Fcs50x-FlaskStrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProfessorlearnCode%2Fcs50x-FlaskStrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProfessorlearnCode%2Fcs50x-FlaskStrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ProfessorlearnCode","download_url":"https://codeload.github.com/ProfessorlearnCode/cs50x-FlaskStrap/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProfessorlearnCode%2Fcs50x-FlaskStrap/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263121437,"owners_count":23416996,"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","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":[],"created_at":"2025-07-02T10:35:35.053Z","updated_at":"2025-07-02T10:35:36.736Z","avatar_url":"https://github.com/ProfessorlearnCode.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎓 CS50x Final Project: FlaskStrap - Web Application with Flask and Strapi\n\n🔗 **Video Demo:** [Watch here](https://youtu.be/WWoUpCO7WGg)\n\n---\n\n## 📖 Description\n\nThis project is a full-stack web application built as the **final project for Harvard’s CS50x** course. It combines a Python-based Flask backend with a powerful headless CMS using Strapi. The application enables:\n\n- 🧑 User registration and login\n- 📰 Content creation and management\n- 💬 Real-time chat between users\n- 🔐 Role-based access control\n\nIt integrates modern technologies such as **Flask-SocketIO** for real-time features and **SQLite** for lightweight database needs. Strapi serves as the backend CMS to manage articles, content types, and API access.\n\n---\n\n## ✨ Features\n\n- 🔐 User authentication and secure registration\n- 👥 Role-based access (viewer, author)\n- 📝 Content creation and fetching via Strapi\n- 💬 Real-time chat using WebSockets (Socket.IO)\n- 🧑‍💻 User profile management\n- 📡 API-driven dynamic content loading\n\n---\n\n## 🛠️ Technologies Used\n\n| Backend            | Frontend         | CMS         |\n|--------------------|------------------|-------------|\n| Flask (Python)     | HTML/CSS         | Strapi      |\n| Flask-SocketIO     | Bootstrap        | SQLite DB   |\n| Werkzeug (security)| JavaScript       | Node.js     |\n\n---\n\n## 🧰 Installation and Setup\n\n### 🔗 Prerequisites\n\nMake sure the following are installed:\n\n- [Node.js](https://nodejs.org/) (v18.x - v20.x)\n- [Yarn](https://classic.yarnpkg.com/en/docs/install)\n- [Python 3.8+](https://www.python.org/downloads/)\n- [Flask](https://flask.palletsprojects.com/en/2.0.x/installation/)\n\n---\n\n### 🐍 Set Up the Flask Backend\n\n```bash\n# Create virtual environment\npython -m venv venv\nsource venv/bin/activate       # On Windows use `venv\\Scripts\\activate`\n\n# Install required packages\npip install -r requirements.txt\n````\n\n---\n\n### 🚀 Set Up the Strapi CMS\n\n```bash\n# Navigate to Strapi directory\ncd Strapi\n\n# Install dependencies\nyarn install\n\n# Start Strapi in development mode\nyarn develop\n```\n\n* Access the Strapi admin at: `http://localhost:1337/admin`\n* Default API access at: `http://localhost:1337/api/...`\n\n---\n\n### 🔥 Run the Flask Application\n\n```bash\n# In a separate terminal\ncd path/to/your/flask-app\n\n# Start the Flask server\nflask run\n```\n\n* App will run at: `http://127.0.0.1:5000`\n\n---\n\n## 🧩 Strapi Setup Guide (Quick Overview)\n\n1. **Install Strapi with Quickstart:**\n\n   ```bash\n   npx create-strapi-app my-project --quickstart\n   cd my-project\n   yarn develop\n   ```\n\n2. **Configure Your Database (Optional)**\n   Edit `config/database.js` for PostgreSQL, MongoDB, etc.\n\n3. **Create Content Types**\n   Use Strapi's Content Type Builder to define schemas like `Articles`, `Users`, etc.\n\n4. **Set Permissions**\n   Go to **Settings → Roles** and configure access levels for `public`, `authenticated`, etc.\n\n5. **Test Your APIs**\n\n   * With tools like **Postman**\n   * Via built-in API Explorer at `http://localhost:1337/api/\u003ccontent-type\u003e`\n\n---\n\n## 🧪 Usage\n\n* 👤 **User Login/Registration**\n  Secure authentication with role-based logic.\n\n* 📝 **Article Management**\n  Authors can create, update, and manage posts via Strapi.\n\n* 💬 **Chat System**\n  Users join rooms and exchange real-time messages using Flask-SocketIO.\n\n---\n\n## 🧱 Code Structure Overview\n\n| Module            | Description                        |\n| ----------------- | ---------------------------------- |\n| `/routes/auth.py` | Handles login/registration         |\n| `/templates/`     | HTML templates (Jinja2)            |\n| `/static/`        | CSS, JS, and frontend assets       |\n| `/socket.py`      | WebSocket logic for real-time chat |\n| `/api/strapi.py`  | Integrates Flask with Strapi APIs  |\n\n---\n\n## 📌 Notes\n\n* Ensure `Strapi` and `Flask` servers are running **simultaneously**.\n* Check your `Config` class in Flask for correct database settings.\n* This project was developed for **educational purposes** as part of the **CS50x curriculum**.\n* All code adheres to the [CS50 Academic Honesty Policy](https://cs50.harvard.edu/x/honesty/).\n\n---\n\n## 🙌 Acknowledgements\n\n* Huge thanks to **Harvard University** and **CS50 staff** for creating this incredible course.\n* Built with 💡, 🔧, and 🧠 by a passionate learner applying real-world skills.\n\n---\n\n\u003e 📌 *Feel free to explore, modify, and enhance this project for your own needs!*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprofessorlearncode%2Fcs50x-flaskstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprofessorlearncode%2Fcs50x-flaskstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprofessorlearncode%2Fcs50x-flaskstrap/lists"}