Add new `basic` starter for starters #28

FranjoMindek · 2025-05-19T11:37:04Z

These showcases are part of the new basic starter:

Should we showcase?:

RHF useForm
- pro: already use it in Auth UI
- cons: we force a choice on users (form library)
~~eslint/prettier~~
- ~~pro: setups basic chore work for what we already want e.g. prettier tailwind plugin, it would also make our code cleaner~~
- ~~cons: the starter is too opinionated~~
customizing Auth UI
- might make more sense from saas perspective, but we have open-saas for that
OAuth flow
- just a single OAuth provider to showcase the flow

Preview:

This reverts commit 8b6ad80.

…er-template # Conflicts: # README.md

Copilot

Pull Request Overview

This PR introduces a new "basic" starter template, adding core UI pages, authentication flows, database schema, Tailwind styling, and configuration for linting and formatting.

Added authentication pages (login, signup, email verification, password reset) and header/navigation.
Defined Prisma models for User, Task, and Tag with relationships and corresponding migrations.
Configured Tailwind, ESLint, Prettier, and updated README documentation.

Reviewed Changes

Copilot reviewed 49 out of 49 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
basic/src/auth/LoginPage.tsx	Login page component with navigation links
basic/src/auth/EmailVerificationPage.tsx	Email verification page component
basic/src/Header.tsx	Site header with auth-aware navigation
basic/src/App.tsx	Root component integrating header and routes
basic/src/App.css	Tailwind base, utilities, and custom `.card` class
basic/schema.prisma	Prisma models for User, Task, Tag with relations
basic/postcss.config.cjs	PostCSS config enabling Tailwind and autoprefixer
basic/package.json	Dependencies for React, Wasp, Prisma, Tailwind, etc.
basic/migrations/migration_lock.toml	Migration lock file for Prisma
basic/migrations/20250526144559_init/migration.sql	Migration adding `userId` to Tag table
basic/migrations/20250522152834_init/migration.sql	Initial schema migration
basic/main.wasp	Wasp app config: auth, routes, actions, queries
basic/eslint.config.js	ESLint flat config for JS, TS, React, Prettier
basic/README.md	Basic starter README with setup instructions
basic/.wasproot	Marker for Wasp project root
basic/.waspignore	Files ignored by Wasp
basic/.prettierrc	Prettier config with Tailwind plugin
basic/.prettierignore	Prettier ignore patterns
basic/.gitignore	Git ignore for Wasp and node modules
README.md	Top-level README updated with basic starter usage

basic/src/auth/EmailVerificationPage.tsx

basic/README.md

basic/migrations/20250526144559_init/migration.sql

basic/src/Header.tsx

Co-authored-by: Copilot <[email protected]>

…starters into franjo/new-basic-starter-template

Co-authored-by: Copilot <[email protected]>

FranjoMindek · 2025-06-08T07:48:58Z

I think I caught all non-design comments.
Design one is a bit harder, especially since bolt didn't manage to do more than rendering a blank page before running out of tokens 😅.

Learned a lot from comments.

infomiho

I've tried playing with the design and I've left a bunch of style changes. For some stuff I had good UX arguments (based on stuff I read and saw) and for other it was just a gut feeling.

Most functional change: removing migrations dir from .gitignore, that's why I'll request changes. We want users to version their migrations but we don't want to add them by default in the template.

.gitignore

basic/schema.prisma

basic/src/shared/components/Button.tsx

basic/tailwind.config.cjs

basic/src/tasks/components/TaskList.tsx

infomiho · 2025-06-09T12:49:15Z

basic/src/tasks/components/CreateTaskForm.tsx

+      <div className="flex flex-col gap-2">
+        <span>Select tags</span>
+        <div className="flex flex-wrap gap-4">
+          <ul className="flex flex-wrap gap-2">


Suggested change

<ul className="flex flex-wrap gap-2">

{tags && tags.length > 0 && (<ul className="flex flex-wrap gap-2">

Hide the ul when there are no tags to avoid broken layout.

infomiho · 2025-06-09T12:50:47Z

basic/src/tasks/components/TaskList.tsx

+      <ul className="flex flex-col gap-2">
+        {tasks.map((task) => (
+          <TaskListItem task={task} key={task.id} />
+        ))}
+      </ul>


I'd maybe put this above the number of completed tasks because it's more important.

infomiho · 2025-06-09T12:51:38Z

basic/src/tasks/components/TaskList.tsx

+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center justify-between">
+        <div>


Suggested change

<div>

<div className="text-sm text-neutral-500">

Making it a bit more muted since it's secondary information.

infomiho · 2025-06-09T12:52:05Z

basic/src/tasks/components/TaskList.tsx

+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center justify-between">


Suggested change

<div className="flex items-center justify-between">

<div className="flex items-center justify-between h-5">

Give it a fixed height to avoid layout jumps:

Screen.Recording.2025-06-09.at.11.36.27.mov

infomiho · 2025-06-09T13:01:16Z

basic/src/tasks/components/TaskListItem.tsx

+  }
+
+  return (
+    <li className="group flex w-full flex-wrap items-center justify-between gap-4 rounded-lg px-6 py-3 odd:bg-neutral-50 even:bg-primary-50">


This is another wild change, but I'd wrap the whole element in a label, so when you click on the whole element it acts as the checkbox:

Suggested change

<li className="group flex w-full flex-wrap items-center justify-between gap-4 rounded-lg px-6 py-3 odd:bg-neutral-50 even:bg-primary-50">

<li>

<label

htmlFor={id}

className={twJoin(

"card flex w-full flex-wrap items-center justify-between gap-4 bg-neutral-50 px-6 py-3",

task.isDone ? "bg-primary-50" : "",

)}

>

You also don't need the group class since you are not styling anything with group: styles. Also, I'd use the bg-primary-50 to indicate the completed tasks (or the other way around) and not make it alternate colors becuase it doesn't convey any extra meaning. The alternate colors pattern is more common in big tables where it helps you to keep track which row you are reading.

Screen.Recording.2025-06-09.at.14.58.20.mov

Daamn nice improvement.

…ovements

FranjoMindek · 2025-06-10T11:05:36Z

Damn Miho, you're really good at this.
The app feels 10000x nicer. Thanks.

I went over all of the design comments.

Image

FranjoMindek added 10 commits May 7, 2025 19:35

remove embeddings starter template

8b6ad80

start of basic starter template

74be319

Revert "remove embeddings starter template"

35cf85e

This reverts commit 8b6ad80.

start readme

2fe63ec

progress

6ae2d1c

Merge remote-tracking branch 'origin/dev' into franjo/new-basic-start…

768c3a9

…er-template # Conflicts: # README.md

newline

6b52af9

gitignore

fe42a08

basic work

470a5da

css

e0f934c

infomiho self-requested a review May 19, 2025 12:08

FranjoMindek added 5 commits May 22, 2025 16:59

savepoint

5c01595

unify migrations

b958eae

styles

9775c51

dynamic main.wasp

c900fd6

changes

3503e69

FranjoMindek requested a review from Copilot May 26, 2025 14:55

Copilot AI reviewed May 26, 2025

View reviewed changes

basic/src/auth/EmailVerificationPage.tsx Outdated Show resolved Hide resolved

basic/README.md Outdated Show resolved Hide resolved

basic/migrations/20250526144559_init/migration.sql Outdated Show resolved Hide resolved

basic/src/Header.tsx Outdated Show resolved Hide resolved

FranjoMindek and others added 6 commits May 26, 2025 16:58

Update basic/README.md

5f78210

Co-authored-by: Copilot <[email protected]>

Update basic/src/auth/EmailVerificationPage.tsx

918fb9f

Co-authored-by: Copilot <[email protected]>

deduplicate init migration

15e244e

Merge branch 'franjo/starter-templates-refactor' of franjo:wasp-lang/…

7bda176

…starters into franjo/new-basic-starter-template

Update basic/src/Header.tsx

3556159

Co-authored-by: Copilot <[email protected]>

improvements

3fa472f

FranjoMindek self-assigned this May 27, 2025

FranjoMindek added 5 commits May 27, 2025 17:29

refactors

1d097d8

style

bf75b47

fixes

f366f72

move

aab14fe

fix label

2fe9457

FranjoMindek added 21 commits June 5, 2025 17:07

type

f5e3705

end newline

673aeb3

naming

d0285db

light neutral, tailwind colors, rename finish

20233bb

types to interfaces

c09d1ca

dehoisted

cd98b1b

svg

aa9fef7

limit to user

fce39e1

rename

dff0404

no double colons

8d3a249

id

421572c

style objects

8e15caa

use portal

bb99637

fix portal dialog fix card

0afc43a

make containers have ids

f4b8b6c

remove css

9daab90

new background

57b06ec

make colors little more pastel-like

9870156

update colors

739574b

changes

cdd7d37

red

9b1f6ca

FranjoMindek requested a review from infomiho June 8, 2025 07:47

infomiho requested changes Jun 9, 2025

View reviewed changes

FranjoMindek added 4 commits June 9, 2025 16:44

ids to uuid, delete complete on server, tiny text remove, button impr…

d746360

…ovements

rhf start

811512a

portal changes

b55b26a

style changes

fa0d8d3

FranjoMindek requested a review from infomiho June 10, 2025 11:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add new `basic` starter for starters #28

Add new `basic` starter for starters #28

Uh oh!

FranjoMindek commented May 19, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

FranjoMindek commented Jun 8, 2025

Uh oh!

infomiho left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

infomiho Jun 9, 2025

Uh oh!

infomiho Jun 9, 2025

Uh oh!

infomiho Jun 9, 2025

Uh oh!

infomiho Jun 9, 2025

Uh oh!

infomiho Jun 9, 2025

Uh oh!

FranjoMindek Jun 10, 2025

Uh oh!

FranjoMindek commented Jun 10, 2025 •

edited

Loading

Uh oh!

Uh oh!

	<ul className="flex flex-wrap gap-2">
	{tags && tags.length > 0 && (<ul className="flex flex-wrap gap-2">

	<div className="flex items-center justify-between">
	<div className="flex items-center justify-between h-5">

-    <li className="group flex w-full flex-wrap items-center justify-between gap-4 rounded-lg px-6 py-3 odd:bg-neutral-50 even:bg-primary-50">
+    <li>
+      <label
+        htmlFor={id}
+        className={twJoin(
+          "card flex w-full flex-wrap items-center justify-between gap-4 bg-neutral-50 px-6 py-3",
+          task.isDone ? "bg-primary-50" : "",
+        )}
+      >

Add new basic starter for starters #28

Are you sure you want to change the base?

Add new basic starter for starters #28

Uh oh!

Conversation

FranjoMindek commented May 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

FranjoMindek commented Jun 8, 2025

Uh oh!

infomiho left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

infomiho Jun 9, 2025

Choose a reason for hiding this comment

Uh oh!

infomiho Jun 9, 2025

Choose a reason for hiding this comment

Uh oh!

infomiho Jun 9, 2025

Choose a reason for hiding this comment

Uh oh!

infomiho Jun 9, 2025

Choose a reason for hiding this comment

Uh oh!

infomiho Jun 9, 2025

Choose a reason for hiding this comment

Uh oh!

FranjoMindek Jun 10, 2025

Choose a reason for hiding this comment

Uh oh!

FranjoMindek commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Add new `basic` starter for starters #28

Add new `basic` starter for starters #28

FranjoMindek commented May 19, 2025 •

edited

Loading

infomiho left a comment •

edited

Loading

FranjoMindek commented Jun 10, 2025 •

edited

Loading