Merge pull request #8 from timia2109/feature/ui-improvements

UI improvements

.env.example

@@ -1,10 +1,5 @@
-# Since .env is gitignored, you can use .env.example to build a new `.env` file when you clone the repo.
-# Keep this file up-to-date when you add new variables to `.env`.
-
-# This file will be committed to version control, so make sure not to have any secrets in it.
-# If you are cloning this repo, create a copy of this file named `.env` and populate it with your secrets.
-
-# When adding additional env variables, the schema in /env/schema.mjs should be updated accordingly
-
-# Prisma
-DATABASE_URL=file:./db.sqlite
+DATABASE_URL=mysql://root:root@db/simple-meal-plan
+INVITATION_VALIDITY=P30D
+NEXTAUTH_SECRET=A_SECRET
+ROOT_URL=https://example.com
+NEXT_PUBLIC_PRIVACY_URL=https://example.com

README.md

@@ -1,16 +1,27 @@
 # Simple Meal Plan
 
-This is a very simple meal planner which I build in two hours. 
-I want to replace the Excel Sheet, my girlfriend was using. 
-Currently there a no authentication build in. So this should only deployed on private networks. 
-Work in Progress.
+This is a very simple meal planner. It's main purpose is to host it as a free SaaS solution.
+You can use it [here](https://example.com). Anyway you can deploy it using Docker.
+
+I want to replace the Excel Sheet, my girlfriend was using.
+
+## Features
+
+![Example Screenshot](public/example.png)
+
+- Plan Meal for any date
+- (Tablet, Desktop): See a complete calendar of the month which is editable
+- Share meal plans with magic links to other users to collaborate (household, etc.)
+- Manage multiple meal plans per user
 
 ## Techstack
 
 - [Next.js](https://nextjs.org)
 - [Prisma](https://prisma.io)
 - [Tailwind CSS](https://tailwindcss.com)
-- [tRPC](https://trpc.io)
+- [DaisyUI](https://daisyui.com)
+
+## Deployment
 
-## Screenshot
-![Example Screenshot](docs/example.png)
+You'll need a MySQL / MariaDB database.
+Have a look at [`.env.example`](./.env.example) or at the [schema](./src/env/schema.mjs)

prisma/migrations/20240805194021_remove_userid_constrant/migration.sql

@@ -0,0 +1,2 @@
+-- DropConstraint
+ALTER TABLE Account DROP KEY Account_userId_key;

prisma/schema.prisma

@@ -59,7 +59,7 @@ model User {
  emailVerified DateTime?
  image String?
  Session Session[]
- Account Account?
+ Account Account[]
 
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
@@ -70,7 +70,7 @@ model User {
 
 model Account {
  id String @id @default(cuid()) @db.Char(25)
- userId String @unique @db.Char(25)
+ userId String @db.Char(25)
  type String
  provider String
  providerAccountId String

src/app/[locale]/(landing)/FeatureBox.tsx

@@ -0,0 +1,40 @@
+import Image from "next/image";
+import type { FC } from "react";
+import type { Feature } from "./Features";
+import { isImageFeature } from "./Features";
+
+type Props = {
+ feature: Feature;
+};
+
+export const FeatureBox: FC<Props> = ({ feature }) => (
+ <div className="card bg-base-300 shadow-2xl">
+ {isImageFeature(feature) && (
+ <figure>
+ <Image
+ src={feature.image}
+ alt={feature.alt}
+ width={feature.width}
+ height={feature.height}
+ />
+ </figure>
+ )}
+ <div className="card-body">
+ <h2 className="card-title flex justify-center">{feature.heading}</h2>
+ {feature.body.map((paragraph, index) => (
+ <p key={index}>{paragraph}</p>
+ ))}
+ {feature.link && (
+ <div className="card-actions justify-end">
+ <a
+ href={feature.link}
+ target="_blank"
+ className="btn btn-outline btn-secondary"
+ >
+ More Infos
+ </a>
+ </div>
+ )}
+ </div>
+ </div>
+);

src/app/[locale]/(landing)/Features.ts

@@ -0,0 +1,63 @@
+// In this files we define the features of the landing page
+
+import { getScopedI18n } from "@/locales/server";
+
+type Description = string;
+
+type PlainFeature = {
+ heading: Description;
+ body: Description[];
+ link?: string;
+};
+
+type ImageFeature = PlainFeature & {
+ image: string;
+ alt: string;
+ width: number;
+ height: number;
+};
+
+export type Feature = PlainFeature | ImageFeature;
+
+export const getFeatures: () => Promise<Feature[]> = async () => {
+ const t = await getScopedI18n("features");
+
+ return [
+ {
+ heading: t("featureA"),
+ image: "/example.png",
+ alt: t("featureAImgAlt"),
+ width: 288,
+ height: 119,
+ body: [t("featureADescription")],
+ },
+ {
+ heading: t("featureB"),
+ body: [t("featureBDescription1"), t("featureBDescription2")],
+ image: "undraw_real_time_sync_re_nky7.svg",
+ alt: t("featureBImgAlt"),
+ height: 200,
+ width: 200,
+ },
+ {
+ heading: t("featureC"),
+ body: [t("featureCDescription")],
+ image: "undraw_eating_together_re_ux62.svg",
+ alt: t("featureCImgAlt"),
+ height: 200,
+ width: 200,
+ },
+ {
+ heading: t("featureD"),
+ body: [t("featureDDescription")],
+ },
+ {
+ heading: t("featureE"),
+ body: [t("featureEDescription")],
+ link: "https://github.com/timia2109/simple-meal-plan",
+ },
+ ];
+};
+
+export const isImageFeature = (feature: Feature): feature is ImageFeature =>
+ "image" in feature;

src/app/[locale]/(landing)/SignInButton.tsx

@@ -8,12 +8,10 @@ export const SignInButton: FC<{ id: string; label: string }> = ({
 }) => {
  return (
  <button
- className="btn-outline-primary btn btn-lg bg-gradient-to-r from-pink-500 to-purple-600 shadow-2xl"
+ className="btn btn-outline btn-primary join-item btn-lg"
  onClick={() => signIn(id)}
  >
- <span className="px-16 text-xl font-semibold text-purple-950">
- {label}
- </span>
+ {label}
  </button>
  );
 };

src/app/[locale]/(landing)/SignInButtons.tsx

@@ -7,7 +7,7 @@ export async function SignInButtons() {
  const t = await getScopedI18n("landing");
 
  return (
- <div className="flex flex-wrap justify-between gap-4">
+ <div className="join">
  {Object.values(authConfig.providers as OAuth2Config<unknown>[]).map(
  (d) => (
  <SignInButton key={d.id} id={d.id} label={t("signinWith", d)} />

src/app/[locale]/(landing)/page.tsx

@@ -3,6 +3,8 @@ import { InvitationHeader } from "@/components/invitation/InvitationHeader";
 import { getInvitation } from "@/dal/user/getInvitation";
 import { getScopedI18n } from "@/locales/server";
 import { redirectRoute } from "@/routes";
+import { FeatureBox } from "./FeatureBox";
+import { getFeatures } from "./Features";
 import { SignInButtons } from "./SignInButtons";
 
 type Props = {
@@ -36,13 +38,16 @@ export default async function LandingPage({ searchParams }: Props) {
  );
  if (currentUser != null && invitation == null) redirectRoute("mealPlan");
 
+ const features = await getFeatures();
+
  return (
  <div className="p-12">
- <div className="fw-bolder flex flex-col items-center justify-center gap-16">
- <div className="flex flex-col items-center justify-center gap-8 ">
+ <title>{t("title")}</title>
+ <div className="fw-bolder flex flex-col items-center justify-center gap-8">
+ <div className="flex flex-col items-center justify-center gap-4">
  <h1 className="text-6xl">
  {t("welcome")}
- <span className="bg-gradient-to-r from-pink-500 to-purple-600 bg-clip-text font-semibold text-transparent">
+ <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text font-semibold text-transparent">
  {" "}
  {t("title")}
  </span>
@@ -57,23 +62,9 @@ export default async function LandingPage({ searchParams }: Props) {
 
  <SignInButtons />
  <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
- <div className="card w-96 bg-base-300 shadow-2xl">
- <div className="card-body">
- <h2 className="card-title flex justify-center">
- Feature Heading
- </h2>
- <p>Feature Box</p>
- </div>
- </div>
-
- <div className="card w-96 bg-base-300 shadow-2xl">
- <div className="card-body">
- <h2 className="card-title flex justify-center">Search Params</h2>
- <p>
- <code>{JSON.stringify(searchParams)}</code>
- </p>
- </div>
- </div>
+ {features.map((feature, index) => (
+ <FeatureBox key={index} feature={feature} />
+ ))}
  </div>
  </div>
  </div>

src/auth.config.ts

@@ -1,7 +1,31 @@
 import type { NextAuthConfig } from "next-auth";
-import GoogleProvider from "next-auth/providers/google";
+import { Provider } from "next-auth/providers";
+import Facebook from "next-auth/providers/facebook";
+import Google from "next-auth/providers/google";
 import { env } from "./env/server.mjs";
 
+const providers: Provider[] = [];
+
+if (env.AUTH_GOOGLE_ID && env.AUTH_GOOGLE_SECRET) {
+ providers.push(
+ Google({
+ clientId: env.AUTH_GOOGLE_ID,
+ clientSecret: env.AUTH_GOOGLE_SECRET,
+ allowDangerousEmailAccountLinking: env.ALLOW_ACCOUNT_LINKING === "true",
+ })
+ );
+}
+
+if (env.AUTH_FACEBOOK_ID && env.AUTH_FACEBOOK_SECRET) {
+ providers.push(
+ Facebook({
+ clientId: env.AUTH_FACEBOOK_ID,
+ clientSecret: env.AUTH_FACEBOOK_SECRET,
+ allowDangerousEmailAccountLinking: env.ALLOW_ACCOUNT_LINKING === "true",
+ })
+ );
+}
+
 export const authConfig: NextAuthConfig = {
  secret: env.NEXTAUTH_SECRET,
  session: {
@@ -15,10 +39,5 @@ export const authConfig: NextAuthConfig = {
  return session;
  },
  },
- providers: [
- GoogleProvider({
- clientId: env.GOOGLE_CLIENT_ID,
- clientSecret: env.GOOGLE_CLIENT_SECRET,
- }),
- ],
+ providers,
 };

src/components/common/Footer.tsx

@@ -18,14 +18,15 @@ export async function Footer() {
  href="https://timitt.dev"
  target="_blank"
  rel="noreferrer"
- className="underline underline-offset-4 transition-all hover:font-bold
- hover:text-orange-500"
+ className="link-hover link ms-1"
  >
  {t("author")}
  </a>
  </div>
  {env.NEXT_PUBLIC_PRIVACY_URL && (
- <a href={env.NEXT_PUBLIC_PRIVACY_URL}>{t("privacy")}</a>
+ <a className="link-hover" href={env.NEXT_PUBLIC_PRIVACY_URL}>
+ {t("privacy")}
+ </a>
  )}
  <div>
  <a

src/components/common/NavBar.tsx

@@ -75,7 +75,9 @@ export async function NavBar() {
  </ul>
  </div>
  <Link href={getRoute("mealPlan")} className="btn btn-ghost text-xl">
- {t("landing.title")}
+ <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+ {t("landing.title")}
+ </span>
  </Link>
  </div>
  <div className="navbar-center hidden lg:flex">

src/components/mealPlan/MealPlanComponent.tsx

@@ -63,7 +63,7 @@ export async function MealPlanComponent({
  )}
  </Link>
 
- <div className="md:justify-self-end lg:justify-self-center lg:last:justify-self-end">
+ <div className="md:justify-self-end lg:justify-self-start lg:last:justify-self-end">
  <div className="avatar-group -space-x-6 rtl:space-x-reverse">
  {users.map((user) => (
  <ProfileImage key={user.id} user={user} />

src/env/schema.mjs

@@ -2,27 +2,43 @@
 import { z } from "zod";
 
 /**
- * Specify your server-side environment variables schema here.
- * This way you can ensure the app isn't built with invalid env vars.
+ * This are the environment variables for the server.
+ * You need to set them
  */
 export const serverSchema = z.object({
- DATABASE_URL: z.string(),
+ DATABASE_URL: z.string().describe("The URL to the database"),
  NODE_ENV: z.enum(["development", "test", "production"]),
- GOOGLE_CLIENT_SECRET: z.string(),
- GOOGLE_CLIENT_ID: z.string(),
- INVITATION_VALIDITY: z.string().default("P30D"),
- SESSION_VALIDITY_IN_SECONDS: z.number().default(60 * 60 * 24 * 30), // 30 days
- NEXTAUTH_SECRET: z.string(),
- ROOT_URL: z.string().url().optional(),
+ INVITATION_VALIDITY: z
+ .string()
+ .default("P30D")
+ .describe("The duration of the invitation token"),
+ SESSION_VALIDITY_IN_SECONDS: z
+ .number()
+ .default(60 * 60 * 24 * 30)
+ .describe("Session validity"), // 30 days
+ NEXTAUTH_SECRET: z.string().describe("The secret for next-auth"),
+ ROOT_URL: z
+ .string()
+ .url()
+ .optional()
+ .describe("The root URL of the server. Used to generate invitation links"),
+ ALLOW_ACCOUNT_LINKING: z.enum(["true", "false"]).default("false"),
+
+ // auth-js Providers
+ AUTH_GOOGLE_ID: z.string().optional(),
+ AUTH_GOOGLE_SECRET: z.string().optional(),
+ AUTH_FACEBOOK_ID: z.string().optional(),
+ AUTH_FACEBOOK_SECRET: z.string().optional(),
 });
 
 /**
- * Specify your client-side environment variables schema here.
- * This way you can ensure the app isn't built with invalid env vars.
- * To expose them to the client, prefix them with `NEXT_PUBLIC_`.
+ * This are the environment variables for the client.
  */
 export const clientSchema = z.object({
- NEXT_PUBLIC_PRIVACY_URL: z.string().optional(),
+ NEXT_PUBLIC_PRIVACY_URL: z
+ .string()
+ .optional()
+ .describe("The URL to the privacy policy. Adds a point to the footer"),
 });
 
 /**