Quick Start

Setup the environment variables

Firebase Setup

Go to the Firebase Console and sign in with your Google account. Click on "Add Project" and follow the on-screen instructions to create a new project. After creating the project, navigate to the "Project Settings" by clicking on the gear icon in the left-hand menu.

In the Firebase console, click on the "Web" icon to register your web app. Provide a name for your app and enable Firebase Hosting if required. Click "Register App", and Firebase will provide you with a configuration snippet.

Open your terminal and navigate to the root directory of your project. Run the following command to install the Firebase SDK:

npm install firebase

Store your Firebase credentials securely in a .env.local file in the root of your project:

NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-auth-domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-storage-bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
NEXT_PUBLIC_FIREBASE_APP_ID=your-app-id

Firebase Service Account Keys Integration

Purpose:

The NEXT_PUBLIC_FIREBASE_SERVICE_ACCOUNT_KEYS variable holds your Firebase Service Account keys, which are required for securely interacting with Firebase services like Firestore, Authentication, or Cloud Storage from your backend or restricted APIs. Obtain Service Account Keys:

Go to the Firebase Console: https://console.firebase.google.com (opens in a new tab). Select your project and navigate to Project Settings by clicking on the gear icon. In the settings page, go to the Service Accounts tab. Click on Generate New Private Key to download the Service Account JSON file. Extract the Keys:

Open the downloaded JSON file. The keys you need will include properties like type, project_id, private_key_id, private_key, client_email, client_id, and others. Set Up the Environment Variable:

Copy the entire JSON object from the file and store it in the NEXT_PUBLIC_FIREBASE_SERVICE_ACCOUNT_KEYS variable in your .env.local file. Example:

this is a Example only but when you add object of NEXT_PUBLIC_FIREBASE_SERVICE_ACCOUNT_KEYS add in single line OK.

NEXT_PUBLIC_FIREBASE_SERVICE_ACCOUNT_KEYS='{
  "type": "service_account",
  "project_id": "your-project-id",
  "private_key_id": "your-private-key-id",
  "private_key": "-----BEGIN PRIVATE KEY-----\\nYOUR_PRIVATE_KEY\\n-----END PRIVATE KEY-----\\n",
  "client_email": "firebase-adminsdk-abc@your-project-id.iam.gserviceaccount.com",
  "client_id": "123456789012345678901",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-abc%40your-project-id.iam.gserviceaccount.com"
}'

Cloudinary Setup

To integrate Cloudinary into your Next.js application, set up the following environment variables in your .env.local file:

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME= cloud name 
NEXT_PUBLIC_CLOUDINARY_API_KEY= api key
NEXT_PUBLIC_CLOUDINARY_API_SECRET=api secret key

Firebase Service Account Keys Integration

Install the Cloudinary Node.js SDK to interact with Cloudinary services:

npm install cloudinary

This command starts the development server using the scripts defined in the package.json file.

npm run dev

6. Wait for the server to start. You should see logs in the terminal indicating that the server has started successfully. It will typically mention the port number where your app is running http://localhost:3000.
7. Open your web browser and enter the URL shown in the terminal http://localhost:3000.
8. Congratulations! Your front-end app should now be running, and you can begin testing and interacting with it.