MIF_E31221222/sigap-website/README.md

82 lines
2.7 KiB
Markdown

# 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](https://nodejs.org/)
* [npm](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/)
* A Supabase project configured with your environment variables.
* A PostgreSQL database (for Prisma).
### Installation
1. Clone the repository:
```bash
git clone https://github.com/your-username/sigap-v.git
cd sigap-v/sigap-website
```
2. Install dependencies:
```bash
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:
```bash
npx prisma migrate dev
```
### Running the App
```bash
npm run dev
# or yarn dev
```
## Project Structure
```
src/
├── app/ # Next.js App Router pages and layouts
├── components/ # Reusable React components
├── config/ # Configuration files
├── constants/ # Application-wide constants
├── features/ # Feature-specific modules
├── hooks/ # Custom React hooks
├── lib/ # Utility functions and libraries
├── supabase/ # Supabase client and related configurations
├── types/ # TypeScript type definitions
├── utils/ # General utility functions
├── instrumentation-client.ts # Client-side instrumentation
├── instrumentation.ts # Server-side instrumentation
└── middleware.ts # Next.js middleware
prisma/ # Prisma schema and migrations
public/ # Static assets (images, fonts, etc.)
```