rieth.dev

A modern personal website with a React frontend and Rails API backend, deployed with Docker and Kamal.

🚀 Quick Start

# Install dependencies and setup database
bin/setup

# Start development servers (React + Rails)
bin/dev

Then open http://localhost:3000 in your browser.

📋 Prerequisites

• Ruby 3.4+
• Node.js 20+
• Docker (for production builds)

📁 Project Structure

This is a monorepo with:

• frontend/ - React app (Vite, React Router, Tailwind CSS)
• app/ - Rails API backend
• config/ - Rails configuration
• db/ - Database schemas and migrations

See docs/ARCHITECTURE.md for detailed architecture information.

🛠️ Development

Starting the app

bin/dev

This runs:

• React dev server on http://localhost:3000
• Rails API on http://localhost:3001

Adding data

bin/rails console

Then create a company:

Company.create!(
  name: "Acme Corp",
  ticker: "ACME",
  current_revenue: 150,
  previous_revenue: 100,
  milestone_amount: 150,
  milestone_crossed_at: Date.today
)

Creating new pages

1. Create a component in frontend/src/pages/YourPage.jsx
2. Add a route in frontend/src/App.jsx
3. That's it! React Router handles the rest.

Adding API endpoints

1. Create a controller in app/controllers/api/v1/
2. Add routes in config/routes.rb
3. Fetch from React with fetch('/api/v1/endpoint')

See QUICKSTART.md for more examples.

📚 Documentation

• QUICKSTART.md - Getting started guide
• docs/ARCHITECTURE.md - System design and architecture
• MIGRATION_SUMMARY.md - What changed from the old setup
• CONVERSION_CHECKLIST.md - Verification checklist
• DEPRECATED_CONTROLLERS.md - Old Rails files (safe to delete)

🔌 API Endpoints

Companies

• GET /api/v1/companies - List all companies
• GET /api/v1/companies/:id - Get a company
• POST /api/v1/companies - Create a company
• PUT /api/v1/companies/:id - Update a company
• DELETE /api/v1/companies/:id - Delete a company

🐳 Production

Build Docker image

docker build -t rieth-site .

Run container

docker run -p 3000:80 \
  -e RAILS_MASTER_KEY=<your-key> \
  rieth-site

Deploy with Kamal

kamal deploy

See config/deploy.yml for deployment configuration.

📦 Tech Stack

Frontend

• React 19 - UI framework
• Vite - Build tool
• React Router v7 - Client-side routing
• Tailwind CSS - Styling
• React Hooks - State management

Backend

• Rails 8 - Web framework
• PostgreSQL - Database
• Puma - Web server
• rack-cors - CORS handling

Deployment

• Docker - Containerization
• Kamal - Deployment orchestration
• Let's Encrypt - SSL certificates

🧪 Testing

Rails tests

bin/rails test

React tests (if added)

cd frontend && npm test

🔐 Security

• CORS configured for localhost and production domain
• Rails CSRF protection on POST requests
• Environment variables for secrets (RAILS_MASTER_KEY, DB password)
• SSL/HTTPS enforced in production

📝 Environment Variables

Development

• VITE_API_URL - API URL for React app (default: http://localhost:3001)

Production

• RAILS_MASTER_KEY - Rails credentials key
• RAILS_ENV - Set to production

🚨 Troubleshooting

Frontend not connecting to API?

• Check both servers are running: bin/dev
• Verify Rails on port 3001: http://localhost:3001/api/v1/companies
• Check browser console for CORS errors

Database errors?

bin/rails db:create
bin/rails db:migrate

Node modules issues?

cd frontend && rm -rf node_modules && npm install && cd ..

Docker build fails?

• Check Node version: node --version (should be 20+)
• Check Ruby version: ruby --version (should be 3.4+)
• View build logs: docker build -t test . 2>&1 | tail -50

Using SQLite

• Database stored in db/development.sqlite3
• No server needed - just run bin/dev
• Production also uses SQLite (in db/production.sqlite3)

📖 Learning Resources

• React documentation
• Rails guides
• Vite documentation
• React Router documentation
• Tailwind CSS documentation

📄 License

This project is open source and available under the MIT License.

👤 Author

John Rieth - rieth.dev