CloneFest-Week-1

📝 Problem Statement: Modernizing Chyrp

Background: Chyrp is a lightweight, extensible blogging engine originally written to be simple yet powerful. It allowed bloggers to publish content in multiple formats (“Feathers”), extend functionality via modules, and customize appearance with themes. While innovative in its time, Chyrp now feels outdated compared to today’s modern, responsive, API-driven web applications.

Your challenge in this hackathon is to rebuild Chyrp as a modern web application that preserves its flexibility and lightweight philosophy while implementing its key features.

Features to Implement

• Core:

  • Easy to install, simple to maintain, extensible by design.
  • Built with responsive and accessible W3C-validated HTML5.
  • Universal support for plain text, Markdown, and raw markup.
  • Blog personalization through extensions.
  • Theme support using templates.
  • User and visitor management with a rights model.

• Feathers (Content Types):

  • Text: publish textual blog entries.
  • Photo: upload and display an image.
  • Quote: post a quotation.
  • Link: link out to another website.
  • Video: upload and display a video file.
  • Audio: upload and play an audio file.
  • Uploader: upload and manage multiple files.

• Modules (Enhancements):

  • Cacher: cache pages to reduce server load.
  • Categorize: assign categories to blog entries.
  • Tags: apply multiple searchable tags.
  • Mentionable: register webmentions from other blogs.
  • Comments: a complete commenting system.
  • Likes: allow visitors to like posts.
  • Read More: truncate long blog entries in the feed.
  • Rights: set attribution and copyright for posts.
  • Cascade: infinite scrolling for blog entries.
  • Lightbox: on-page image viewer with protection.
  • Sitemap: generate a sitemap for search engines.
  • MAPTCHA: math-based spam prevention.
  • Highlighter: syntax highlighting for code snippets.
  • Easy Embed: embed external content easily.
  • Post Views: maintain view counts for blog entries.
  • MathJax: display mathematical notation cleanly.

Suggested Tech Stacks:

• Frontend:
  • Vue 3 (with Vite)
  • React (with Vite)
  • Next.js (App Router)
  • Angular (latest LTS)
• Backend:
  • Django REST Framework (DRF)
  • FastAPI
  • Flask (modern usage with Blueprints & async)
• Database:
  • Relational (SQL): PostgreSQL, MySQL, MariaDB, SQLite
  • NoSQL: MongoDB, Firebase Firestore, DynamoDB
  • Other modern choices: Supabase (Postgres-based), PlanetScale (MySQL-based)

*We strongly recommend choosing from the tech stacks listed above, as they are aligned with modern frameworks and carry the highest probability of better grading. ⚠️ If you choose to use a different stack, you are free to do so at your own risk — but please note that evaluators will prioritize solutions built using the suggested stacks when grading.

Deliverables

• A running, deployed website that implements the above Chyrp functionality.
• A link to the deployed instance must be submitted for judging.

Judging Criteria (100 + Bonus 5)

• Startability (30): Ease of installation and setup.
• Core Functionality Demo (35): Completeness and correctness of required Chyrp features.
• Stability (10): Reliability, uptime, and lack of crashes/bugs.
• Framework Idioms & Code Sampling (10): Clean, idiomatic, and maintainable code.
• Docs & Reproducibility (10): Clear documentation and ability to reproduce the app.
• Bonus Innovation (0–5): Creative features or extensions beyond the requirements.

⚡ In summary: Take the legacy Chyrp blog engine and bring it into today’s web world. Implement its features, deploy it live, and show us how you reimagined blogging for the modern age.

---

Division of Work

Team Roles & Responsibilities

Our team will be structured with three distinct roles to maximize parallel development and efficiency:

• The Backend Specialist: Focuses on the server-side application logic and the database.
• The Frontend Specialist: Focuses on the user interface and user experience.
• The DevOps & Integration Specialist: Focuses on connecting the two layers, managing the codebase, and handling deployment.

Day 1: Local Development & Core Logic

• Backend Specialist (A)
  • Goal: Build the core data model and API endpoints.
  • Tasks:
    • Set up a Flask project with a local SQLite database.
    • Create the Post database model with fields for title, content, and type.
    • Implement the /api/posts endpoints for creating and retrieving posts.
    • Begin documenting the API endpoints and their expected data formats for the Frontend specialist.
• Frontend Specialist (B)
  • Goal: Build the main user interface components using dummy data.
  • Tasks:
    • Set up a Vue 3 project with Vite.
    • Build the main application layout (header, footer, etc.).
    • Create components for displaying a list of posts and a form for creating a new post.
    • Use mock JSON data to simulate the API response, allowing you to build the UI independently.
• DevOps & Integration Specialist (C)
  • Goal: Establish the collaborative environment and initial project structure.
  • Tasks:
    • Create the GitHub repository for the team.
    • Define the file structure (/backend and /frontend folders).
    • Write the initial README.md file with project details and this plan.
    • Help Team Members A and B with any initial setup issues (e.g., Python or Node.js versions).

Day 2: API Integration & Feature Expansion

• Backend Specialist (A)
  • Goal: Extend the core API and implement a key module.
  • Tasks:
    • Add a Tags database table and create a many-to-many relationship with the Post model.
    • Implement the API endpoints to create and retrieve tags, and to associate them with posts.
    • Add support for other Feathers to the Post model (e.g., a media_url field for photos/videos).
• Frontend Specialist (B)
  • Goal: Connect the UI to the backend's live API and build new features.
  • Tasks:
    • Replace the dummy data with actual axios calls to the backend's API.
    • Build the user interface for adding and displaying Tags on posts.
    • Implement the Read More truncation feature for long posts.
    • Create a simple light/dark theme toggle to fulfill the "theme support" requirement.
• DevOps & Integration Specialist (C)
  • Goal: Facilitate the integration process and prepare for deployment.
  • Tasks:
    • Debug any API-related issues that arise from frontend/backend communication (e.g., CORS).
    • Update the README.md with a "Getting Started" section, including detailed instructions on how to run both servers locally.
    • Research and set up accounts on a free hosting service for both the frontend (e.g., Vercel) and backend (e.g., Render).

Day 3: Polishing, Documentation & Final Deployment

• Backend Specialist (A)
  • Goal: Finalize the backend code and add a bonus feature.
  • Tasks:
    • Add a simple Likes feature to the Post model and create a corresponding API endpoint to increment the count.
    • Ensure all API endpoints are returning correct status codes and error messages.
    • Perform a final code review and clean up.
• Frontend Specialist (B)
  • Goal: Polish the UI and complete the feature set.
  • Tasks:
    • Refine the overall look and feel of the site to be more modern and visually appealing.
    • Implement the "Likes" button and connect it to the backend API.
    • Ensure the application is fully responsive and free of any major bugs.
• DevOps & Integration Specialist (C)
  • Goal: Deploy the entire application and complete all submission requirements.
  • Tasks:
    • Deploy the backend to the chosen hosting provider.
    • Deploy the frontend to the chosen hosting provider.
    • Update the frontend's API URL to point to the live, deployed backend.
    • Finalize the README.md file with a "Live Demo" link and a detailed list of all implemented features.
    • Add any "Bonus Innovation" notes for the judges.
    • Submit the project.

---

Checklist

Team Member 1: The Backend Specialist

Your focus is on building the server-side logic and managing the database.

Day 1: Setup & Core API

• Initialize the Git repository and a Python virtual environment.
• Install Flask, Flask-SQLAlchemy, and Flask-CORS.
• Create the database schema with a Post model (at a minimum, include title, content, and type fields).
• Implement the following REST API endpoints:
  • POST /api/posts to create a new post.
  • GET /api/posts to retrieve all posts.
  • GET /api/posts/<id> to get a single post.
• Test all endpoints using a tool like Postman or curl.
• Start a shared document (e.g., a Google Doc or a Markdown file in the repo) to list all your API endpoints and their expected responses.

Day 2: Feathers & Modules

• Extend the Post model to support different Feathers.
• Add a media_url field for Photo, Video, and Audio content types.
• Add a link_url field for the Link feather.
• Add a new database table for Tags.
• Create an API to handle tags:
  • GET /api/tags to retrieve all available tags.
  • POST /api/posts/<id>/tags to add a tag to a post.
  • GET /api/tags/<name>/posts to get posts by a specific tag.
• Create a simplified User model and a basic endpoint for user management. This can be as simple as a single, hardcoded user.

Day 3: Polish & Deployment

• Review all API endpoints for consistency and robustness. Add basic error handling (e.g., returning a 404 for a post not found).
• Create a requirements.txt file by running pip freeze > requirements.txt.
• Write a Procfile if your chosen hosting service requires it.
• Coordinate with the DevOps specialist to ensure the backend is ready for deployment.
• Work with the Frontend specialist to resolve any integration issues (e.g., data format or API endpoint names).

---

Team Member 2: The Frontend Specialist

Your role is to build the user-facing application that interacts with the backend.

Day 1: Setup & Core UI

• Use Vite to scaffold a new Vue 3 project.
• Set up basic routing using Vue Router (e.g., a home page and a "create post" page).
• Build the main application layout and basic navigation.
• Create a form component for creating Text Feathers.
• Install axios and connect your form to the POST /api/posts endpoint.
• Create a component to fetch data from the GET /api/posts endpoint and display the posts on the home page.

Day 2: Feathers & Modules UI

• Create distinct form views or a dynamic form for Photo, Link, and Quote feathers.
• Use conditional rendering to show different input fields based on the selected feather type.
• Implement the Tags UI.
• Create an input field or dropdown for users to add tags to a post.
• Display the tags associated with each post on the home page.
• Build the Read More functionality to truncate long posts on the feed.
• Implement a basic Theme support feature, like a light/dark mode toggle button.

Day 3: Polish & Final Touches

• Ensure the entire application is responsive and looks good on various screen sizes.
• Add a "loading" state to your data fetching components to improve user experience.
• Implement basic form validation and error messages.
• Work with the DevOps specialist to prepare your code for deployment to a service like Netlify or Vercel.
• Do a final run-through of the user journey, from creating a post to viewing it, and fix any bugs.

---

Team Member 3: The DevOps & Integration Specialist

You are the project manager, documentation writer, and deployment engineer.

Day 1: Environment & Collaboration

• Create the central Git repository and manage user access.
• Help the team set up their local development environments.
• Configure CORS on the Flask backend to allow communication from the frontend.
• Create the main README.md file. Add sections for:
  • Project Title & Team Members
  • A brief project overview
  • Suggested Tech Stack
• Define the file structure (/frontend and /backend).

Day 2: Documentation & Integration

• Continuously update the README.md with features as they are implemented.
• Create a clear "Getting Started" section in the README with step-by-step instructions for running both the frontend and backend locally.
• Include commands like pip install -r requirements.txt and npm install.
• Help the frontend and backend specialists troubleshoot any integration issues (e.g., API endpoint URLs, data format mismatches).
• Research and select the final hosting services for both the frontend (e.g., Vercel, Netlify) and the backend (e.g., Render, PythonAnywhere).

Day 3: Deployment & Submission

• Deploy the frontend to a static hosting service.
• Deploy the backend to a cloud provider.
• Update the frontend to point to the live backend API URL.
• Update the README.md with the link to the live, deployed instance.
• Write a brief summary of any Bonus Innovation features for the judges.
• Do a final check of all deliverables and the README.md to ensure everything is perfect for submission.

TECH STACK :

Frontend - React Backend - Flask Database - SQLite