SSA Framework using Vite as the build tool. Quick and efficient.
Python based backend framework for robust APIs. Authentication, ORM, database management.
Utility based CSS framework for rapid UI development.
Relational database for structured data storage for CRUD ops.
Being into finance and investing, I wanted to create a platform that tracks major ETFs and individual stocks in the S&P 500. This platform would also use a Natural Language Processing (NLP) model to analyze related news articles and provide sentiment analysis.
1
2const chartConfig = {
3 VTI: { label: "VTI", color: "hsl(var(--chart-1))" },
4 IVV: { label: "IVV", color: "hsl(var(--chart-2))" },
5 QQQ: { label: "QQQ", color: "hsl(var(--chart-3))" },
6 SPY: { label: "SPY", color: "hsl(var(--chart-4))" },
7 VOO: { label: "VOO", color: "hsl(var(--chart-5))" },
8};
9
10 const getColor = (etfSymbol) => {
11 const colors = {
12 VTI: "var(--color-chart-1)",
13 IVV: "var(--color-chart-2)",
14 QQQ: "var(--color-chart-3)",
15 SPY: "var(--color-chart-4)",
16 VOO: "var(--color-chart-5)",
17 };
18 return colors[etfSymbol] || colors.VTI;
19 };
20
21 return (
22 <Card className="w-full">
23 <CardHeader className="pb-2">
24 <CardTitle className="text-lg">{etf}</CardTitle>
25 </CardHeader>
26 <CardContent className="h-48 p-0 pb-4">
27 <ChartContainer config={chartConfig} className="h-full w-full">
28 <LineChart
29 data={data}
30 margin={{ left: 0, right: 0, top: 5, bottom: 0 }}
31 width={400}
32 height={192}>
33 <CartesianGrid
34 vertical={false}
35 strokeDasharray="3 3"
36 strokeOpacity={0.2}
37 />
38 <XAxis
39 dataKey="date"
40 tickLine={false}
41 axisLine={false}
42 tickMargin={8}
43 tickFormatter={(value) => value?.slice(2) || ""}
44 fontSize={11}
45 tickCount={4}
46 />
47 <ChartTooltip
48 cursor={false}
49 content={
50 <ChartTooltipContent
51 hideLabel
52 formatter={(value) => [
53 `${parseFloat(value).toFixed(2)}`,
54 "Price",
55 ]}
56 />
57 }
58 />
59 <Line
60 dataKey="price"
61 type="linear"
62 stroke={getColor(etf)}
63 strokeWidth={2.5}
64 dot={{ r: 0 }}
65 activeDot={{ r: 5, strokeWidth: 0 }}
66 connectNulls
67 isAnimationActive={false}
68 />
69 </LineChart>
70 </ChartContainer>
71 </CardContent>
72 </Card>
73 );
74}