{"id":21243934,"url":"https://github.com/aaronksaunders/remix-react-router7-tutorial-app","last_synced_at":"2026-04-11T21:45:31.767Z","repository":{"id":263226589,"uuid":"889724468","full_name":"aaronksaunders/remix-react-router7-tutorial-app","owner":"aaronksaunders","description":"Updated Remix Tutotial - Remix, React Router v7, and TypeScript. Features contact creation, editing, deletion, and avatar management with SQLite storage.","archived":false,"fork":false,"pushed_at":"2024-11-20T18:36:48.000Z","size":3189,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T20:11:21.247Z","etag":null,"topics":["better-sqlite3","react","react-router","react-router-v7","reactjs","remix","remix-tutorial","sqlite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaronksaunders.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-11-17T03:54:00.000Z","updated_at":"2024-11-20T18:36:54.000Z","dependencies_parsed_at":"2024-11-17T05:27:45.490Z","dependency_job_id":"5e5abc24-bee4-4f60-88ed-4faa73eb0d27","html_url":"https://github.com/aaronksaunders/remix-react-router7-tutorial-app","commit_stats":null,"previous_names":["aaronksaunders/remix-react-router7-tutorial-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fremix-react-router7-tutorial-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fremix-react-router7-tutorial-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fremix-react-router7-tutorial-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fremix-react-router7-tutorial-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronksaunders","download_url":"https://codeload.github.com/aaronksaunders/remix-react-router7-tutorial-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243682897,"owners_count":20330516,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["better-sqlite3","react","react-router","react-router-v7","reactjs","remix","remix-tutorial","sqlite"],"created_at":"2024-11-21T01:14:48.049Z","updated_at":"2026-04-11T21:45:26.736Z","avatar_url":"https://github.com/aaronksaunders.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Remix, React Router v7 Contact Management Application\n\nA modern contact management application built with Remix, React Router v7, and TypeScript based on the tutorial in the Remix Documentation. Features contact creation, editing, deletion, and avatar management with SQLite storage.\n\n\u003cimg src=\"https://raw.githubusercontent.com/aaronksaunders/remix-react-router7-tutorial-app/refs/heads/main/app/screenshot.png\" alt=\"Screenshot of the application\" width=\"600\"\u003e\n\n## 🚀 Features\n\n- **Contact Management**: Create, read, update, and delete contacts\n- **Avatar Support**: Upload and manage contact avatars\n- **Favorites**: Mark contacts as favorites\n- **Real-time Search**: Search through contacts\n- **Database Storage**: Persistent storage using SQLite\n- **Modern UI**: Clean interface built with Tailwind CSS\n\n## 📦 Tech Stack\n\n- **Framework**: [Remix](https://remix.run)\n- **Routing**: [React Router v7 (Pre-release)](https://reactrouter.com/dev/home)\n- **Styling**: [Tailwind CSS](https://tailwindcss.com)\n- **Database**: SQLite (via [better-sqlite3](https://github.com/WiseLibs/better-sqlite3))\n- **Language**: TypeScript\n- **Image Handling**: Base64 encoding for avatar storage\n\n## 🏗️ Project Structure\n\n```\ncontact-manager/\n├── app/\n│   ├── routes/                 # Application routes\n│   │   ├── index.tsx          # Home page\n│   │   ├── contact-details.tsx # Contact details view\n│   │   ├── edit-contact.tsx   # Contact editing form\n│   │   └── delete-contact.tsx # Contact deletion handler\n│   ├── server/                # Server-side operations\n│   │   └── index.ts          # Database operations\n│   ├── components/            # Reusable components\n│   ├── styles/               # CSS and styling\n│   └── root.tsx              # Root layout\n├── public/                   # Static assets\n└── build/                   # Production build\n```\n\n## 🚀 Quick Start\n\n```bash\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# Build for production\nnpm run build\n\n# Start production server\nnpm run start\n```\n\n## 💻 Development\n\n### Prerequisites\n\n- Node.js \u003e= 20.0.0\n- npm or yarn\n- SQLite\n\n### Environment Setup\n\n1. Clone the repository\n2. Install dependencies: `npm install`\n3. Start the development server: `npm run dev`\n\n### Available Scripts\n\n- `npm run dev` - Start development server\n- `npm run build` - Build for production\n- `npm run start` - Start production server\n- `npm run typecheck` - Run type checking\n- `npm run lint` - Run ESLint\n\n## 📝 API Documentation\n\n### Contact Object Structure\n\n```typescript\ninterface Contact {\n  id: number;\n  first: string;\n  last: string;\n  twitter: string;\n  notes: string;\n  favorite: boolean;\n  avatar: string; // Base64 encoded image\n}\n```\n\n### Routes\n\n- `/` - Home page with contact list\n- `/contacts/:id` - View contact details\n- `/contacts/:id/edit` - Edit contact\n- `/contacts/:id/delete` - Delete contact\n\n## 🔒 Security Considerations\n\n- Avatar uploads are size-limited and validated\n- SQL injection protection via prepared statements\n- Input sanitization on all form submissions\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create your feature branch: `git checkout -b feature/amazing-feature`\n3. Commit your changes: `git commit -m 'Add amazing feature'`\n4. Push to the branch: `git push origin feature/amazing-feature`\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- React Router team for v7 pre-release\n- Remix team for the framework\n- SQLite team for the database\n- All contributors and users\n\n## 📞 Support\n\nFor support, please open an issue in the GitHub repository or contact the maintainers.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Fremix-react-router7-tutorial-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronksaunders%2Fremix-react-router7-tutorial-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Fremix-react-router7-tutorial-app/lists"}