French House Stack
The Remix Stack for SaaS apps (Web2) and Web3 & Web5 DApps with authentication with Magic, testing, linting, formatting, etc.
Overview
The Remix French House Stack offers a dynamic and adaptable foundation for developers seeking to build Software as a Service (SaaS) applications. This stack is particularly useful for projects that bridge Web2 and emerging Web3 technologies, easily integrating user authentication through Magic. While it serves as a comprehensive template for decentralized applications (DApps), the tools and features it encompasses are also fully capable of supporting conventional web applications, making it a versatile choice for a wide range of projects.
With its user-friendly components and robust testing capabilities, the Remix French House Stack paves the way for efficient development workflows. Built on modern development paradigms, it leverages tools like Tailwind for styling and Prisma as an ORM, ensuring a seamless experience from development through to deployment. Whether you're a seasoned developer or just starting, this stack provides everything you need to kick-start your next ambitious project.
Features
- Multi-Platform Support: Designed for both Web2 and Web3 applications, making it suitable for a variety of projects.
- Magic Authentication: Streamlines user authentication with Magic, offering cookie-based sessions for flexibility.
- Built-in GitHub Actions: Automates deployment to production and staging environments on code merges, enhancing workflow efficiency.
- Responsive Styling: Utilizes Tailwind CSS, complete with dark mode options for a modern and fashionable design.
- ShadcnUI Components: Includes a selection of components along with custom designs to cater to unique application needs.
- Robust Testing Frameworks: Incorporates Playwright for end-to-end testing and Vitest with Testing Library for unit testing, ensuring code reliability.
- Efficient Code Management: Employs Prettier for code formatting and ESLint for linting, promoting clean and maintainable code standards.
- Version Control: Ensures stable dependencies by pinning versions, allowing developers to easily monitor updates and maintain system stability.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- cmdk
cmdk is a fast, composable command menu component for React. It provides the foundation for building command palettes, search interfaces, and keyboard-navigable menus similar to those found in applications like VS Code, Linear, and Raycast.
- Prisma
Prisma is a server-side library that helps developers read and write data to the database in an intuitive, efficient and safe way.
- Fullstack
A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- React Hook Form
React Hook Form is a performant, flexible, and extensible form library for React with easy validation. It reduces re-renders and improves performance by using uncontrolled components and native HTML validation, making form handling simple and efficient.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Zod
Zod is a TypeScript-first schema declaration and validation library. It allows you to define schemas that can validate data at runtime while providing excellent TypeScript inference, making it perfect for API validation, form validation, and type-safe data handling.