{"id":24998225,"url":"https://github.com/amir1887/myanmar-flood","last_synced_at":"2026-04-09T11:39:55.013Z","repository":{"id":257951682,"uuid":"868495376","full_name":"Amir1887/Myanmar-Flood","owner":"Amir1887","description":"this project is for Developing tech solutions to improve disaster response for Myanmar's flood crisis that started on 9 September 2024","archived":false,"fork":false,"pushed_at":"2024-12-18T01:29:48.000Z","size":1644,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-04T17:51:18.720Z","etag":null,"topics":["clerk","epressjs","js","nodejs","postgresql","prisma","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Amir1887.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-06T14:30:58.000Z","updated_at":"2025-01-17T19:23:42.000Z","dependencies_parsed_at":"2025-02-04T17:40:34.065Z","dependency_job_id":"0135818c-2b4a-4f98-886d-ab8b967b2368","html_url":"https://github.com/Amir1887/Myanmar-Flood","commit_stats":null,"previous_names":["amir1887/myanmar-flood"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Amir1887%2FMyanmar-Flood","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Amir1887%2FMyanmar-Flood/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Amir1887%2FMyanmar-Flood/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Amir1887%2FMyanmar-Flood/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Amir1887","download_url":"https://codeload.github.com/Amir1887/Myanmar-Flood/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246215816,"owners_count":20741894,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clerk","epressjs","js","nodejs","postgresql","prisma","reactjs"],"created_at":"2025-02-04T17:40:10.375Z","updated_at":"2025-12-30T23:17:49.923Z","avatar_url":"https://github.com/Amir1887.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Myanmar-Flood  \n\nThis project is focused on developing tech solutions to improve disaster response to Myanmar's flood crisis, which started on September 9, 2024. The app will assist in real-time damage assessment and needs analysis and provide a dashboard for decision-makers and aid organizations.  \n\nThis project won the Myanmar Flood Response hackathon which you can find here:\nhttps://devpost.com/software/myanmar-flood-platform\n\nand here is the link to the hackathon:\nhttps://myanmar-flood-response.devpost.com/\n\n# What it does\n```bash\nThe platform generates a localized flood simulation by combining GLOFAS forecast data with other sources to provide more accurate results. Users can view emergency-level information on potential floods, including visualized severity levels through infographics. This setup allows users to understand and prepare for the possible impacts of floods with greater clarity.\n ```\n\n## Technology Stack  \n-------------------------------------  \n**Backend:**     \n```bash  \n            - **PostgreSQL**: A SQL database for storing application data.  \n            - **Express.js**: A web application framework for Node.js.  \n            - **Node.js**: A JavaScript runtime for server-side programming.\n            - **Prisma**: An ORM for database modeling and querying with PostgreSQL.\n ```\n**FrontEnd:**\n```bash  \n    - **React**: A JavaScript library for building user interfaces.  \n    - **Tailwind CSS**: A utility-first CSS framework for styling the frontend.\n    - **Material Ui** : for modern design\n    - **Clerk**: An authentication and user management service to handle user sign-up, sign-in, and access control.\n  ```\n\n## API and External sources used: \n------------------------------------- \n```bash\n-Flood Data: GLOFAS API – Accessed via Rasdaman for building flood animations and interactive visualizations with varied elevation thresholds\n -Weather Data: Open-Meteo API -Maps: MapTiler API for robust mapping layers. -Push Notifications: Web-Push library for real-time alerts.\n-Reports and Alerts: Aggregated from ReliefWeb, Department of Meteorology and Hydrology (Myanmar), and MIMU (Myanmar Information Management Unit) to provide a unified source for disaster\n ```\n## Prerequisites for Local Deployment  \n---------------------------------------  \nBefore you begin, ensure you have the following requirements met:  \n- **Node.js**: Install Node.js from [nodejs.org](https://nodejs.org/).  \n- **PostgreSQL**: Set up a PostgreSQL database locally or using a cloud provider.\n- **Prisma**: Install Prisma CLI globally or locally in your project. \n\n\n## Installation  \n---------------  \n1. Clone the repository:  \n    ```bash  \n    git clone https://github.com/Amir1887/Myanmar-Flood.git  \n    cd Myanmar-Flood  \n    ```  \n\n2. Install server dependencies:  \n    ```bash  \n    cd back-end  # Navigate to the backend directory  \n    npm install  \n    ```  \n\n3. Set up environment variables in the server directory (.env file):  \n    ```bash  \n    DATABASE_URL=\u003cyour-postgresql-connection-string\u003e  \n    PORT=4000 \n    ```  \n4. Initialize Prisma:\n    Create your Prisma schema file:\n    ```bash  \n       npx prisma init\n    ```\n    Add the PostgreSQL connection string in the newly created .env file:\n    ```bash  \n       DATABASE_URL=postgresql://\u003cusername\u003e:\u003cpassword\u003e@localhost:5432/MyanmarFlood?schema=public\n\n    ```\n\n5. Generate Prisma client and run migrations:  \n    ```bash  \n    npx prisma generate  \n    npx prisma migrate dev --name init  \n \n    ```\n   ** This will apply the migrations and set up your database schema.\n   \n6. Install client dependencies:  \n    ```bash  \n     cd ../front-end/myanmar-flood  # Navigate to the frontend directory   \n    npm install  \n    ```  \n\n7. Set up environment variables for the client in the client directory (.env file):  \n    ```bash  \n    REACT_APP_BASE_URL='http://localhost:4000'\n    REACT_APP_CLERK_PUBLISHABLE_KEY=..............\n    REACT_APP_SIGN_IN_REDIRECT_URL=................\n    REACT_APP_SIGN_IN_FALLBACK_REDIRECT_URL=................\n    ```\n\n# Getting Started with Create React App\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Available Scripts\n\nIn the frontend directory, you can run:\n\n### `npm start` \nOR\n### `yarn start` \n\n## Using Tailwind CSS \n---------------  \nThis project uses Tailwind CSS for responsive, utility-first styling. To modify the design system or extend styles, check tailwind.config.js and add your custom styles or themes.\n\nTailwind Setup:\n1. Tailwind is already installed as part of the front-end dependencies.\n2. Custom colours and themes are defined in tailwind.config.js. Please feel free to modify and extend this file based on what you think.\n```bash  \n    module.exports = {\n  content: [\"./src/**/*.{js,jsx,ts,tsx}\", \"./public/index.html\"],\n  theme: {\n    extend: {\n      colors: {\n        primary: {\n          light: '#3AB0FF',\n          DEFAULT: '#1E3A8A',\n          dark: '#1E2A5A',\n        },\n      },\n    },\n  },\n  plugins: [],\n};\n```\n3. Tailwind utilities can be used directly in JSX, like so:\n   ```bash  \n    \u003cbutton className=\"bg-primary hover:bg-primary-light text-white px-4 py-2 rounded\"\u003e\n    Click me\n    \u003c/button\u003e\n  \n    ``` \n   \n## Using Clerk for Authentication \n---------------  \nClerk is used to handle user authentication, sign-up, sign-in, and access control. Follow these steps to ensure Clerk is integrated properly:\n1.Sign up for a Clerk account and get your frontend API key and backend API URL from the Clerk dashboard.\n2.In the frontend, Clerk is integrated with React using the Clerk React SDK. Ensure the environment variables are set as follows in your .env: \n```bash  \n    REACT_APP_CLERK_PUBLISHABLE_KEY=\u003cyour-clerk-frontend-api\u003e\n    REACT_APP_SIGN_IN_REDIRECT_URL=................\n    REACT_APP_SIGN_IN_FALLBACK_REDIRECT_URL=................\n  ``` \n3. Wrap your application in the ClerkProvider: \nin my application, I put it in root-layout.js but You can put it in index.js \n ```bash  \nimport {  Outlet, useNavigate } from 'react-router-dom';\nimport { ClerkProvider } from '@clerk/clerk-react';\n\nimport Footer from '../components/Footer';\n\nconst PUBLISHABLE_KEY = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY;\n\n// default to /dashboard\nconst clerkConfig = {\n  signInRedirectUrl: process.env.REACT_APP_SIGN_IN_REDIRECT_URL || '/dashboard',\n  signInFallbackRedirectUrl: process.env.REACT_APP_SIGN_IN_FALLBACK_REDIRECT_URL || '/dashboard',\n};\n\n\nif (!PUBLISHABLE_KEY) {\n  throw new Error('Missing Publishable Key');\n}\n\n//This component acts as the root layout(It's a wrapper for the whole app, providing the Clerk context.)\n// Ensure no unclosed elements or extra spaces in JSX\nexport default function RootLayout() {\n  const navigate = useNavigate();\n\n  return (\n    \u003cClerkProvider\n      routerPush={(to) =\u003e navigate(to)}\n      routerReplace={(to) =\u003e navigate(to, { replace: true })}\n      publishableKey={PUBLISHABLE_KEY}\n      {...clerkConfig}\n    \u003e\n      \u003cdiv className=\"flex flex-col min-h-screen\"\u003e\n        \u003cmain className=\"flex-grow\"\u003e\n          \u003cOutlet /\u003e  {/* Ensures child routes render correctly */}\n        \u003c/main\u003e\n        \u003cFooter className=\"flex-none\" /\u003e\n      \u003c/div\u003e\n    \u003c/ClerkProvider\u003e\n  );\n}\n```\n4.Use Clerk hooks and components like SignIn, SignUp, and UserButton to implement authentication features in your app:\n```bash \nimport { SignIn } from '@clerk/clerk-react'\n\nexport default function SignInPage() {\n  return(\n    \u003cdiv className='flex items-center justify-center p-4'\u003e\n       \u003cSignIn path=\"/sign-in\" /\u003e\n    \u003c/div\u003e\n  )\n}\n ```\n5.In the backend, use Clerk middleware to secure API routes and authenticate users using the Clerk API.\n## Running the Application  \n---------------  \n1. Run the server (from the server directory):  \n    ```bash  \n    npm run dev  \n    ```  \n\n   Or with Nodemon (if installed):  \n    ```bash  \n    nodemon server.js  \n    ```  \n\n   The backend should be running at http://localhost:4000.  \n\n2. Run the client (from the client directory):  \n    ```bash  \n    npm run dev  \n    ```  \n\n   The frontend should be running at http://localhost:3000.  \n\n\n\n## Prisma Commands Cheat Sheet  \n---------------  \n1. Generate Prisma Client:\n     ```bash  \n    npx prisma generate    \n    ```  \n3. Run Migrations:  \n ```bash  \n  npx prisma migrate dev --name \u003cmigration_name\u003e  \n  ``` \n4. Seed Database (optional):\n    **To populate the database with some initial data: \n   ```bash  \n    npx prisma db seed      \n    ```  \n5. Prisma Studio (Database Browser):\n    **To view and interact with your database: \n   ```bash  \n    npx prisma studio        \n    ```  \n## Contributing  \n---------------  \n1. Fork the repository.  \n2. Create a new branch (`git checkout -b feature-branch`).  \n3. Make your changes.  \n4. Commit your changes (`git commit -m 'Add some feature'`).  \n5. Push to the branch (`git push origin feature-branch`).  \n6. Open a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famir1887%2Fmyanmar-flood","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famir1887%2Fmyanmar-flood","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famir1887%2Fmyanmar-flood/lists"}