{"id":30741976,"url":"https://github.com/bforbilly24/mono-reactrouter-frontend-app","last_synced_at":"2026-04-13T12:01:38.570Z","repository":{"id":311344437,"uuid":"1043431941","full_name":"bforbilly24/mono-reactrouter-frontend-app","owner":"bforbilly24","description":"The ultimate landing page template for your company.","archived":false,"fork":false,"pushed_at":"2025-08-24T00:57:51.000Z","size":452,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-25T00:44:16.402Z","etag":null,"topics":["framer-motion","react-router-v7","shadcn-ui","tailwindcss"],"latest_commit_sha":null,"homepage":"https://mono.bforbilly.me","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bforbilly24.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-08-23T20:54:58.000Z","updated_at":"2025-09-10T15:28:15.000Z","dependencies_parsed_at":"2025-08-24T09:31:02.024Z","dependency_job_id":"539fb750-a31e-4d0d-8506-78fd9b5ff5ce","html_url":"https://github.com/bforbilly24/mono-reactrouter-frontend-app","commit_stats":null,"previous_names":["bforbilly24/mono-reactrouter-frontend-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bforbilly24/mono-reactrouter-frontend-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bforbilly24%2Fmono-reactrouter-frontend-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bforbilly24%2Fmono-reactrouter-frontend-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bforbilly24%2Fmono-reactrouter-frontend-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bforbilly24%2Fmono-reactrouter-frontend-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bforbilly24","download_url":"https://codeload.github.com/bforbilly24/mono-reactrouter-frontend-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bforbilly24%2Fmono-reactrouter-frontend-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31751705,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T09:16:15.125Z","status":"ssl_error","status_checked_at":"2026-04-13T09:16:05.023Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["framer-motion","react-router-v7","shadcn-ui","tailwindcss"],"created_at":"2025-09-04T01:10:45.857Z","updated_at":"2026-04-13T12:01:38.546Z","avatar_url":"https://github.com/bforbilly24.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mono React Router Frontend App\n\n![Image](https://github.com/user-attachments/assets/bfb11bd1-fa4b-4b6f-90c5-c6d9ada46ae1)\n\nMono is a modern, professional React Router template designed for creative agencies, freelancers, and businesses who want to showcase their work with style and performance. Built with [React Router v7](https://reactrouter.com/), React 19, [Tailwind CSS](https://tailwindcss.com/), [Shadcn/ui](https://ui.shadcn.com/) components, and [Framer Motion](https://www.framer.com/motion/) animations, Mono offers a fully responsive layout, dark mode support, and a clean, contemporary design that adapts to any device.\n\nThis template is ideal for building agency websites, portfolio sites, and business showcases. It includes essential sections such as hero, features, work portfolio, testimonials, and contact forms, making it easy to present your services professionally. Perfect for creative agencies, design studios, and businesses looking to showcase their services with a professional, contemporary design. Mono is optimized for performance and SEO, ensuring fast load times and excellent user experience.\n\nWhether you're a designer, developer, or agency owner, Mono provides a solid foundation for your online presence. The codebase is well-structured and documented, making customization and extension straightforward. Start your next creative project with Mono and stand out in the digital landscape.\n\n## 🚀 Features\n\n- **Modern Stack**: Built with React Router v7, TypeScript, and Tailwind CSS\n- **Shadcn/ui Components**: Beautiful pre-built components with smooth animations\n- **Creative Design**: Tailored specifically for agencies, portfolios, and business websites\n- **Responsive Design**: Mobile-first approach with responsive layouts\n- **Interactive Elements**: Hero animations, floating cursor effects, and engaging UI components\n- **Dark Mode**: Theme switching with react-router-theme\n- **Performance Optimized**: Fast routing with React Router v7\n- **Easy Configuration**: Setup takes minutes with modern tooling\n- **Framer Motion**: Smooth animations and transitions\n\n## 🛠️ Tech Stack\n\n- **Framework**: React Router v7 with modern routing\n- **Styling**: Tailwind CSS 4 with custom animations\n- **UI Components**: Radix UI primitives + Shadcn/ui\n- **Icons**: Lucide React icons\n- **Animation**: Framer Motion\n- **Theme**: React Router Theme for dark/light mode\n- **Development**: TypeScript, Vite\n- **Package Manager**: Bun (with lockfile)\n\n## 📦 Getting Started\n\n### Prerequisites\n\nMake sure you have Node.js 18+ installed on your machine.\n\n### Installation\n\n1. Clone the repository:\n```bash\ngit clone https://github.com/bforbilly24/mono-reactrouter-frontend-app.git\ncd mono-reactrouter-frontend-app\n```\n\n2. Install dependencies:\n```bash\nnpm install\n# or\nyarn install\n# or\npnpm install\n# or\nbun install\n```\n\n3. Run the development server:\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\n4. Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.\n\nYou can start editing the page by modifying files in the `app/` directory. The page auto-updates as you edit the file.\n\n## 📁 Project Structure\n\n```\nmono-reactrouter-frontend-app/\n├── 📁 app/\n│   ├── root.tsx              # Root application component\n│   ├── routes.ts             # Route definitions\n│   ├── components/           # Reusable components\n│   │   ├── atoms/           # Basic UI components\n│   │   │   ├── avatar.tsx\n│   │   │   ├── button.tsx\n│   │   │   ├── card.tsx\n│   │   │   ├── rating.tsx\n│   │   │   └── typography.tsx\n│   │   └── molecules/       # Composed components\n│   │       └── toggle-theme-button.tsx\n│   ├── contents/            # Static content data\n│   │   ├── features.ts\n│   │   ├── process-steps.ts\n│   │   ├── projects.ts\n│   │   └── testimonials.ts\n│   ├── features/            # Feature-specific components\n│   │   └── home/\n│   │       ├── _components/\n│   │       │   ├── floating-cursor.tsx\n│   │       │   ├── noise-background.tsx\n│   │       │   └── TextGenerateEffect.tsx\n│   │       └── partials/    # Page sections\n│   │           ├── contact-section.tsx\n│   │           ├── features-section.tsx\n│   │           ├── hero-section.tsx\n│   │           ├── pricing-section.tsx\n│   │           ├── process-section.tsx\n│   │           ├── testimonials-section.tsx\n│   │           └── work-section.tsx\n│   ├── layouts/             # Layout components\n│   │   ├── footer.tsx\n│   │   ├── layout.tsx\n│   │   └── navbar.tsx\n│   ├── lib/                 # Utilities\n│   │   └── utils.ts\n│   ├── providers/           # Context providers\n│   │   └── theme-context.tsx\n│   ├── routes/              # Route components\n│   │   └── home.tsx\n│   └── styles/              # Global styles\n│       └── globals.css\n├── 📁 public/               # Static assets\n│   ├── favicon.ico\n│   ├── favicon.svg\n│   ├── image.png\n│   ├── placeholder-logo.png\n│   ├── placeholder-logo.svg\n│   ├── placeholder-user.jpg\n│   ├── placeholder.jpg\n│   └── works/               # Portfolio images\n│       ├── 1.webp\n│       ├── 2.webp\n│       ├── 3.webp\n│       └── 4.webp\n├── 📄 components.json       # Shadcn/ui configuration\n├── 📄 package.json\n├── 📄 tailwind.config.ts\n├── 📄 vite.config.ts\n└── 📄 tsconfig.json\n```\n\n## 🎨 Components\n\nThis project includes various pre-built sections:\n\n- **Hero Section**: Eye-catching landing hero with text generation effects\n- **Features Section**: Highlight key features and capabilities\n- **Work Section**: Portfolio showcase with project galleries\n- **Process Section**: Step-by-step process visualization\n- **Testimonials**: Client testimonials with ratings\n- **Contact Section**: Contact forms and information\n- **Pricing Section**: Service pricing and packages\n- **Interactive Effects**: Floating cursor, noise background, and smooth animations\n\n## 🚀 Available Scripts\n\n- `npm run dev` - Start development server with Vite\n- `npm run build` - Build for production\n- `npm run start` - Start production server\n- `npm run typecheck` - Run TypeScript type checking\n\n## ⚙️ Configuration\n\n### Customizing Content\n- Edit content data in `app/contents/` directory\n- Modify landing page sections in `app/features/home/partials/`\n- Update layout components in `app/layouts/`\n- Customize theme settings in `app/providers/theme-context.tsx`\n\n### Styling\n- Modify Tailwind configuration in `tailwind.config.ts`\n- Theme switching is handled by `react-router-theme`\n- Global styles are in `app/styles/globals.css`\n- Component styles use Tailwind CSS classes\n\n### Components\n- Atomic components are in `app/components/atoms/`\n- Molecular components are in `app/components/molecules/`\n- Feature-specific components are in `app/features/`\n- Shared utilities are in `app/lib/`\n\n### Routing\n- Route definitions are in `app/routes.ts`\n- Route components are in `app/routes/`\n- Layout configuration in `app/layouts/layout.tsx`\n\n## 📚 Learn More\n\nTo learn more about the technologies used in this project:\n\n- [React Router Documentation](https://reactrouter.com/en/main) - Learn about React Router v7 features\n- [Tailwind CSS](https://tailwindcss.com/docs) - Utility-first CSS framework\n- [Shadcn/ui](https://ui.shadcn.com/) - Beautifully designed components\n- [Radix UI](https://www.radix-ui.com/) - Unstyled, accessible components\n- [Framer Motion](https://www.framer.com/motion/) - Production-ready motion library for React\n- [Vite](https://vitejs.dev/) - Next generation frontend tooling\n- [TypeScript](https://www.typescriptlang.org/) - Typed JavaScript\n\n## 🚀 Deployment\n\n### Deploy on Vercel\n\nThe easiest way to deploy your React Router app is to use the [Vercel Platform](https://vercel.com/new).\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fbforbilly24%2Fmono-reactrouter-frontend-app)\n\n### Deploy on Netlify\n\nYou can also deploy this application on [Netlify](https://www.netlify.com/):\n\n1. Build the project: `npm run build`\n2. Deploy the `build/client` directory\n\n### Other Deployment Options\n\nYou can also deploy this application on:\n- **Railway**: Simple deployment with Git integration\n- **DigitalOcean App Platform**: Container-based deployment\n- **AWS Amplify**: Full-stack deployment with hosting services\n- **Cloudflare Pages**: Fast global deployment\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 👨‍💻 Author\n\n**Halim Putra**\n\n- GitHub: [@bforbilly24](https://github.com/bforbilly24)\n\n## 🤝 Contributing\n\nContributions, issues, and feature requests are welcome! Feel free to check the [issues page](https://github.com/bforbilly24/mono-reactrouter-frontend-app/issues).\n\n## ⭐ Show your support\n\nGive a ⭐️ if this project helped you!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbforbilly24%2Fmono-reactrouter-frontend-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbforbilly24%2Fmono-reactrouter-frontend-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbforbilly24%2Fmono-reactrouter-frontend-app/lists"}