Demo the project on mintd.vercel.app.
To run and demo the project locally (same as the deployed version on mintd.vercel.app), view the steps here.
- Next.js 14
- TypeScript
- Tailwind CSS
- Supabase
- Vercel
-
Get Project Keys
Go to Project API section in the Supabase Database and find the Project URL and API Key
-
Create env File
Create
.env.local
file and populate url and key, get template from.env.example
NEXT_PUBLIC_SUPABASE_URL=your-project-url NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
Don't populate in
.env.example
and upload online lol
-
Install Packages (requires node version >= 18.17.0)
npm install
-
Run Project
npm run dev
It should now be running on localhost:3000.
Use tailwind theme extensions under tailwind.config.js
theme: {
extend: {
colors: {
background: "#FFFBFB", //near white
darkmaroon: "#590D24",
//Color palette from figma
maroon: "#944E63",
lightmaroon: "#B47B84",
brown: "CAA6A6",
peach: "#FFE7E7",
//Text colors
primary: "#FFFBFB", //near white, use as substitute to white text
heading: "#262626", //dark gray, use for big texts and headings
body: "#737373", //light gray, use for small texts and body
},
},
},
Use Material UI icons found here for any svg icons
Minted uses shadcn/ui for UI components
/app
Contains all path files for website
/app/dashboard
Contains pages split by the sidenav menu options
/app/login
Contains only the login page
/app/auth/callback
Handles user auth control from email or google sign in
/utils/supabase
Handles the integration of Supabase with the project.
/utils/scripts
Contains all API calls and queries to the Supabase database. Calls are separated by the table/functionality it is associated with.
/components/ui
Reserved for all component files installed from shadcn
/database.types.ts
Establishes types of database objects. Created and updated using Supabase CLI type generation. Allows typescript to recognize data from Supabase queries.