MIF_E31221222/sigap-website

SIGAP Website

This is the website for SIGAP Jember, built with Next.js.

Features

• User Authentication
• Data management with Prisma and Supabase
• Interactive maps with Mapbox GL JS
• UI components with Radix UI and Tailwind CSS
• Form handling with React Hook Form and Zod
• State management with Zustand
• Email handling with React Email and Resend

Technologies Used

• Next.js: React framework for building full-stack web applications.
• Prisma: Next-generation ORM for Node.js and TypeScript.
• Supabase: Open Source Firebase Alternative (Backend as a Service).
• Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
• Radix UI: A collection of unstyled, accessible UI components.
• Mapbox GL JS: For interactive, customizable vector maps on the web.

Getting Started

Prerequisites

• Node.js
• npm or Yarn
• A Supabase project configured with your environment variables.
• A PostgreSQL database (for Prisma).

Installation

1. Clone the repository:

   git clone https://github.com/your-username/sigap-v.git
   cd sigap-v/sigap-website
   

2. Install dependencies:

   npm install
   # or yarn install
   

3. Create a .env file in the sigap-website directory and add your environment variables (e.g., Supabase credentials, database URL):

   DATABASE_URL="postgresql://user:password@host:port/database?schema=public"
   NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
   NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
   

4. Run Prisma migrations:

   npx prisma migrate dev
   

Running the App

npm run dev
# or yarn dev

Project Structure

src/
├── app/             # Next.js App Router pages
├── components/      # Reusable React components
├── lib/             # Utility functions and configurations
├── styles/          # Tailwind CSS styles
└── types/           # TypeScript type definitions
prisma/              # Prisma schema and migrations
public/              # Static assets