How This Site Was Built

The main code is written in Python, which scrapes Hacker News posts and uses AI models to extract project URLs, revenue, summaries, etc. Then use Python scripts to generate mdx files required by nextra to build the static website.

The code is not complex, but I’ve decided not to open source it. Instead, I want to see if I can join the “$500 Revenue Club” through this project. You can purchase the source code (not just for this website, but the code that generates it) here for $9.9.

Below is the code’s README file, demonstrating the steps to generate the website:

Data Collection

Install python dependencies

Install uv following github readme: https://github.com/astral-sh/uv

cd /path/to/500MRR/python_src
uv sync
uvx playwright install

Run Data Collection Script

Get a OpenRouter API key from: https://openrouter.ai/

Environment variables:

OPENROUTER_API_KEY: key from https://openrouter.ai/
MODEL_NAME: default is anthropic/claude-3.5-haiku-20241022, you can change it to other models supported by OpenRouter.

cd /path/to/500MRR/python_src
export OPENROUTER_API_KEY=your_key
export MODEL_NAME=anthropic/claude-3.5-haiku-20241022
# 2017 ~ 2024, pass --year all to get all data
uv run main.py --year 2019

This script does the following:

Fetches data from Hacker News
Uses OpenRouter API to call models that extract project url, revenue, description, summary and other content from Hacker News data
Takes screenshots of project websites using playwright based on the extracted urls, saved in the /path/to/500MRR/public directory

Results from the Hacker News API calls and LLM model outputs are cached locally in the .cache directory to prevent duplicate execution if interrupted. The final results are saved in the projects.db file

Run data export script

cd /path/to/500MRR/python_src
uv run export.py

This will generate mdx files required by nextra and save them in the /path/to/500MRR/pages directory

Frontend

The frontend code was initially cloned from nextra-docs-template. I made the following modifications:

Added tailwindcss support
Added shadcn/ui support
Added sitemap generation
Created custom components for data visualization
Added dynamic tags based on page, when you share a project on Twitter (e.g. https://www.500mrr.com/Year-2024/Lightnote-co), the Twitter card will display the project’s website screenshot

Install dependencies

Install pnpm following github readme: https://github.com/pnpm/pnpm

cd /path/to/500MRR
pnpm i
pnpm dev

This will start the development server at localhost:3000.

Introduction Maybe Useful Summary