1  # Project Setup and Configuration Instructions
  2  
  3  This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
  4  
  5  ## Getting Started
  6  
  7  To get the project up and running on your local machine, follow these steps:
  8  
  9  1. Clone the repository:
 10      ```bash
 11      git clone https://github.com/BasedSocialCo/whomane.git
 12      ```
 13  
 14  2. Install dependencies:
 15  
 16  cd into the app directory
 17      ```bash
 18  cd app
 19      ```
 20  then run
 21  
 22      ```bash
 23      npm install
 24      # or
 25      yarn
 26      # or
 27      pnpm install
 28      # or
 29      bun install
 30      ```
 31  
 32  3. Start the development server:
 33      ```bash
 34      npm run dev
 35      # or
 36      yarn dev
 37      # or
 38      pnpm dev
 39      # or
 40      bun dev
 41      ```
 42  4. If you are getting hydration errors, run:
 43      ```bash
 44      npm i next@latest
 45      ```
 46  5. Open [http://localhost:3000](http://localhost:3000) in your browser to view the application.
 47  
 48  ## Environment Variables
 49  
 50  The project requires several environment variables to be set for proper operation. These include Firebase configuration for Firestore, Leap AI, and Facecheck API keys.
 51  
 52  ### Setting Up Firebase
 53  
 54  The first few environment variables are for Firebase configuration. Follow these steps to obtain your Firebase project configuration:
 55  
 56  1. Go to the [Firebase Console](https://console.firebase.google.com/).
 57  2. Create a new project or select an existing one.
 58  3. Navigate to Project settings > General.
 59  4. Under the "Your apps" section, add a new web app or select an existing one.
 60  5. Copy the Firebase SDK snippet configuration. It will look something like this:
 61  
 62      ```js
 63      const firebaseConfig = {
 64        apiKey: "YOUR_API_KEY",
 65        authDomain: "YOUR_AUTH_DOMAIN",
 66        projectId: "YOUR_PROJECT_ID",
 67        storageBucket: "YOUR_STORAGE_BUCKET",
 68        messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
 69        appId: "YOUR_APP_ID",
 70        measurementId: "YOUR_MEASUREMENT_ID"
 71      };
 72      ```
 73  
 74  6. In your project directory, open the file .env.eample and populate it with these values:
 75  
 76      ```
 77      NEXT_PUBLIC_API_KEY=YOUR_API_KEY
 78      NEXT_PUBLIC_AUTH_DOMAIN=YOUR_AUTH_DOMAIN
 79      NEXT_PUBLIC_PROJECT_ID=YOUR_PROJECT_ID
 80      NEXT_PUBLIC_STORAGE_BUCKET=YOUR_STORAGE_BUCKET
 81      NEXT_PUBLIC_MESSAGING_SENDER_ID=YOUR_MESSAGING_SENDER_ID
 82      NEXT_PUBLIC_APP_ID=YOUR_APP_ID
 83      NEXT_PUBLIC_MEASUREMENT_ID=YOUR_MEASUREMENT_ID (if you don't see this, enable Google analytics in Firebase)
 84      ```
 85  
 86  ### Leap AI (optional)
 87  
 88  The `NEXT_PUBLIC_LEAP_API_KEY` check out https://www.tryleap.ai/ to get an API key. This is only needed if you want to research or ask questions about the people you scan.
 89  
 90  ### Obtaining Facecheck API Key
 91  
 92  Note: you'll have to pay in crypto to get credits for this API
 93  
 94  To get the Facecheck API key:
 95  
 96  1. Visit the Facecheck API documentation or registration page. (https://facecheck.id/Face-Search/API)
 97  2. Sign up or log in to your account.
 98  3. Navigate to your API dashboard.
 99  4. Generate or copy your existing API token.
100  5. Add this token to your environment file:
101  
102      ```
103      NEXT_PUBLIC_FACECHECK_APITOKEN=YOUR_FACECHECK_APITOKEN
104      ```
105  # Deploying the API and frontend
106  You'll need to deploy this to vercel or similar, because the API endpoint that is used by the Raspberry Pi to process the image is contained within this next.js project `(/api/facecheck)`
107  
108  ## 1.. Sign Up or Log In to Vercel
109  
110  If you haven't already, you'll need to create an account on Vercel. You can sign up using your email or GitHub, GitLab, or Bitbucket account, which makes it easier to deploy projects hosted on these services.
111  
112  ## 2. Install Vercel CLI (Optional)
113  
114  While you can deploy using the Vercel web interface, installing the Vercel CLI provides more flexibility and control. Install it globally using npm or yarn:
115  
116  ```sh
117  npm i -g vercel
118  ```
119  
120  ## 3. Deploying Your Project
121  There are two main ways to deploy: using the Vercel CLI or directly through the Vercel Dashboard.
122  
123  ### Using the Vercel CLI:
124  Open your terminal and navigate to your project directory.
125  Run vercel to initiate the deployment. If you're not logged in, the CLI will prompt you to authenticate.
126  Follow the CLI prompts to set up your project. The CLI will automatically detect the type of project and suggest settings. You can override these as needed.
127  Once configured, Vercel will deploy your project, and you'll receive a URL to access your live site.
128  
129  ### Using the Vercel Dashboard:
130  Log in to the Vercel Dashboard.
131  Click on the "New Project" button.
132  You can either import a project from Git or upload your project files directly if it's not hosted on a Git provider.
133  Select your project or repository, configure your project settings as needed, and then deploy.
134  Vercel will process your project and provide a URL to access your live site.
135  css
136  
137  ## Questions
138  Ask in the Discord if you get stuck, we're here to help :)
139  
140