Lo Fi Stack

Overview:

The Remix Lo-Fi Stack is a web development stack that provides various features and tools to create and deploy web applications. It includes a Preact UI runtime, support for atomic styling with Tailwind CSS, theme processing with PostCSS, and build-time imports and nesting. The stack also offers integration with Cloud Firestore for storing and syncing app data, Firebase Authentication for simple sign-in and account management, and deployment to Fly.io. It supports component stories with Storybook, unit testing with Vitest and Testing Library, code formatting with Prettier, linting with ESLint, and static typing with TypeScript.

Features:

• Preact UI runtime: Enables building user interfaces using the lightweight Preact library.
• Atomic styling with Tailwind CSS: Allows for efficient and modular styling using utility classes.
• Support for theme(), screen(), @apply, and @layer functions and directives: Provides advanced styling capabilities.
• Style processing with PostCSS: Enables customization and optimization of stylesheets.
• Default support for build-time imports, nesting, and autoprefixer: Simplifies the development process.
• Store and sync app data with Cloud Firestore using Holocron: Enables efficient data management.
• Simple sign-in and account management with Firebase Authentication: Provides user authentication functionality.
• Deploy to Fly.io: Facilitates easy deployment and hosting of the web application.
• Component stories with Storybook: Allows for visual development and testing of isolated components.
• Unit testing with Vitest and Testing Library: Ensures the quality and reliability of the code.
• Code formatting with Prettier: Provides consistent code styling and formatting.
• Linting with ESLint: Helps identify and fix code errors and maintain code quality.
• Git hooks with Husky: Enables running scripts automatically before commits and pushes.
• Static types with TypeScript: Improves development productivity and catch errors before runtime.
• Flat routing convention: Provides a simple and intuitive routing mechanism.
• Type-safe routing: Ensures type safety and prevents runtime errors related to routing.
• Recommended Visual Studio Code extensions: Offers convenient extensions for development workflow.

Installation:

To install the Remix Lo-Fi Stack, follow these steps:

1. From your terminal, run the following command:

   npm init remix --template your/repo
   

2. This will initialize your project with the Remix Lo-Fi Stack template.

3. Next, set up a Firebase project for authentication and data storage.

   • Create a Firebase Project.
   • Enable Auth (with email) and Firestore.
   • Add a Web App and get the admin-sdk and Web Client Config Object.
   • Save the admin-sdk and Web Client Config Object to SERVICE_ACCOUNT and CLIENT_CONFIG in the .env file.

4. Configure the authentication functionality:

   • In the auth.server.ts file, implement the necessary functions for sign-in, sign-up, and require authentication.
   • Use firestore-admin to verify session cookies and protect loaders and actions.

5. Connect to the Firestore database:

   • In the db.server.ts file, export Holocron databases connected to Firestore collections.
   • Use firebase-admin-SDK to make requests to Firestore.

6. Set up testing, type checking, linting, and formatting as needed:

   • Install Vitest for unit testing.
   • Install TypeScript for static type checking.
   • Configure ESLint for linting.
   • Configure Prettier for code formatting.

7. Finally, configure and deploy the application to Fly.io:

   • Install flyctl and sign up and log in to Fly.
   • Follow the Fly setup instructions and deploy your application.

Summary:

The Remix Lo-Fi Stack is a comprehensive web development stack that provides a range of features and tools for building and deploying web applications. It offers a lightweight Preact UI runtime, atomic styling with Tailwind CSS, and advanced styling capabilities with PostCSS. Additionally, it integrates with Cloud Firestore for data storage, Firebase Authentication for user sign-in and account management, and Fly.io for easy deployment. With support for component stories, unit testing, code formatting, linting, and static typing, the Remix Lo-Fi Stack offers a robust and efficient development workflow.