Overview:

The Remix Demo App is a note-taking application based on the Remix Indie Stack quick-start project. It aims to provide a fuller example for learning more about Remix and experimenting with headless UI systems, particularly Radix and Radix with Tailwind CSS. The app also utilizes Tailwind CSS in combination with regular CSS, allowing for the creation of .css sidecar files for each route or component. It offers a skeletal UI system with core components styled for light and dark themes. While Material UI and Bootstrap are popular choices for project kick-starters, the Remix Demo App takes a back-to-basics approach, hand-rolling components and selecting headless components to suit the project’s needs.

Features:

• Remix Indie Stack quick-start project
• Headless UI systems with Radix and Radix with Tailwind CSS
• Combining Tailwind CSS with regular CSS for styling
• ‘Surfacing’ component-level styles in routes
• Core components styled for light and dark themes

Installation:

To install the Remix Demo App, follow these steps:

1. Clone or fork the repository.
2. Run npm install to install dependencies. If you don’t want package-lock.json to be modified or if you’re planning to submit a pull request, use npm ci instead.
3. Copy the .env.example file to .env and optionally fill in your reCAPTCHA keys from Google reCAPTCHA.
4. Run node makeSessionSecret.js to generate your session secret and place it in your .env file above.
5. Copy the prisma/users.example.json file to prisma/users.json. These files contain the seed user accounts, including an admin user.
6. Run npm run setup to initialize the local SQLite database and seed users.
7. Run npm run dev to start your local development environment.
8. Run rm -rf build followed by npm run build and npm run start to run a production build.

If you wish to deploy the application to Fly.io, please refer to the instructions in the original README, ensuring that you rename the application and unique Fly.io app code in the appropriate sections of package.json and fly.toml.

Summary:

The Remix Demo App is a note-taking application that provides a more comprehensive example for learning about Remix. It offers the opportunity to experiment with headless UI systems like Radix and Radix with Tailwind CSS, following a non-CSS-in-JS approach that aligns with the Remix Philosophy. The app also combines Tailwind CSS with regular CSS, allowing for the creation of .css sidecar files for individual routes or components. It features a skeletal UI system with core components styled for light and dark themes. The project takes a hands-on approach, manually creating components and adapting existing headless components to fit its requirements.