NEXT_PUBLIC_SUPABASE_URL

NEXT_PUBLIC_SUPABASE_ANON_KEY

{

"extends": "next/core-web-vitals"

}

/node_modules

/.pnp

/coverage

/.next/

/out/

/build

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

First, run the development server:

npm run dev

yarn dev

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

import Link from "next/link";

import styles from "../styles/Footer.module.css";

const Footer = () => {

return (

<div className={styles.container}>

<h1 className={styles.text}>

Built with{" "}

<Link href="https://nextjs.org/">

<span className={styles.stack}>Nextjs</span>

</Link>{" "}

and{" "}

<Link href="https://supabase.com/">

<span className={styles.stack}>Supabase</span>

</Link>

</h1>

<Link href="">

<p className={styles.repo}>Github Repo</p>

</Link>

</div>

);

export default Footer;

import Link from "next/link";

import styles from "../styles/Navbar.module.css";

import { supabase } from "../utils/supabase";

const Navbar = ({ session }) => {

return (

<div className={styles.container}>

<div>

<p className={styles.title}>Adrenargy</p>

</div>

{session?.user ? (

<ul className={styles.navContent}>

<Link href="/">

<li className={styles.name}>Home</li>

</Link>

<button

className={styles.buttons}

onClick={() => supabase.auth.signOut()}

>

Logout

</button>

<Link href="/create">

<button className={styles.buttons}>Create New Workout</button>

</Link>

</ul>

) : (

<ul className={styles.navContent}>

<Link href="/login">

<li className={styles.buttons}>Login</li>

</Link>

<Link href="/signup">

<li className={styles.buttons}>Signup</li>

</Link>

</ul>

)}

</div>

);

export default Navbar;

import Link from "next/link";

import { useEffect, useState } from "react";

import styles from "../styles/WorkoutCard.module.css";

import { supabase } from "../utils/supabase";

import { BsTrash } from "react-icons/bs";

import { FiEdit } from "react-icons/fi";

import { formatDistanceToNow } from "date-fns/";

const WorkoutCard = ({ data, handleDelete }) => {

return (

<div className={styles.workoutContainer}>

{data?.map((item) => (

<div key={item.id} className={styles.container}>

<p className={styles.title}>

{" "}

Title: {""}

{item.title}

</p>

<p className={styles.load}>

{" "}

Load(kg): {" "}

{item.loads}

</p>

<p className={styles.reps}>Reps:{item.reps}</p>

<p className={styles.time}>

created:{" "}

{formatDistanceToNow(new Date(item.inserted_at), {

addSuffix: true,

})}

</p>

<div className={styles.buttons}>

<Link href={`/edit/${item.id}`}>

<a className={styles.edit}>

<FiEdit />

</a>

</Link>

<button

onClick={() => handleDelete(item.id)}

className={styles.delete}

>

<BsTrash />

</button>

</div>

</div>

))}

</div>

);

export default WorkoutCard;

module.exports = {

reactStrictMode: true,

{

"name": "nextjs-supabase",

"private": true,

"scripts": {

"dev": "next dev",

"build": "next build",

"start": "next start",

"lint": "next lint"

},

"dependencies": {

"@supabase/supabase-js": "^1.35.4",

"date-fns": "^2.29.1",

"next": "12.2.3",

"react": "18.2.0",

"react-dom": "18.2.0",

"react-hot-toast": "^2.3.0",

"react-icons": "^4.4.0"

},

"devDependencies": {

"eslint": "8.20.0",

"eslint-config-next": "12.2.3"

}

}

import Link from "next/link";

import { useState, useEffect } from "react";

import Footer from "../components/Footer";

import Navbar from "../components/Navbar";

import "../styles/globals.css";

import { supabase } from "../utils/supabase";

function MyApp({ Component, pageProps }) {

const [session, setSession] = useState(null);

useEffect(() => {

setSession(supabase.auth.session());

supabase.auth.onAuthStateChange((_event, session) => {

setSession(session);

});

}, []);

return (

<div>

<Navbar session={session} />

<Component {...pageProps} session={session} />

<Footer />

</div>

);

export default MyApp;

export default function handler(req, res) {

res.status(200).json({ name: 'John Doe' })

import { supabase } from "../utils/supabase";

import { useState, useEffect } from "react";

import styles from "../styles/Create.module.css";

import { useRouter } from "next/router";

const Create = () => {

const initialState = {

title: "",

loads: "",

reps: "",

};

const router = useRouter();

const [workoutData, setWorkoutData] = useState(initialState);

const { title, loads, reps } = workoutData;

const handleChange = (e) => {

setWorkoutData({ ...workoutData, [e.target.name]: e.target.value });

};

const createWorkout = async () => {

const user = supabase.auth.user();

const { data, error } = await supabase

.from("workouts")

.insert({

title,

loads,

reps,

user_id: user?.id,

})

.single();

alert("Workout created successfully");

setWorkoutData(initialState);

router.push("/");

};

return (

<>

<div className={styles.container}>

<div className={styles.form}>

<p className={styles.title}>Create a New Workout</p>

<label className={styles.label}>Title:</label>

<input

type="text"

name="title"

value={title}

onChange={handleChange}

className={styles.input}

placeholder="Enter a title"

/>

<label className={styles.label}>Load (kg):</label>

<input

type="text"

name="loads"

value={loads}

onChange={handleChange}

className={styles.input}

placeholder="Enter weight load"

/>

<label className={styles.label}>Reps:</label>

<input

type="text"

name="reps"

value={reps}

onChange={handleChange}

className={styles.input}

placeholder="Enter number of reps"

/>

<button className={styles.button} onClick={createWorkout}>

Create Workout

</button>

</div>

</div>

</>

);

export default Create;