examples
blues-stack
examples | blues-stack | |
---|---|---|
5 | 10 | |
892 | 904 | |
4.7% | 1.8% | |
8.7 | 6.9 | |
5 days ago | 1 day ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
examples
-
Using Remix or NextJS
Real time data update: Remix supports Server Sent Events e.g. https://github.com/remix-run/examples/tree/main/_official-realtime-app https://github.com/remix-run/remix/discussions/2622
-
Server Actions, databases, and the future of data handling
Check out the official Xata template in this Remix example.
-
Is React Router V6 over-engineered?
Combobox example (from remix but the code is the same - remix is just react-router running on the server rather than the browser)
-
Starchart: Playwright and Chakra UI Setup
Setting up Chakra UI was relatively simple. I followed their instructions for the most part. I also found this example to be really helpful. My process for this went like this: I looked at the instructions in Chakra UI docs for the client, server and root files, and compared them with the existing code in starchart. Then, I also referenced them against the example code.
-
Svelte CSS Image Slider: with Bouncy Overscroll
import { error } from '@sveltejs/kit'; import { createReadStream, statSync } from 'node:fs'; import type { Readable } from 'node:stream'; import { PassThrough } from 'node:stream'; import { join } from 'path'; import sharp from 'sharp'; import type { RequestHandler } from './$types'; async function metadata( source: string ): Promise<{ format?: string; width?: number; error?: string }> { try { const image = sharp(source); const { format, width } = await image.metadata(); if (format) { return { format, width }; } } catch (error: unknown) { console.error(`Error reading image metadata: ${source}: ${error}`); } return { error: `Error reading image metadata: ${source}` }; } function resize(imageStream: Readable, width: number, format: string): ReturnType { let sharpTransforms; switch (format) { case 'jpeg': sharpTransforms = sharp().resize(width).jpeg({ mozjpeg: true }); break; case 'avif': sharpTransforms = sharp().resize(width).avif({ quality: 80 }); break; case 'webp': sharpTransforms = sharp().resize(width).webp({ quality: 80 }); break; default: sharpTransforms = sharp(); } const passthroughStream = new PassThrough(); imageStream.pipe(sharpTransforms).pipe(passthroughStream); // @ts-expect-error respond with passthrough stream return new Response(passthroughStream as unknown); } // Based on: https://github.com/remix-run/examples/blob/main/image-resize/app/routes/assets/resize/%24.ts export const GET: RequestHandler = async function get({ params, url, setHeaders }) { try { const { filename } = params; const srcPath = join('src/assets', filename); const fileStat = statSync(srcPath); if (!fileStat) { throw error(404, 'Not found'); } const metadataPromise = metadata(srcPath); const readStream = createReadStream(srcPath); const { format, width } = await metadataPromise; if (!format || !readStream || !width) { throw error(404, 'Not found'); } const { searchParams } = url; const outputWidthString = searchParams.get('w'); const outputWidth = outputWidthString ? Math.min(parseInt(outputWidthString, 10), width) : width; const outputFormat = searchParams.get('format') ?? format; setHeaders({ 'Content-Type': `image/${outputFormat}`, 'Content-Disposition': `filename= ${filename.split('.')[0]}.${outputFormat}`, 'Cache-Control': 'public, max-age=31536000, immutable' }); return resize(readStream, outputWidth, outputFormat); } catch (err: unknown) { const httpError = err as { status: number; message: string }; if (httpError.status && httpError.message) { throw error(httpError.status, httpError.message); } const { pathname } = url; const message = `Error in load function for path "${pathname}": ${err as string}`; console.error(message); throw error(500, message); } };
blues-stack
- Remix for Ecom site?
-
Starchart: Playwright and Chakra UI Setup
Now, if you followed the PR link, you would have seen that it was merged but had a failing check. And that is what was addressed later while adding Playwright. Since the project was setup using the Remix blues stack, it shipped with cypress for end-to-end testing. The cypress folder had some tests but these were not modified when the app was setup since we intended to use Playwright. This resulted in the typecheck job failing, since it was also checking the cypress folder: tsc && tsc cypress
- Where do I start building a fullstack login page?
-
Starchart: release 0.1 planning
This week, after some discussion, a plan was made for release 0.1 of starchart. This involved getting an initial app setup using Remix's blues stack so that people could code on top of it. Next step involved creating some issues which could be addressed in release 0.1 release 0.2 and some for further releases. As I am mostly focused on front-end and testing, I created the following issues:
-
Planning: Using Satellite features in Starchart
The project is currently in the planning phase, and being part of the development team, I have been researching ways to add relevant bits of Satellite in the Remix Blues Stack project, we intend on using for Starchart.
-
Prisma or sequelize in postgresql database for e commerce
Blues Stack: Remix Stack for deploying to Fly with PostgreSQL, authentication, testing, linting, formatting
-
Are there any BE and FE templates that come already connected? I was thinking it would be nice to have an Express PostGreSQL API connected to a React app all set up and ready to go with 1 click.
I think this might fit https://github.com/remix-run/blues-stack
-
Build a FullStack app with Remix, Prisma, PostgreSQL
Remix doesn’t just give you a bunch of tools and ask you to go build your thing, they lead by example which is why they have the concept of Stacks. Stacks are essentially templates/starter kits that gives you the groundwork for a complete project right out of the box. For our project, we will use the Blues Stack which gives us a fully configured Remix project with Prisma, Tailwind and an entire module that shows how to use those tools to build a CRUD feature. I mean honestly, I feel like I shouldn’t even be writing this post since the template did all the work already. Oh well… I’m in too deep now so might as well finish it.
- Remix Blues Stack: "a compiler for React Router" — for deploying to Fly with PostgreSQL, authentication, testing, linting, formatting, and more
- Remix: "a compiler for React Router" — for deploying to Fly with PostgreSQL, authentication, testing, linting, formatting, and more
What are some alternatives?
epic-stack - This is a Full Stack app starter with the foundational things setup and configured for you to hit the ground running on your next EPIC idea.
indie-stack - The Remix Stack for deploying to Fly with SQLite, authentication, testing, linting, formatting, etc.
starchart - A self-serve tool for managing custom domains and certificates [Moved to: https://github.com/DevelopingSpace/starchart]
remix-render - A remix stack for deploying remix to render.com with postgres
2022-css-day_oh-snap
remix-heroku - A remix stack for deploying remix to heroku with postgres
chakra-ui - ⚡️ Simple, Modular & Accessible UI Components for your React Applications
Playwright - Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
express-template - Starter template for Nuxt 2 with Express.
remix - Build Better Websites. Create modern, resilient user experiences with web fundamentals.
ironfish-api - Public Iron Fish API