Pulse (frontend)

Pulse

Buzz Buzz
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. License
5. Contact
6. Acknowledgments

About The Project

CodeHive aims to be a tool to help aspiring developers get fast, reliable, and contextual feedback on their questions. This is achieved by enabling seamless project integration and providing holistic context to related questions.

(back to top)

Built With

• 
• 

(back to top)

Getting Started

Prerequisites

• npm

   npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/Spark-Project-Pulse/frontend.git

2. Install NPM packages

    npm install

Environment Variables

See the following article for a detailed explanation of how to manage environment variables in a Next.js project: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables

• TLDR:
• Environment variables are NOT to be used as secrets. To add a secret to the project, use the get_secret function in your code and follow these directions to add the secret to Google Secret Manager.
• To add an environment variable to the project (for example, anything with the name NEXT_PUBLIC_*), add the development value of the variable to .env.development in the format VARIABLE_NAME=value and the production value to .env.production in the format VARIABLE_NAME=value. The variable will be available in the project as process.env.VARIABLE_NAME.

Secret Management

Accessing Secrets locally

1. Go to the Google Cloud Console, navigate to IAM & Admin > Service Accounts, and and download the already existing json key from the service acount called Secret Accessor Service Account. Go to the Keys tab and click Add Key then Create New Key then Create (use json format). Your key will download as pulse-random-letters-and-numbers.json in the root of the project.
2. Add a .env.local file to the root of the project with the following contents:

GOOGLE_CLOUD_PROJECT=google_cloud_project_id
GOOGLE_APPLICATION_CREDENTIALS=pulse-random-letters-and-numbers.json

3. server-side code: Use the getSecret function in src/lib/getSecret.ts to access secrets stored in Google Secret Manager locally. The function takes the secret name as an argument and returns the secret value.
   1. (you should ONLY use this function in server-side functions labelled with 'user-server')
4. client-side code: Use the getSecrets function in src/api/getSecrets.ts which is a Next.js endpoint that is called on the server (since the getSecret function requires server-side dependencies)
   1. (you should ONLY use this function in client-side functions labelled with 'use-client' or no label)

Updating Secrets

To ensure they will be available in production and consistent across all environments and between developers, secrets should be stored in Google Secret Manager. To update a secret:

1. Navigate to the Google Cloud Console
2. Select the project Pulse
3. Navigate to Secret Manager
4. Select the secret you want to update
5. Click Delete to delete the secret
6. Now recreate the secret with the new value (I am aware this is kind of a pain, but I haven't researched how versions work yet)

Creating New Secrets

For the frontend, there are only two kinds of secrets: local and production. When creating a new secret, make sure to add the production version by appending _PRODUCTION to the secret name and the local version by appending _LOCAL. Even if the secret is the same for both environments, it should be added twice to ensure that the secret is available in both environments. The getSecret function handles the logic of which secret to return based on the environment, so after adding the secret to Google Secret Manager, it should be accessible via the function.

Steps for creating a new secret via the Google Cloud Console UI:

1. Navigate to the Google Cloud Console
2. Select the project Pulse
3. Navigate to Secret Manager
4. Select the secret you want to update
5. Click Create Secret
6. Enter the secret's name and value
7. Click Create Secret

Run locally

Docker

Running the frontend

1. Make sure the Docker daemon is running (open Docker Desktop)
2. Navigate to the frontend repository
3. Use this command to build and run the backend container:

   docker compose up --build

4. Navigate to http://localhost:3000 to see an example of an API response

Running the frontend & backend in one command

1. Make sure the Docker daemon is running (open Docker Desktop)
2. Navigate to the frontend repository
3. Make sure the backend repository is in the same directory as the frontend repository
4. Use this command to run the project locally:

    docker compose --profile frontend-and-backend up --build

5. This will run the frontend and backend in separate containers

Node

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

(back to top)

Usage

User Authentication

Since we are using Supabase Auth, there are two types of user-schemas that we have access to (see backend models.py for more details on AuthUser and our custom User).

1. Getting Custom User from "client" code

In general, we will want to use the custom User schema to get important information about the user that needs to be rendered by the client. HOWEVER, in order to do so, we first need to use Supabase's getUser function to get the user's id. You can simply use the useUser context to auto-"magically" fetch the user:

import { useUser } from '@/app/contexts/UserContext'

export default function YourComponent () {
  const { user, loading } = useUser()
  ...
}

2. Getting Custom AuthUser from "server" code

So far, it seems that the main use for getting the AuthUser in server-side code (i.e. functions/files in src/api) would be to pass in the active user_id to the backend API. This is useful for creating objects associated with that user. To do so, you should use the getSupaUser function from utils/supabase/server. Here is an example for uploading projects:

import { getSupaUser } from '@/utils/supabase/server';

export const createProject = async (values: {
    public: boolean;
    title: string;
    description: string;
  }): Promise<ApiResponse<{ project_id: string }>> => {
    try {
      const user = await getSupaUser()

      const vals = { owner: user?.id, ...values }

      ...

(back to top)

See the open issues for a full list of proposed features (and known issues).

(back to top)

Top contributors:

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

CodeHive - [email protected]

Project Link: https://github.com/Spark-Project-Pulse/backend

(back to top)

Acknowledgments

• CodeHive Team

(back to top)