Site icon Efficient Coder

Build a Free AI Stock Dashboard in 30 Minutes: Next.js 15 & Open Source

高效码农

 

From Wall Street to Browser Tab: Build a Free, AI-Powered Stock Dashboard with Next.js 15 in 30 Minutes

“If knowledge is doomed to live behind paywalls, let’s tear the wall down with open source.”
— Open Dev Society

01｜A Tale of 2 A.M. Anxiety

It’s 2 A.M. Leo, a front-end engineer, is doom-scrolling his phone.
The bonus he just threw into U.S. tech stocks is now a lush shade of red.
“I just need a single page where I can see my tickers, live prices and an AI-written briefing—without paying $99 a month.”

Leo isn’t a hedge-fund quant.
He does know open source and Next.js.
Thirty minutes later he had cloned OpenStock, spun up MongoDB in Docker, let AI write his welcome email and auto-deployed to Vercel.
The next morning he dropped the link in Slack. Fifty-two stars before lunch.

Below is the exact, copy-pasteable recipe—no finance PhD, no credit card, no server required.

02｜Architecture at a Glance


Dark mode by default—because markets never sleep.

  1. Browser → Next.js 15 (App Router)
  2. Server Actions → Finnhub / TradingView widgets
  3. User events → Inngest event stream → Gemini → Nodemailer
  4. 93.4 % TypeScript coverage—any is considered a bug.

03｜30-Minute Local Quick-Start

Step Command & Note Time
① Clone git clone https://github.com/Open-Dev-Society/OpenStock.git && cd OpenStock 30 s
② Install pnpm i (npm works) 60 s
③ DB docker run -d -p 27017:27017 --name mongo mongo:7 45 s
④ Env cp .env.example .env → fill table below 90 s
⑤ Dev pnpm dev + npx inngest-cli@latest dev (second terminal) 30 s

Minimal .env keys:

MONGODB_URI=mongodb://localhost:27017/openstock
BETTER_AUTH_SECRET=<random-32-chars>
FINNHUB_API_KEY=<grab-free-at-finnhub-io>
GEMINI_API_KEY=<Google-AI-studio-1-click>

Open http://localhost:3000—if you see candlesticks, you now own a private Bloomberg terminal.

04｜Let AI Write Your “Investment Motto” Email

Inngest function (lib/inngest/functions.ts), only 12 lines:

export const sendWelcomeEmail = inngest.createFunction(
  { id: 'ai-welcome' },
  { event: 'app/user.created' },
  async ({ event, step }) => {
    const { email, name, risk } = event.data;
    const prompt = `In 50 characters inspire ${name}, a ${risk} investor, about U.S. stocks today`;
    const copy = await step.ai.infer('gemini', prompt); // auto-retries
    await step.run('nodemailer', () =>
      transporter.sendMail({
        from: NODEMAILER_EMAIL,
        to: email,
        subject: 'Welcome to OpenStock',
        html: `<h1>${copy}</h1>`,
      })
    );
  }
);
  • ☾ Token cost: 1 k users × 30 words ≈ $0.18 / month
  • ☾ Retry policy: exponential back-off, 5th failure pushes to your Discord webhook.

05｜How to Deploy Free on Vercel (Production-Ready)

  1. Push repo to GitHub (private or public).
  2. Vercel Dashboard → Add New → Import Git.
  3. Paste exact env variables from .env.
  4. Build command: pnpm build
  5. Deploy → <45 s HTTPS domain ready.
  6. Add Cron 0 12 * * * pointing to /api/inngest for daily AI news digests.

Free tier: 100 GB·h—handles ~1 k DAU with room to spare.

06｜SEO & GEO Optimisation Highlights

  • ☾ Target keywords naturally woven: “open source stock dashboard”, “free Next.js finance app”, “AI personalised investment email”.
  • ☾ Semantic variants: ticker tracker, real-time watchlist, dark-mode trading UI.
  • ☾ Structured data: Article + FAQPage schemas embedded (see JSON-LD at footer).
  • ☾ Geo-agnostic: Finnhub covers 60 k global symbols; i18n-ready routes (/stocks/7203.T for Toyota).

07｜FAQ (What Google’s “People also ask” wants)

Q1: How delayed is Finnhub’s free tier?
A: U.S. equities 15 min, crypto real-time. Upgrade for tick-by-tick.

Q2: Can I swap Gmail for corporate SMTP?
A: Replace createTransport config in lib/nodemailer/transporter.ts—SendGrid, Mailgun, Postmark all tested.

Q3: Replace Gemini with local Llama-3?
A: Point step.ai.infer to http://localhost:11434/api/generate (Ollama). Zero business-logic changes.

Q4: WebSocket real-time order book?
A: Roadmap issue #42, planned Q4 2025 via Next.js 15 SSR streaming. PRs welcome.

08｜Extending the Blueprint

Idea Files to touch Starter snippet
Add Forex lib/actions/finnhub.ts /fx/rates endpoint
Switch to Yahoo Finance lib/actions/market.ts fetch(\https://query1.finance.yahoo.com/v8/finance/chart/${sym}`)`
Sentiment RSS lib/inngest/cron.ts Plug in rss-parser, score with @tensorflow-models/toxicity

09｜Key Takeaways for Developers & Content Creators

  1. Event-driven > CRON: Inngest turns “send email” into a reliable, observable workflow—no self-managed queues.
  2. AI cost is now a rounding error—sub-cent per user per month.
  3. TypeScript + Server Actions = end-to-end type safety from DB to JSX.
  4. Open source != hobby tier: same stack scales to 1 k daily active users on free plans.

10｜Your Next 3 Clicks

  1. Star the repo so the community keeps demolishing paywalls.
  2. Tweet a screenshot of your AI-written welcome email—tag @OpenDevSociety, we’ll buy you a virtual coffee.
  3. Open an issue: algo-trading? crypto? ESG scores? The roadmap is 100 % public.

Markets reward speed; open source rewards curiosity.
Fork it tonight, trade tomorrow, share forever.

Exit mobile version