This application was born from a client at work wanting to use one of our APIs to add NPI lists to our system. It turned from a couple of simple [requests](https://docs.python-requests.org/en/latest/) calls, to a whole Python class using every endpoint the API has to offer.  I originally built a [CLI](https://en.wikipedia.org/wiki/Command-line_interface) which ended up not being user friendly for someone non techie. 

Therefore I decided to build a UI around the class with Flask...

### Login page

![login page](//images.ctfassets.net/53u3hzg2egeu/21eipT2cYErhoVgTCaextc/5f8d03bdd38f16ac2262f754dabff31b/Screenshot_2022-04-05_at_20.24.51.png)

More to come ... 

A flask application to give Pulsepoints LIFE api an UI for ease of use for their clients. 

life api ui

Life NPI API

I was tasked with building a UI for a work project our team took on. The UI would need to display audience data in a table format and get that data from a Postgres database. 

The prototype needed to be easy to use, as well as functional allowing a no techie user to create audience segments easily. Allow them to target the segments later on for one of their advertising campaigns. 

When deciding what tech to use, I went to straight to what I know and that was React and TailwindCSS. The only back end I have build before was for my ReactFastContacts app, which was a FastAPI backend with an SQLite database. I knew I wanted a database where I can use JS so I didn't have to worry about hosting the backend anywhere or creating any sort of API. 

I found supabase and thought it would be perfect for the task at hand, and it was. Being an open-source product the community around supabase is awesome, with tones of help and content to learn. Another reason I knew I picked the right product for the job.

### Creating the database

Before this project, I have never heard of an ERD (Entity–relationship model diagram) there are some good articles online about them however I found this [one](https://www.lucidchart.com/pages/er-diagrams) good enough, plus the videos help explain them a bit further. 

I was giving the table configurations via an Excel spreadsheet, with table names, column names and so on. Once I got my head around it I created the following ERD.

![signal journey erd](//images.ctfassets.net/53u3hzg2egeu/YFR5yWr56N5iXFjwnuOlu/b6cd1383a5ae4f6b88d6244504709f88/Signal_Journey_Database_ERD.png)

I used the supabase UI to create the tables and all the relationships, which was pretty easy. Having said that I use DataGrip daily at work, and wrote some SQL to re-create the tables if needed along the lines of 

```sql
CREATE TABLE "SignalJourneyAudiences"
(
    audience_id serial
        CONSTRAINT signaljourneyaudiences_pk
            PRIMARY KEY,
    segment     varchar,
    enabled     bool
);

CREATE UNIQUE INDEX signaljourneyaudiences_audience_id_uindex
    ON "SignalJourneyAudiences" (audience_id);

CREATE TABLE "SignalJourneySources"
(
    source_id serial
        CONSTRAINT signaljourneysource_pk
            PRIMARY KEY,
    source    varchar
);

...
```

### The UI

Now the backend is up and running, it's time to work on the user interface. The fun part, is the React part. I took the chance to use [Vite](https://vitejs.dev/) for this project due to the fact I didn't really need all the bells and whistles that came with something like NextJs. Using Vite was a blast it's pretty simple to use and add on top of. 

The UI itself is pretty simple it's just a table with a form that populates some data after the user has submitted it to the database. As I was already using Tailwind I wanted to bring some life to the form and make things look decent. This is where [headless.ui](https://headlessui.dev/) came in allowing me to make decent looking form components. I went ahead a built a couple of [Listbox](https://headlessui.dev/react/listbox) components to give the form a better feel. The headless ui library was awesome to use and makes forms and other little components a joy to build. You're even able to combine certain components within each other.

### The data
With the form and table more less coded up and looking good, it's time to populate the UI with some data. Supabase makes this super easy with [supabase-js](https://github.com/supabase/supabase-js) all that is required to get going is to create a connection client like so:

First install the `supabase-js` package

```bash
npm install @supabase/supabase-js
```

Then simply create a client in a seperate file within your project.

```js
import { createClient } from '@supabase/supabase-js'

// Create a single supabase client for interacting with your database
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
```
Then just import that into the files that you need to connect to your database. 

The table was where I needed to join a few tables together to get the desired result, in SQL it was pretty straight forward, especially with the auto-completion from DataGrip. I needed to re-create the following SQL query in supabase.

```sql
SELECT
     constraint_id,
     segment,
     source,
     constraint_type,
     constraint_value,
     targeting,
     frequency,
     period
FROM "SignalJourneyAudienceConstraints"
JOIN "SignalJourneyAudiences" sja ON sja.audience_id = "SignalJourneyAudienceConstraints".audience_id
join "SignalJourneySources" sjs ON "SignalJourneyAudienceConstraints".source_id = sjs.source_id
join "SignalJourneyConstraintType" sjct ON "SignalJourneyAudienceConstraints".constraint_type_id = sjct.constraint_type_id;
```

Now time to convert that into a supabase query. Another good thing about supabase is that after creating your tables and relationships, supabase gives you API documentation on how to get what you need from your database. 

```js
const {data, error} = await supabase
      .from('SignalJourneyAudienceConstraints')
      .select(
        `
      constraint_id,
      audience_id:SignalJourneyAudiences(audience_id),
      segment:SignalJourneyAudiences(segment) ,
      source:SignalJourneySources(source) ,
      constraint_type:SignalJourneyConstraintType(constraint_type),
      constraint_value,
      targeting,
      frequency,
      period
    `,
      )
      .order('constraint_id', {ascending: true})

    if (data) {
      setTableData(data)
    }
    if (error) {
      setErrorMessage(error.message)
    }
  }
```

Head over to [joins](https://supabase.com/docs/reference/javascript/select#query-foreign-tables) for more information about joins in supabase. With my above query, I learned a few things...

Using the syntax above allows you to query the same foreign table twice. In this case, you can use the name of the joined column to identify which join you intend to use.

How I understood the query

```js
<col you want to join>:<table to join from>(<the FK from joining table>)
```
When trying to use the data the joins come back as objects like `audience_id: {audience_id: 123 }` which did throw me when trying to access the data but nothing dot notation can't fix.

Overall my use of supabase was brilliant, the syntax was very simple to use the documentation was brilliant and all in all, supabase was a pleasurable experience. 

### The UI with data 

The UI is done the data is populated but now I had to give some user feedback when it came to messing with the data, for example.

- How can a user delete a row from the table?
- How can a user enable / disable an audience segment?
- How to present a user with success / error messages?

With React and supabase these two tasks were pretty straightforward, here is how I used supabase to delete a row from the table.

```js
const deleteRow = async constraint_id => {
    const {data, error} = await supabase
      .from('SignalJourneyAudienceConstraints')
      .delete()
      .match({constraint_id: constraint_id})

    if (data) {
      popupValidation('success', 'Constraint deleted successfully')
      window.location.reload()
    }
    if (error) {
      popupValidation('error', error.message)
    }
  }
```

Using the `.delete()` method with the `match()` allowed me to delete a row via an ID the ID being the primary key. As you can see the function is pretty simple this is how easy it was to use supabase. 

I used something similar to enable/disable audience segments but used the `.update()` method instead, which allowed me to update records. I created one function to enable and another to disable like so...

```js
const enableAudience = async audience_id => {
    const {data, error} = await supabase
      .from('SignalJourneyAudiences')
      .update({audience_id: audience_id, enabled: true})
      .match({audience_id: audience_id})

    if (data) {
      window.location.reload(true)
    }
    if (error) {
      popupValidation('error', error.message)
    }
  }

  const disableAudience = async audience_id => {
    const {data, error} = await supabase
      .from('SignalJourneyAudiences')
      .update({audience_id: audience_id, enabled: false})
      .match({audience_id: audience_id})

    if (data) {
      window.location.reload(true)
    }

    if (error) {
      popupValidation('error', error.message)
    }
  }
```

I then used another function with some conditional logic which would check if a segment was enabled or disabled, then fire off the correct function to make the update.

```js
const handleEnableDisableAudience = async audience_id => {
    segments.map(segment => {
      if (audience_id === segment.audience_id && segment.enabled === false) {
        enableAudience(audience_id)
      }
      if (audience_id === segment.audience_id && segment.enabled === true) {
        disableAudience(audience_id)
      }
    })
  }
```

I then used a ternary operator with React Icon to give some user feedback to let them know if the audience segment was enabled or disabled. Which on click would fire the function to check if it was enabled/disabled then run the correct function to swap the state.

```js
<BadgeCheckIcon
  className={`h-6 w-6 ${
    segment.enabled ? 'text-green-400' : 'text-red-500'
  } hover:cursor-pointer hover:text-gray-500`}
  onClick={() => handleEnableDisableAudience(segment.audience_id)}
/>

```

When it came to handling errors or success messages for the user, I had to think of something new as this wasn't something I had touched before. Here I created some states using `useState` if we take the success state for example it went something like this.

```js
const [success, setSuccess] = useState(false)
const [successMessage, setSuccessMessage] = useState('')
```

This allowed me to create a function that would use those states to set messages for a popup that was positioned in the top right of the screen. Doing it this way allowed me to set the states of the message anywhere throughout the component. I created myself a function that could handle all the different states.

```js
const popupValidation = (type, message) => {
    if (type === 'success') {
      setLoading(false)
      setSuccess(true)
      setSuccessMessage(message)

      setTimeout(() => {
        window.location.reload()
      }, 2000)
    } else if (type === 'warning') {
      setLoading(false)
      setWarning(true)
      setWarningMessage(message)

      setTimeout(() => {
        setWarning(false)
        setLoading(false)
      }, 2500)
    } else if (type === 'error') {
      setLoading(false)
      setError(true)
      setErrorMessage(message)

      setTimeout(() => {
        setError(false)
        setLoading(false)
      }, 2500)
    }
  }
```

That in turn was called like so.

```js
if (data) {
  popupValidation('success', 'Successfully added new audience constraint')
}
if (error) {
  popupValidation('error', error.message)
}
```
Now I am sure for the next bit there is an easier way of doing it, however for me this is what I came up with. I used a ternary operator for every state like this.

```js
{
  success ? (
    <div
      className="fixed top-5 right-5 z-40 rounded-b-lg border-t-4 border-green-500 bg-green-100 px-4 py-3 text-green-900 shadow-md"
      role="alert"
    >
      <div className="flex">
        <div className="mr-3 py-1">
          <LightningBoltIcon size="28" className="h-8 w-8" />
        </div>
        <div>
          <p className="font-bold">Success</p>
          <p className="text-sm">{successMessage}</p>
        </div>
      </div>
    </div>
  ) : null
}
```

I tried to put the three of them into a component allowing me to use it through out my project without copying and pasting it. I haven't quite figured that out yet. It's on my ToDo list...

### Conclusion

With this project, I learned a lot and I for sure haven't gone over everything but I have gone on enough. The project is still a work in progress some tweaks here and there are needed, with this project though I can safely say it did skyrocket my React skills I learnt.

- More about useEffect and how it works
- Using `useState` to enable the application to perform better
- The`useRef` hook
- supabase and all its wonders
- How to use headless ui in a project
- React router and creating routes
- and plenty more.

A prototype for creating audience segments and relationships, built in React and Supabase

signal journey prototype ui

Signal Journey Prototype

A fullstack CRUD application built with FastAPI, SQLite for the backend and React with TailwindCSS for the user interface.
## Run Locally 💻

First clone the whole repo.

```bash
git clone https://github.com/mrpbennett/contact_fastapi.git
```

Once cloned you will need to install the depencies for the back end as well as the front end instructions are:

## The Backend

An CRUD contact API built on Fast API with a SQLite database using SQLAlchemy.

## Run Locally 💻

Go to the project directory

```bash
> contact_fastapi/backend
```

Install dependencies

```bash
> pipenv install
```

Start the virtual enviroment

```bash
> pipenv shell
```

Create the databse

This will give you an sqlite database consisting of 10 enteries

```bash
> python create_db.py
```

Start the server

```bash
> uvicorn main:app --reload
```

This will start the server so you can test the API at `localhost:8000`

## Documentation 📚

Documentation will be located at `localhost:8000/redocs` once the server is up and running. But for when it's not here is a breif overview.

### CREATE :unicorn:

The `CREATE` endpoint will allow you to send JSON creating a new contact

```bash
localhost:8000/create-contact
```

Sending `JSON` in the message body like so below will create a new conact:

```json
{
  "first_name": "Frank",
  "last_name": "Flintstone",
  "company": "Slate Rock and Gravel Company",
  "tel": "210-555-1212",
  "email": "frank.flintstone@srgc.com",
  "address": "1 Yabba-Dabba-Doo, Bedrock, TX 12345"
}
```

### READ 🤓

There are two `READ` endpoints they are:

```bash
localhost:8000/all-contacts
```

This will return all the current contacts within the database

```bash
localhost:8000/get-contact/{contact_id}
```

This will return a contact by its `ID`

### UPDATE ⤴️

The `UPDATE` endpoint is similar to the create endpoint. This allows you to change contact information by `contact_id`

```bash
localhost:8000/update-contact/{contact_id}
```

```json
{
  "first_name": "Wilma",
  "last_name": "Flintstone",
  "company": "NULL",
  "tel": "210-555-6969",
  "email": "Wilma.flintstone@gmail.com",
  "address": "1 Yabba-Dabba-Doo, Bedrock, TX 12345"
}
```

### DELETE ❎

The `DELETE` endpoint allows you to delete a contact entry via it's ID

```bash
localhost:8000/delete-contact/{contact_id}
```

## The Front end

![React](https://img.shields.io/badge/react-35495e.svg?&style=for-the-badge&logo=react&logoColor=61DAFB)
![TailwindCSS](https://img.shields.io/badge/tailwindcss-gray.svg?&style=for-the-badge&logo=tailwindcss&logoColor=06B6D4)
![Prettier](https://img.shields.io/badge/prettier-F7B93E.svg?&style=for-the-badge&logo=prettier&logoColor=white)

This is a React Front End to harness the FastAPI of the backend, and display its data. The front end also allows for user intereaction, enabling the user to create / delete and edit contact entries.

## Run Locally 💻

After cloning the whole repo to where ever you have chosen to do so. You will need to enter the directory of the front end like so:

```bash
> contact_fastapi/frontend
```

Install dependencies

```bash
> npm install
```

Once you're in the front end director run the following

```bash
> npm run start
```

This will load up the front end of this application, if you have loaded the front end before the back end you should just see an empty table.

**IF** you have loaded the backend first you should see the data from `contact_fastapi/backend/contacts.db` loaded up in the browser.


ReactFast contacts. CRUD app built with a FastAPI / SQLite backend with a pretty React & TailwindCSS front end.

ReactFast Contacts


## The Issue 👀

Here at Pulsepoint, we have an internal tool that allows us to capture responses from our publishers and buyers. These allow us to dig down into the information that is being sent by our publishers / buyers.

Each response capture is over 1700 lines of JSON and looks like the following:

```json
[
	{
		"request": {
			"requestContext": {
				"xyzBidRequest": {
					"askPrice": 1,
					"sspBidFloor": 0.00,
					"performancePrice": 0,
					"altTagId": 0,
					"bhTokens": "",
					"segmentsToUid": {
					},
					"compressedData": "",
					"retargetingCategoryIds": "",
					"retargetingLanguageIds": "",
					"adTagId": 123456,
					"adTagGroupId": 123456,
					"network": "XYZ",
					"publisherId": 123456,
					"tagSizeId": 4,
					"contextualInfo": {
						"channelIds": [
							0,
							0,
							0
						],
						"contextualized": false
					},
          ...
```

As you can imagine locating what you need can be challenging. Especially when the user creates more than one capture. The internal tool has the capability of pulling 500 captures. That is over **850,000** lines of JSON to check though.

The user would have to use a `Find` feature within a text editor or use a tool such as [JQPlay](https://jqplay.org/) which can be daunting for non tech users.

## The Solution ⚡️

The solution here is a simple UI which pulls the data from the created captures via the internal tools API. The UI displays a selection of buttons, each button is assigned to is own utility function via an `onClick` method. One of the utility functions is below:

```javascript
const askPrice = () => {
  return data.map(
    (result) => result.request.requestContext.mpcBidRequest.askPrice
  );
};
```

This will return every `askPrice` from the response. Sometimes we can capture up to 100 responses. That is potentially over 170,000 lines of data. This is where you can see these utility functions making easy work of the response.

The mapped data is there populated below allowing the user to just see what they're looking for, for each one of the responses.

### Error Handling

We need to give the user some good feedback for when the response they're trying to generate doesn't load. For this we have three flashes

##### Success

![success](//images.ctfassets.net/53u3hzg2egeu/uLWBrFgNnEx81z3OP6fmZ/6d12c3046bc6aeb857150b1250f606b2/success.png)

This message means that their capture has been imported into the UI and you cant click through all the buttons.

##### Warning

![warning](//images.ctfassets.net/53u3hzg2egeu/49HQu7QXM1SBZHx5XlaUZH/2bf440c41b68e7b10092cacecdec2186/warning.png)

When a user sees this message this means that their capture hasn’t generated any logs.

##### Danger

![danger](//images.ctfassets.net/53u3hzg2egeu/4prTFcJcQlbC4NJuKRZ71J/585158d553a700aeb9748f7f9a7a0b5e/danger.png)

If a user sees this, it means that they haven’t entered a name for their capture.


React app which allows users to bypass the use of JQ Play. When it comes to parsing JSON data.

Projects.

Life NPI API

Signal Journey Prototype

ReactFast Contacts

Exchange Debugger UI