👉 Introduction

DynamiteTrade is an opensource financial project aiming to provide a clean and snappy user interface to view stock information of companies in (soft) real time. The project is written in JavaScript/TypeScript leveraging full stack framework NextJS and deploying on Vercel hosting platform.

Here is the site: https://dynamitetrade.vercel.app/

⚡ Tech Stack

Client

• Typescript
• Tailwind CSS
• Clerk
• Shadcn-UI
• Aceternity-UI
• Chart.JS

Server

• Typescript
• NextJS
• Tanstack Query
• ChatGPT-3,5 Turbo

Database

• Postgresql
• Supabass
• Prisma

Hosting

• Vercel

📌 Features

• ChatGPT-3.5 Bot
• Light/dark mode toggle
• Buy/sell stocks
• Add/remove stocks from watchlist
• View transaction records
• Add/remove customizable cards
• Deposit/withdraw from trading account
• Authentication
• Search stocks
• View stock prices & company history

🔑 Environment Variables

To run this project, you will need to add the following environment variables to your .env file

YAHOO_FINANCE_STOCK_SUMMARY

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY

CLERK_SECRET_KEY

NEXT_PUBLIC_CLERK_SIGN_IN_URL

NEXT_PUBLIC_CLERK_SIGN_UP_URL

NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL

NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL

DATABASE_URL

DIRECT_URL

🔨 Build

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

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

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

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Project Layout

└──./
    ├──app/
    │   ├──(auth)/
    │   │   ├──(routes)/
    │   │   │   ├──sign-in/
    │   │   │   │   └──[[...sign-in]]/
    │   │   │   └──sign-up/
    │   │   │       └──[[...sign-up]]/
    │   ├──(landing-page)/
    │   ├──(root)/
    │   │   ├──(routes)/
    │   │   │   ├──chat/
    │   │   │   │   ├──components/
    │   │   │   ├──dashboard/
    │   │   │   │   ├──components/
    │   │   │   │   │   ├──accordion/
    │   │   │   │   │   ├──account/
    │   │   │   │   │   ├──bank/
    │   │   │   │   │   ├──not-use/
    │   │   │   │   │   ├──table/
    │   │   │   └──market/
    │   │   │       ├──components/
    │   │   │       │   ├──company-profile/
    │   │   │       │   ├──company-table/
    │   │   │       │   ├──products/
    │   │   │       │   └──transaction/
    │   ├──api/
    │   │   ├──account/
    │   │   ├──chat/
    │   │   ├──dashboard-watchlist/
    │   │   ├──market-watchlist/
    │   │   └──portfolio/
    ├──components/
    │   ├──aceternity-ui/
    │   ├──shadcn-ui/
    │   └──ui/
    ├──constants/
    ├──hooks/
    ├──lib/
    ├──prisma/
    ├──providers/
    ├──public/
    │   ├──avatars/
    │   ├──employees/
    │   ├──logos/
    │   ├──products/
    ├──scripts/
    ├──types/
    └──utils/

📗 API Reference

Get account

  GET /api/account

Parameter	Type	Description
N/A	Object	Get user account from the database

Get portfolio

  GET /api/portfolio

Parameter	Type	Description
N/A	Object	Get user portfolio from the database

Update portfolio

  PATCH /api/portfolio

Parameter	Type	Description
N/A	void	Update the value of user's portfolio

Get transaction

  GET /api/transaction

Parameter	Type	Description
N/A	Object[]	Get a list of transactions from the database

Buy stock

  POST /api/transaction/buy

Parameter	Type	Description
N/A	void	Execute the 'buy' function

Sell stock

  POST /api/transaction/sell

Parameter	Type	Description
N/A	void	Execute the 'sell' function

ER Diagram

Architecture

Classes