61 | 
66 |
67 |
68 |
69 |
82 |
86 |
90 |
91 | );
92 | }
93 |
--------------------------------------------------------------------------------
/public/svgs/remix-black.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/svgs/remix-white.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/root.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | Links,
4 | LiveReload,
5 | Meta,
6 | Outlet,
7 | Scripts,
8 | ScrollRestoration,
9 | useLocation,
10 | useMatches,
11 | } from "@remix-run/react";
12 |
13 | import type { LinksFunction, MetaFunction } from "@remix-run/node";
14 |
15 | import tailwind from "./styles/app.css";
16 |
17 | export const meta: MetaFunction = () => ({
18 | charset: "utf-8",
19 | title: "RockSpec Stack",
20 | viewport: "width=device-width,initial-scale=1",
21 | });
22 |
23 | export const links: LinksFunction = () => {
24 | return [{ rel: "stylesheet", href: tailwind }];
25 | };
26 |
27 | let isMount = true;
28 |
29 | export default function App() {
30 | let location = useLocation();
31 | let matches = useMatches();
32 |
33 | React.useEffect(() => {
34 | let mounted = isMount;
35 | isMount = false;
36 | if ("serviceWorker" in navigator) {
37 | if (navigator.serviceWorker.controller) {
38 | navigator.serviceWorker.controller?.postMessage({
39 | type: "REMIX_NAVIGATION",
40 | isMount: mounted,
41 | location,
42 | matches,
43 | manifest: window.__remixManifest,
44 | });
45 | } else {
46 | let listener = async () => {
47 | await navigator.serviceWorker.ready;
48 | navigator.serviceWorker.controller?.postMessage({
49 | type: "REMIX_NAVIGATION",
50 | isMount: mounted,
51 | location,
52 | matches,
53 | manifest: window.__remixManifest,
54 | });
55 | };
56 | navigator.serviceWorker.addEventListener("controllerchange", listener);
57 | return () => {
58 | navigator.serviceWorker.removeEventListener(
59 | "controllerchange",
60 | listener
61 | );
62 | };
63 | }
64 | }
65 | }, [location]);
66 |
67 | return (
68 |
69 |
70 |
71 |
76 |
81 |
86 |
91 |
96 |
101 |
106 |
111 |
116 |
122 |
128 |
134 |
140 |
141 |
66 |
75 | |
76 |
77 | Edit Note
78 |
79 |
80 | )}
81 |
87 | {data.note.body}
88 |
89 |
44 |
54 | );
55 | }
56 |
57 | function Note({ title, content, link }: any) {
58 | const fetcher = useFetcher();
59 |
60 | const deleteNote = (id: string): boolean => {
61 | fetcher.submit({ mode: "DELETE_NOTE", id: link }, { method: "post" });
62 | return false;
63 | };
64 |
65 | return (
66 | 46 | No notes yet 47 |
48 | 49 | 52 | 53 |72 | {title} 73 |
74 |{content}
75 | 87 | 88 |
97 | {data.noteListItems.length > 0 && (
98 |
99 |
100 |
103 |
104 |
105 | )}
106 |
107 | {data.noteListItems.length == 0 || !data ? (
108 |
122 |
123 | );
124 | }
125 |
--------------------------------------------------------------------------------
/app/routes/notes/new.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | Form,
4 | useActionData,
5 | useFetcher,
6 | useTransition,
7 | } from "@remix-run/react";
8 | import { json, redirect } from "@remix-run/node";
9 | import { createNote } from "~/models/notes.server";
10 | import { requireUserId } from "~/utils/server/session.server";
11 |
12 | import type { LinksFunction, ActionFunction } from "@remix-run/node";
13 |
14 | import paper from "../../styles/paper.css";
15 |
16 | type ActionData = {
17 | errors?: {
18 | title?: string;
19 | body?: string;
20 | };
21 | };
22 |
23 | export const links: LinksFunction = () => {
24 | return [{ rel: "stylesheet", href: paper }];
25 | };
26 |
27 | export const action: ActionFunction = async ({ request }) => {
28 | const userId = await requireUserId(request);
29 |
30 | const formData = await request.formData();
31 | const title = formData.get("title");
32 | const body = formData.get("body");
33 |
34 | if (typeof title !== "string" || title.length === 0) {
35 | return json-
111 | {data.noteListItems.map((note) => (
112 |
36 |
37 |
146 |
148 | );
149 | }
150 |
--------------------------------------------------------------------------------
/app/entry.worker.ts:
--------------------------------------------------------------------------------
1 | /// 38 | 39 | Rockspec 40 | Notes 41 | 42 |
43 | 145 |
18 |
157 | Crafted by ShafSpecs with ❤️ and Remix vibes 💿
158 |
159 |
160 | );
161 | }
162 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Remix RockSpec Stack
2 |
3 | > Deprecated
4 |
5 | 
6 |
7 | Learn more about [Remix Stacks](https://remix.run/stacks).
8 |
9 | ```
10 | npx create-remix --template ShafSpecs/rockspec-stack
11 | ```
12 |
13 | ## What's in the stack
14 |
15 | - [Fly app deployment](https://fly.io) with [Docker](https://www.docker.com/)
16 | - Production-ready [PostgreSQL Database](https://www.postgresql.org/)
17 | - Fully functional [Progressive Web App](https://web.dev/progressive-web-apps/) native capabilities includng automatic caching, network detection and more.
18 | - Email/Password Authentication with [cookie-based sessions](https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage)
19 | - Database ORM with [Prisma](https://prisma.io)
20 | - Styling with [Tailwind](https://tailwindcss.com/)
21 | - End-to-end testing with [Cypress](https://cypress.io)
22 | - Code formatting with [Prettier](https://prettier.io)
23 | - Linting with [ESLint](https://eslint.org)
24 | - Static Types with [TypeScript](https://typescriptlang.org)
25 |
26 | Not a fan of bits of the stack? Want to improve it? Fork it, change it, and create a PR!
27 |
28 | ## Getting Started
29 |
30 | - Buckle your seatbelts and get ready to get blown by Remix!
31 |
32 | ## Development
33 |
34 | - Create a `.env` file and copy the content from the `.env.example` file, delete the `.env.example` file afterwards.
35 |
36 | - Provision the database and connect it to the app using the `DATABASE_URL` environment variable.
37 |
38 | > Skip if you're using Fly Postgres database (more info below).
39 |
40 | > *If you don't have Postgres database already, you could quickly provision one for free using [Railway](https://railway.app?referralCode=Q7x99X).*
41 |
42 | - Set up Prisma and connect it to the database:
43 | ```sh
44 | npm run prisma
45 | ```
46 |
47 | - Generate VAPID Keys for the Push API subscription service:
48 | ```sh
49 | npm run push-keys
50 | ```
51 | Store the Public key in the `VAPID_PUBLIC_KEY` and the private key in the `VAPID_PRIVATE_KEY` environment variable.
52 |
53 | - Start dev server:
54 |
55 | ```sh
56 | npm run dev
57 | ```
58 |
59 | This starts your app in development mode, rebuilding assets on file changes.
60 |
61 | ### Relevant code:
62 |
63 | This is a pretty simple note-taking app, but it's a good example of how you can build a full stack progressive web app with Prisma and Remix. The main functionality is creating users, logging in and out, and creating and deleting notes.
64 |
65 | - creating users, and logging in and out [./app/models/user.server.ts](./app/models/user.server.ts)
66 | - user sessions, and verifying them [./app/session.server.ts](./app/session.server.ts)
67 | - creating, and deleting notes [./app/models/note.server.ts](./app/models/note.server.ts)
68 | - client-side pwa APIs [./app/utils/client/pwa-utils.client.ts](./app/utils/client/pwa-utils.client.ts)
69 | - server-side pwa APIs [./app/utils/server/pwa-utils.server.ts](./app/utils/server/pwa-utils.server.ts)
70 | - pwa manifest [./app/routes/resources/manifest{.}json.ts](./app/routes/resources/manifest[.]json.ts)
71 |
72 | > *For more info on building a powerful Progressive Web App, checkout [`remix-pwa`](https://github.com/ShafSpecs/remix-pwa)*
73 |
74 | ## Deployment
75 |
76 | Prior to your first deployment, you'll need to do a few things:
77 |
78 | - [Install Fly](https://fly.io/docs/getting-started/installing-flyctl/)
79 |
80 | - Sign up and log in to Fly
81 |
82 | ```sh
83 | fly auth signup
84 | ```
85 |
86 | > **Note:** If you have more than one Fly account, ensure that you are signed into the same account in the Fly CLI as you are in the browser. In your terminal, run `fly auth whoami` and ensure the email matches the Fly account signed into the browser.
87 |
88 | - Create two apps on Fly, one for staging and one for production:
89 |
90 | ```sh
91 | fly create rockspec-stack-template
92 | fly create rockspec-stack-template-staging
93 | ```
94 |
95 | - Initialize Git.
96 |
97 | ```sh
98 | git init
99 | ```
100 |
101 | - Create a new [GitHub Repository](https://repo.new), and then add it as the remote for your project. **Do not push your app yet!**
102 |
103 | ```sh
104 | git remote add origin
19 |
87 |
20 |
21 | 
26 |
27 |
28 |
29 | 
83 |
84 |
85 |
86 |
26 |
27 | 30 | 31 | Rockspec 32 | Stack 33 | 34 |
35 |36 | Check the{" "} 37 | 38 | README.md 39 | {" "} 40 | file for instructions on how to get this project deployed. 41 |
42 |
43 | {user ? (
44 |
77 |
78 |
45 |
49 | View Notes
50 |
51 |
59 |
60 | ) : (
61 |
62 |
66 | Sign up
67 |
68 |
72 | Log In
73 |
74 |
75 | )}
76 |
83 |
84 |
88 |
156 |
89 | {[
90 | {
91 | src: "https://user-images.githubusercontent.com/1500684/157764397-ccd8ea10-b8aa-4772-a99b-35de937319e1.svg",
92 | alt: "Fly.io",
93 | href: "https://fly.io",
94 | },
95 | {
96 | src: "/svgs/pwa-svgrepo-com.svg",
97 | alt: "Progressive Web App",
98 | href: "https://web.dev/progressive-web-apps/",
99 | },
100 | {
101 | src: "https://user-images.githubusercontent.com/1500684/158238105-e7279a0c-1640-40db-86b0-3d3a10aab824.svg",
102 | alt: "PostgreSQL",
103 | href: "https://www.postgresql.org/",
104 | },
105 | {
106 | src: "https://user-images.githubusercontent.com/1500684/157764484-ad64a21a-d7fb-47e3-8669-ec046da20c1f.svg",
107 | alt: "Prisma",
108 | href: "https://prisma.io",
109 | },
110 | {
111 | src: "https://user-images.githubusercontent.com/1500684/157764276-a516a239-e377-4a20-b44a-0ac7b65c8c14.svg",
112 | alt: "Tailwind",
113 | href: "https://tailwindcss.com",
114 | },
115 | {
116 | src: "https://user-images.githubusercontent.com/1500684/157764454-48ac8c71-a2a9-4b5e-b19c-edef8b8953d6.svg",
117 | alt: "Cypress",
118 | href: "https://www.cypress.io",
119 | },
120 | // {
121 | // src: "https://user-images.githubusercontent.com/1500684/157772447-00fccdce-9d12-46a3-8bb4-fac612cdc949.svg",
122 | // alt: "Vitest",
123 | // href: "https://vitest.dev",
124 | // },
125 | {
126 | src: "https://user-images.githubusercontent.com/1500684/157772662-92b0dd3a-453f-4d18-b8be-9fa6efde52cf.png",
127 | alt: "Testing Library",
128 | href: "https://testing-library.com",
129 | },
130 | {
131 | src: "https://user-images.githubusercontent.com/1500684/157772934-ce0a943d-e9d0-40f8-97f3-f464c0811643.svg",
132 | alt: "Prettier",
133 | href: "https://prettier.io",
134 | },
135 | {
136 | src: "https://user-images.githubusercontent.com/1500684/157772990-3968ff7c-b551-4c55-a25c-046a32709a8e.svg",
137 | alt: "ESLint",
138 | href: "https://eslint.org",
139 | },
140 | {
141 | src: "https://user-images.githubusercontent.com/1500684/157773063-20a0ed64-b9f8-4e0b-9d1e-0b65a3d4a6db.svg",
142 | alt: "TypeScript",
143 | href: "https://typescriptlang.org",
144 | },
145 | ].map((img) => (
146 |
151 | 
152 |
153 | ))}
154 |
155 |
103 |
223 | );
224 | }
225 |
--------------------------------------------------------------------------------
/app/routes/join.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { json, redirect } from "@remix-run/node";
3 | import {
4 | Form,
5 | Link,
6 | useActionData,
7 | useLoaderData,
8 | useSearchParams,
9 | useTransition,
10 | } from "@remix-run/react";
11 | import { LockClosedIcon } from "@heroicons/react/solid";
12 | import { createUserSession, getUserId } from "~/utils/server/session.server";
13 | import { createUser, getUserByEmail } from "~/models/user.server";
14 | import { validateEmail } from "~/utils/server/db-utils.server";
15 |
16 | import type {
17 | ActionFunction,
18 | LoaderFunction,
19 | MetaFunction,
20 | } from "@remix-run/node";
21 |
22 | export const loader: LoaderFunction = async ({ request }) => {
23 | const userId = await getUserId(request);
24 | if (userId) return redirect("/notes");
25 | return json({});
26 | };
27 |
28 | interface ActionData {
29 | errors: {
30 | email?: string;
31 | password?: string;
32 | };
33 | }
34 |
35 | export const action: ActionFunction = async ({ request }) => {
36 | const formData = await request.formData();
37 | const email = formData.get("email");
38 | const password = formData.get("password");
39 | const redirectTo = formData.get("redirectTo");
40 |
41 | if (!validateEmail(email)) {
42 | return json
104 |
185 | {transition.state == "submitting" && (
186 |
105 |
106 | 
111 |
112 |
183 |
184 |
111 |
187 |
214 | )}
215 | {transition.state == "submitting" && (
216 | 188 | Hacking you in... 189 |
190 | 210 | {/*211 | Check the docs for building a better optimistic UI 212 |
*/} 213 |
217 |
221 | )}
222 | 218 | Check the Remix Docs for tips on better Optimistic UI and UX! 219 |
220 |
104 |
226 | );
227 | }
228 |
--------------------------------------------------------------------------------
/app/utils/client/pwa-utils.client.ts:
--------------------------------------------------------------------------------
1 | /*
2 | Project Fugu APIs
3 | &
4 | other client-side Service Worker methods & APIs for PWAs
5 | */
6 |
7 | /*
8 | ⚠ Except you understand & know the implication of what you're what you are doing, don't modify this file! ⚠
9 | */
10 |
11 | /**
12 | * Response Object returned by Client APIs. It serves as a good debugging
13 | * and error-checking method.
14 | */
15 |
16 | interface ResponseObject {
17 | status: "success" | "bad";
18 | message: string;
19 | }
20 |
21 | // Clipboard Copy API
22 |
23 | /**
24 | * Copies text to the clipboard of the device.
25 | *
26 | * @param {string} text - The text to copy to the device
27 | * @return {Promise
105 |
188 | {transition.state == "submitting" && (
189 |
106 |
107 |
112 |
113 |
114 |
186 |
187 |
112 | 115 | Create an account 116 |
117 |118 | 125 | Already have an account? 126 | 127 |
128 | 185 |
190 |
217 | )}
218 | {(transition.state == "submitting" || transition.state == "loading") && (
219 | 191 | Crafting a new account.. 192 |
193 | 213 | {/*214 | Check the docs for building a better optimistic UI 215 |
*/} 216 |
220 |
224 | )}
225 | 221 | Check the Remix Docs for tips on better Optimistic UI and UX! 222 |
223 |
272 | {open &&
275 |
279 | )}
280 | {actionData?.messages && (
281 |
282 |
286 | )}
287 |
288 |
298 |
299 |
442 |
443 | );
444 | }
445 |
--------------------------------------------------------------------------------
276 | {actionData.errors.body}
277 |
278 |
283 | {actionData.messages}
284 |
285 |
289 |
296 |
297 |
300 |
306 |
315 | {actionData?.errors?.title && (
316 |
317 | {actionData.errors.title}
318 |
319 | )}
320 |
321 |
322 | {transition.state == "idle" && fetcher.state !== "submitting" ? (
323 |
331 | ) : (
332 |
357 | )}
358 |
366 |
440 |
441 |