https://github.com/ardiansetya/disasters-report-react-express

fullstack app for disasters report build with React-Express-Postgresql
https://github.com/ardiansetya/disasters-report-react-express

axios-react expressjs jwt-auth postgresql prisma react react-router-dom

Last synced: 3 months ago
JSON representation

fullstack app for disasters report build with React-Express-Postgresql

• Host: GitHub
• URL: https://github.com/ardiansetya/disasters-report-react-express
• Owner: ardiansetya
• Created: 2025-01-03T09:04:21.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2025-01-07T13:45:12.000Z (over 1 year ago)
• Last Synced: 2025-10-09T00:46:46.673Z (9 months ago)
• Topics: axios-react, expressjs, jwt-auth, postgresql, prisma, react, react-router-dom
• Language: JavaScript
• Homepage: https://disasters-report-react-express.vercel.app/
• Size: 245 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Aplikasi Pelaporan Bencana 🌀

Aplikasi ini memungkinkan pengguna untuk melaporkan kejadian bencana seperti banjir, gempa bumi, kebakaran, dan tanah longsor. Setelah pengguna melaporkan kejadian bencana, data akan disimpan dan ditampilkan di daftar bencana.

## Fitur 🔧

- **Formulir Pelaporan Bencana**: Pengguna dapat memasukkan nama pelapor, lokasi kejadian, jenis bencana, deskripsi, dan tanggal kejadian.

- **Daftar Bencana**: Menampilkan daftar semua kejadian bencana yang telah dilaporkan.

## Teknologi yang Digunakan 💻

- **Frontend**: React, Axios, Tailwind CSS

- **Backend**: Express.js, PostgreSQL

- **Database**: PostgreSQL

### Prasyarat

- Node.js

- PostgreSQL

### Langkah-langkah untuk Mengatur Proyek 🛠️

1. **Clone repository ini**:

   ```bash

   git clone https://github.com/ardiansetya/UAS-Pemsik.git

   cd UAS-Pemsik

Berikut adalah dokumentasi untuk GitHub proyek Anda dengan menggunakan ikon untuk memberikan tampilan yang lebih menarik dan terstruktur.

2. **Instal dependensi di frontend dan backend**:

   - Untuk **frontend**:

     ```bash

     cd fe

     npm install

     ```

   - Untuk **backend**:

     ```bash

     cd be

     npm install

     ```

3. **Mengatur database**:

   - Pastikan Anda memiliki PostgreSQL yang terinstal.

   - Atur konfigurasi database di file `.env` untuk backend.

4. **Menjalankan aplikasi**:

   - Jalankan backend:

     ```bash

     cd backend

     npm run dev

     ```

   - Jalankan frontend:

     ```bash

     cd frontend

     npm run dev

     ```

## Endpoints API 📡

## Auth

- **POST** `/api/register`: Register

  - Request body:

    ```json

    {

       "name": "michelle",

       "email": "michelle@gmail.com",

       "password": "12345678"

    }

    ```

  - Response:

    ```json

    {

       "user": {

          "id": 1,

          "name": "michelle",

          "email": "michelle@gmail.com"

        },

     "message": "Register successful"

    }

    ```

- **POST** `/api/login`: Login

  - Request body:

    ```json

    {

     "email": "michelle@gmail.com",

     "password": "12345678"

    }

    ```

  - Response:

    ```json

    {

    "user": {

       "id": 1,

       "name": "michelle",

       "email": "michelle@gmail.com"

     },

     "token": "Your Token",

     "message": "Login successful"

    }

    ```

## CRUD

- **POST** `/api/disasters`: Melaporkan bencana

  - Request body:

    ```json

    {

      "reporterName": "Nama Pelapor",

      "location": "Lokasi Kejadian",

      "disasterType": "Jenis Bencana",

      "description": "Deskripsi Kejadian",

      "date": "Tanggal Kejadian"

    }

    ```

  - Response:

    ```json

    {

      "status": "success"

      "message": "Disasters created successfully",

      "data": {

      "reporterName": "Nama Pelapor",

      "location": "Lokasi Kejadian",

      "disasterType": "Jenis Bencana",

      "description": "Deskripsi Kejadian",

      "date": "Tanggal Kejadian"

      }

    }

    ```

- **GET** `/api/disasters`: Mengambil semua data bencana yang sudah dilaporkan

  - Response:

    ```json

    {

    "status": "success"

    "message": "Disasters retrieved successfully",

    "data": [

        {

        "reporterName": "Nama Pelapor",

        "location": "Lokasi Kejadian",

        "disasterType": "Jenis Bencana",

        "description": "Deskripsi Kejadian",

        "date": "Tanggal Kejadian"

        },

      ]

    }

    ```

- **PUT** `/api/disasters/:id`: Edit semua data bencana yang sudah dilaporkan

  - Response:

    ```json

    {

    "status": "success"

    "message": "Disasters edited successfully",

    "data": [

        {

        "reporterName": "Nama Pelapor",

        "location": "Lokasi Kejadian",

        "disasterType": "Jenis Bencana",

        "description": "Deskripsi Kejadian",

        "date": "Tanggal Kejadian"

        },

      ]

    }

    ```

- **DELETE** `/api/disasters/:id`: Edit semua data bencana yang sudah dilaporkan

  - Response:

    ```json

    {

    "status": "success"

    "message": "Disaster deleted successfully",

    "data": [

        {

        "reporterName": "Nama Pelapor",

        "location": "Lokasi Kejadian",

        "disasterType": "Jenis Bencana",

        "description": "Deskripsi Kejadian",

        "date": "Tanggal Kejadian"

        },

      ]

    }

    ```