OloParts

Track electronic component prices, save parts, and get notified when prices drop, all from one clean dashboard.

Untitled.design.6.mp4

OloParts is an app that lets you search for electronic components from Octopart using Olostep, save the parts you care about, set price targets on your watchlist, and receive notifications through Novu when prices fall. It uses Turso for persistence, Clerk for authentication, and OpenAI for semantic search and embeddings.

What this app does

Search components from Octopart using a fast hybrid approach.
Save parts to your personal saved list and revisit them any time.
Watchlist with optional target price. You can set a specific price target, or leave it blank to get notified on any price drop, even by a dollar.
Price check scheduling runs on a cron, selectable between 6-hour and 24-hour intervals. When prices fall below your target (or drop at all), Novu sends you a notification.
Recent searches are stored per user and surface as quick suggestions in the search bar.
Semantic search via OpenAI embeddings. Fuzzy and meaning-based results supplement exact MPN and full-text matches.

High-level flow

User signs in via Clerk.
User searches for a component. The app gives you the results
User saves a part or adds it to the watchlist.
A cron job runs on the chosen schedule (6h or 24h) or you can manually trigger the check from settings and re-checks prices for active watchlist items.
If the new price is below the target price (or any price drop if no target was set), the app triggers a Novu workflow which sends the user a notification.

Prerequisites

Node.js 18 or newer
A Turso account
A Clerk account
An OpenAI account
An Olostep account
A Novu account

Setup: step by step

1. Clone the repo

git clone <repo-url>
cd oloparts

2. Install dependencies

npm install

3. Set up Turso

Create an account and database

Go to https://turso.tech/ and create an account.
Install the Turso CLI:

curl -sSfL https://get.tur.so/install.sh | bash

Log in:

turso auth login

Create a new database:

turso db create oloparts

Get your database URL:

turso db show oloparts --url

Copy the URL that looks like libsql://oloparts-<your-name>.turso.io.

Create an auth token:

turso db tokens create oloparts

Copy the token output. Keep it safe.

Run the database migrations

The following tables need to exist before you start the app. Run the migration file to create them:

npm run db:migrate

This creates:

parts — cached part records from Octopart
saved_parts — user-specific saved parts
watchlist — user watchlist with optional target price
price_history — historical price records per part per user
recent_searches — per-user search history for suggestions

If your project does not have a db:migrate script, run the SQL directly using the Turso CLI:

turso db shell oloparts < migrations/001_init.sql

4. Set up Clerk

Go to https://clerk.com/ and create an account.
Create a new application, give it any name.
From the Clerk dashboard, go to API Keys.
Copy the Publishable Key and the Secret Key.
Make sure you configure the following redirect URLs in the Clerk dashboard under Paths:
- Sign-in URL: /login
- Sign-up URL: /signup
- After sign-in: /dashboard
- After sign-up: /dashboard

5. Set up OpenAI

Go to https://platform.openai.com/ and create an account.
Go to API Keys and create a new secret key.
Copy the key.

OpenAI is used for generating vector embeddings from part data (MPN, manufacturer, description, specs). These embeddings power the semantic fuzzy search and similar parts features.

6. Set up Olostep

Go to https://www.olostep.com/ and create an account.
From your Olostep dashboard, go to API Keys and create one.
Copy the API key.

Olostep is used to scrape the site to search and detail pages using a parser-based approach. It returns structured JSON with MPN, manufacturer, price, offers, and specs.

7. Set up Novu

Novu handles the price drop notifications. You need to create an account, set up a workflow, and wire it to a notification channel.

Create an account

Go to https://novu.co/ and create an account.
Create a new organization or use the default one.

Get your keys

From the Novu dashboard, go to Settings → API Keys.
Copy the Secret Key (server-side) and the App ID (client-side, starts with app_).

Create the notification workflow

In the Novu dashboard, go to Workflows and click Create Workflow.
Name it something like price-drop-alert.
Add a trigger step. The trigger identifier will be used in the app code, for example price-drop-alert.
Add a notification step, either Email, In-App, or Push, depending on which channel you want to use.
In the notification template, you can use variables like:

Subject: Price drop alert for {{partName}}

{{partName}} ({{mpn}}) dropped to ${{newPrice}}.
{{#if targetPrice}}Your target was ${{targetPrice}}.{{else}}Any price drop triggers this alert.{{/if}}

Save and enable the workflow.

Connect a channel

For Email: configure an email provider under Settings → Integrations (Novu provides a sandbox email for testing).
For In-App: the in-app notification center is ready to use with the Novu React component already included in the dashboard. [this app uses the in-app channel by default.]
For other channels: add the relevant provider integration from the integrations store.

Create subscribers

Novu uses subscriber IDs to route notifications. OloParts automatically creates or updates a Novu subscriber using the Clerk user ID when a user signs in for the first time. No manual action is required here.

8. Create the `.env` file

Create a .env.local file in the project root:

# Turso
TURSO_DATABASE_URL=libsql://oloparts-<your-name>.turso.io
TURSO_AUTH_TOKEN=your_turso_auth_token_here

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/login
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/signup
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

# OpenAI
OPENAI_API_KEY=sk-...

# Olostep
OLOSTEP_API_KEY=your_olostep_api_key_here

# Novu
NOVU_SECRET_KEY=your_novu_secret_key_here
NEXT_PUBLIC_NOVU_APP_ID=app_...

9. Start the app

npm run dev

Open http://localhost:3000.

How price watching works

Adding to the watchlist

On any part detail view in the dashboard, there is an Add to Watchlist button. When you click it, a small form appears where you can:

Set a target price — enter a specific USD price (e.g. 4.50). You will be notified when the median price drops to or below that amount.
Leave it blank — if you leave the target price empty, OloParts watches for any price drop at all. Even a $1 decrease from the last checked price will trigger a notification.

Cron schedule

The price checking job runs automatically. From the dashboard settings, you can choose the check frequency:

Every 6 hours — checks four times a day, good for volatile or fast-moving components.
Every 24 hours — checks once a day, a lighter option for stable or lower-priority parts.
Manual trigger — if you want to check prices on demand, there is a button in the settings to run the check immediately.

The cron job calls Olostep to fetch the latest price from Octopart for each active watchlist item, compares it against the stored price, and writes a record to price_history.

Notification trigger

If the new price satisfies the condition (below target, or any drop if no target was set), the app calls the Novu API to trigger the price-drop-alert workflow for that user. Novu then routes the notification to whichever channel you configured (email, in-app, etc.).

The notification includes:

Part name and MPN
New price
Your target price if one was set

How to use it

1. Sign up and sign in

Open the app, click Sign Up, and create an account using Clerk. After signing up you land on the dashboard.

2. Search for a component

Type any part number, keyword, or description in the search bar. For example ATmega328, conductor, or 10uF capacitor. Results appear as cards below the search bar.

3. View part details

Click any result card to open the detail view on the right side. It shows price, offers from distributors, specs, and a link to Octopart.

4. Save a part

In the detail view, click Save. The part is added to your saved list and visible on the Saved page.

5. Add to watchlist

In the detail view, click Add to Watchlist. Set a target price if you want, or leave it blank for any-drop alerts. Choose your check frequency from the settings. That is it. Novu will notify you when prices move.

6. Recent searches

Your last searches appear as a dropdown when you click the search bar. Clicking a suggestion re-runs that search instantly.

Features

Octopart search via Olostep parser extraction
Vector embeddings for semantic search and similar part suggestions
Saved parts per user, stored in Turso
Watchlist with optional target price or any-drop mode
Configurable price check cron (6h or 24h) or manual trigger
Price drop notifications via Novu
Recent search history per user with dropdown suggestions
Deduplication by MPN across all result sources
Clerk authentication with server-verified user identity on all write operations

Troubleshooting

Search returns no results Check that OLOSTEP_API_KEY is correct. The live scrape path requires a valid Olostep key. Look at server logs for any Olostep API errors.

Price check notifications are not arriving Verify that the Novu workflow trigger identifier in the app code matches exactly what you named the workflow in the Novu dashboard. Also confirm the Novu channel integration is active and the subscriber ID is being created correctly from the Clerk user ID.

Turso connection errors on startup Make sure TURSO_DATABASE_URL starts with libsql:// and that the auth token has not expired. Regenerate the token from the Turso CLI if needed:

turso db tokens create oloparts

Clerk redirect not working after sign-in Check that the redirect URLs in your Clerk dashboard match exactly the values in .env.local. The sign-in and sign-up URLs must also exist as routes in the Next.js app (/login and /signup).

Embeddings not generating Check that OPENAI_API_KEY is set and the key has access to the text-embedding-3-small model. Embeddings are generated in the background after part records are persisted, so a short delay before semantic search works for new parts is expected.

Docs and references

Turso docs: https://docs.turso.tech/
Turso CLI: https://docs.turso.tech/cli/introduction
Clerk Next.js quickstart: https://clerk.com/docs/quickstarts/nextjs
Clerk environment variables: https://clerk.com/docs/deployments/clerk-environment-variables
Olostep documentation: https://docs.olostep.com/
Novu documentation: https://docs.novu.co/getting-started/introduction
OpenAI embeddings: https://platform.openai.com/docs/guides/embeddings

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
app		app
components		components
lib		lib
public		public
store		store
types		types
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
proxy.ts		proxy.ts
tsconfig.json		tsconfig.json

Uh oh!

Folders and files

Latest commit

History

Repository files navigation