cf-remix

A modern portfolio website built with Remix and deployed on Cloudflare Pages with automated CI/CD using GitHub Actions. This project showcases a full-stack web application with server-side rendering, edge computing capabilities, and modern development practices.

✨ Features

🚀 Edge-First Architecture: Built for Cloudflare's edge network for lightning-fast global performance
🎨 Modern UI Components: Crafted with Tailwind CSS, Radix UI primitives, and Lucide React icons
📱 Fully Responsive: Mobile-first design that works seamlessly across all devices
⚡ Server-Side Rendering: Remix-powered SSR for optimal SEO and performance
🔄 Automated Deployment: CI/CD pipeline with GitHub Actions for seamless updates
🎯 TypeScript: Full type safety throughout the application
🎭 Interactive Components: Toast notifications and smooth animations
📊 Portfolio Sections: About, Experience, Projects, Skills, Blog, and Contact pages

🛠️ Tech Stack

Frontend

Remix - Full-stack web framework
React 18 - UI library with latest features
TypeScript - Type-safe JavaScript
Tailwind CSS - Utility-first CSS framework
Radix UI - Unstyled, accessible UI primitives
Lucide React - Beautiful & consistent icon pack
Class Variance Authority - Class utility library

Infrastructure & Tooling

Cloudflare Pages - Edge deployment platform
Wrangler - Cloudflare developer platform CLI
Vite - Next generation frontend build tool
pnpm - Fast, disk space efficient package manager
ESLint - Code linting and formatting
GitHub Actions - CI/CD automation

📋 Prerequisites

Before you begin, ensure you have the following installed:

Node.js ≥ 20.0.0
pnpm ≥ 9.0.0 (recommended) or npm/yarn
Git for version control
Cloudflare Account for deployment

🚀 Quick Start

1. Clone the Repository

git clone https://github.com/coder7475/cf-remix.git
cd cf-remix

2. Install Dependencies

pnpm install

3. Start Development Server

pnpm run dev

The application will be available at http://localhost:5173

🔧 Development

Available Scripts

Command	Description
`pnpm run dev`	Start development server with hot reload
`pnpm run build`	Build the application for production
`pnpm run start`	Preview the built application locally
`pnpm run preview`	Build and preview the application
`pnpm run deploy`	Build and deploy to Cloudflare Pages
`pnpm run typecheck`	Run TypeScript type checking
`pnpm run typegen`	Generate Cloudflare Workers types
`pnpm run lint`	Run ESLint for code quality
`pnpm run cf-typegen`	Alternative command for type generation

Development Workflow

Local Development: Use pnpm run dev for development with hot module replacement
Type Checking: Run pnpm run typecheck to ensure type safety
Linting: Use pnpm run lint to maintain code quality
Testing Locally: Use pnpm run start to test the built application

Working with Wrangler

To run the application using Wrangler (Cloudflare's development environment):

pnpm run build
pnpm run start

This simulates the Cloudflare Pages environment locally, including edge runtime features.

🏗️ Project Structure

cf-remix/
├── app/                        # Remix application code
│   ├── components/            # Reusable React components
│   │   ├── ui/               # UI primitives and shared components
│   │   ├── AboutMe.tsx       # About section component
│   │   ├── Banner.tsx        # Hero banner component
│   │   ├── Blog.tsx          # Blog section component
│   │   ├── Experience.tsx    # Experience timeline component
│   │   ├── Footer.tsx        # Site footer component
│   │   ├── GetInTouch.tsx    # Contact form component
│   │   ├── Navbar.tsx        # Navigation component
│   │   ├── Projects.tsx      # Projects showcase component
│   │   └── Skills.tsx        # Skills display component
│   ├── hooks/                # Custom React hooks
│   ├── libs/                 # Utility functions and helpers
│   ├── routes/               # Remix route components
│   │   ├── _index.tsx        # Home page route
│   │   ├── about.tsx         # About page route
│   │   ├── blog.tsx          # Blog page route
│   │   ├── contact.tsx       # Contact page route
│   │   ├── experiences.tsx   # Experience page route
│   │   ├── projects.tsx      # Projects page route
│   │   └── skills.tsx        # Skills page route
│   ├── entry.client.tsx      # Client-side entry point
│   ├── entry.server.tsx      # Server-side entry point
│   ├── root.tsx              # Root application component
│   └── tailwind.css          # Global styles and Tailwind imports
├── build/                     # Built application (generated)
├── public/                    # Static assets
├── .github/                   # GitHub Actions workflows
│   └── workflows/
│       └── ci_cd.yml         # CI/CD pipeline configuration
├── package.json              # Project dependencies and scripts
├── wrangler.toml            # Cloudflare Workers configuration
├── vite.config.ts           # Vite build configuration
├── tailwind.config.ts       # Tailwind CSS configuration
└── tsconfig.json            # TypeScript configuration

🎨 Styling & UI

Tailwind CSS Configuration

The project uses a custom Tailwind CSS setup with:

Custom Design System: Consistent spacing, colors, and typography
Component Variants: Using Class Variance Authority for component styling
Responsive Design: Mobile-first approach with responsive utilities
Animations: Smooth transitions and micro-interactions
Dark Mode Support: Built-in dark mode capabilities

Component Architecture

Atomic Design: Components are organized in a scalable hierarchy
Accessibility First: All components follow WCAG guidelines
Reusability: Shared components with flexible prop interfaces
Type Safety: Full TypeScript integration for component props

⚙️ Configuration

Environment Variables

Create a .env file in the root directory for local development:

# Add your environment variables here
# CLOUDFLARE_API_TOKEN=your_api_token
# CLOUDFLARE_ACCOUNT_ID=your_account_id

Wrangler Configuration

The wrangler.toml file configures Cloudflare Workers settings:

name = "cf-remix"
compatibility_date = "2024-02-20"

[site]
bucket = "./build/client"

Vite Configuration

Custom Vite setup with:

Remix Integration: Full-stack development with file-based routing
TypeScript Paths: Absolute imports configuration
Cloudflare Dev Proxy: Local development with edge runtime
Future Flags: Latest Remix features enabled

📦 Type Generation

Generate TypeScript types for your Cloudflare bindings:

pnpm run typegen

This command:

Reads your wrangler.toml configuration
Generates TypeScript definitions for Workers APIs
Updates type definitions for environment bindings
Ensures type safety across your application

Note: Rerun typegen whenever you modify wrangler.toml or add new Cloudflare bindings.

🚢 Deployment

Automatic Deployment (Recommended)

The project includes a GitHub Actions workflow that automatically:

Builds the application on every push to main
Tests code quality with linting and type checking
Deploys to Cloudflare Pages
Notifies of deployment status

Manual Deployment

For manual deployments:

# Build the application
pnpm run build

# Deploy to Cloudflare Pages
pnpm run deploy

Deployment Prerequisites

Cloudflare Account: Set up a Cloudflare account
Wrangler Authentication: Login with wrangler login
GitHub Secrets: Configure deployment secrets in GitHub repository
Domain Configuration: Set up custom domain (optional)

🔍 Performance & Optimization

Edge Computing Benefits

Global CDN: Content delivered from 200+ edge locations
Zero Cold Starts: Instant response times worldwide
Automatic Scaling: Handles traffic spikes seamlessly
Built-in Caching: Intelligent edge caching strategies

Bundle Optimization

Tree Shaking: Eliminates unused code automatically
Code Splitting: Lazy loading for optimal performance
Asset Optimization: Automatic image and asset optimization
Compression: Gzip and Brotli compression enabled

🧪 Testing & Quality Assurance

Code Quality

ESLint: Comprehensive linting rules for JavaScript/TypeScript
TypeScript: Compile-time error checking and IntelliSense
Prettier Integration: Consistent code formatting
Import Sorting: Organized import statements

CI/CD Pipeline

The GitHub Actions workflow ensures:

Dependency Installation: Cached for faster builds
Type Checking: Validates TypeScript across the project
Linting: Enforces code quality standards
Build Verification: Ensures successful production builds
Automated Deployment: Seamless deployment on success

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Guidelines

Follow the existing code style and conventions
Write meaningful commit messages
Add appropriate TypeScript types for new features
Test your changes locally before submitting
Update documentation for significant changes

📚 Learning Resources

Remix Documentation - Learn Remix framework
Cloudflare Pages Docs - Deployment platform guide
Tailwind CSS Guide - Styling documentation
Vite Documentation - Build tool configuration
TypeScript Handbook - Type system guide

🐛 Troubleshooting

Common Issues

Development server not starting:

# Clear node_modules and reinstall
rm -rf node_modules pnpm-lock.yaml
pnpm install
pnpm run dev

Type errors after updating dependencies:

# Regenerate types
pnpm run typegen
pnpm run typecheck

Build failures:

# Check for TypeScript errors
pnpm run typecheck

# Check for linting issues
pnpm run lint

Deployment issues:

# Login to Wrangler
wrangler login

# Verify configuration
wrangler pages project list

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Remix Team for the amazing full-stack framework
Cloudflare for the edge computing platform
Tailwind CSS for the utility-first CSS framework
Radix UI for accessible UI primitives
Open Source Community for the excellent tools and libraries

Name		Name	Last commit message	Last commit date
Latest commit History 82 Commits
.github/workflows		.github/workflows
.vscode		.vscode
app		app
functions		functions
public		public
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
README.md		README.md
SITEMAP.md		SITEMAP.md
load-context.ts		load-context.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts
worker-configuration.d.ts		worker-configuration.d.ts
wrangler.jsonc		wrangler.jsonc
wrangler.toml		wrangler.toml

coder7475/cf-remix

Folders and files

Latest commit

History

Repository files navigation

cf-remix

✨ Features

🛠️ Tech Stack

Frontend

Infrastructure & Tooling

📋 Prerequisites

🚀 Quick Start

1. Clone the Repository

2. Install Dependencies

3. Start Development Server

🔧 Development

Available Scripts

Development Workflow

Working with Wrangler

🏗️ Project Structure

🎨 Styling & UI

Tailwind CSS Configuration

Component Architecture

⚙️ Configuration

Environment Variables

Wrangler Configuration

Vite Configuration

📦 Type Generation

🚢 Deployment

Automatic Deployment (Recommended)

Manual Deployment

Deployment Prerequisites

🔍 Performance & Optimization

Edge Computing Benefits

Bundle Optimization

🧪 Testing & Quality Assurance

Code Quality

CI/CD Pipeline

🤝 Contributing

Development Guidelines

📚 Learning Resources

🐛 Troubleshooting

Common Issues

📄 License

🙏 Acknowledgments

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases 3

Packages 0

Uh oh!

Contributors 2

Uh oh!

Languages

Packages