DEV Community

Cover image for Introducing the Smiley Investment Planner 1.0
JC Smiley
JC Smiley

Posted on

Introducing the Smiley Investment Planner 1.0

I'm excited to introduce the web app "Smiley's Investment Planner". It helps me track stock investments based on the researched prices I plan to buy and sell at. The idea is to reduce the emotional decision-making after researching the stock.

The goal of this app is to track the buy low and sell high strategy to see if it works.

Key Features

  1. Efficient tagging system (flags) for each stock showing where they are on the journey. Those flags include sell now, buy now, wait, dump, and more.

    flags

    Flags indicate suggested actions based on the logic you researched.

  2. The fundamental ability to track stock purchases/sales and allows users to input data like buying or selling prices for internal logic.

  3. The opportunity to designate a stock as a scout investment and be flagged when it reaches the "buy now" price.

  4. A chart comparing potential profit margins from selling all stocks at optimal prices versus the current profit margins at today's prices.

  5. Executive summary section for a brief overview of progress.


How would a user use this product

  1. Research a stock investment using your preferred tools or websites to identify a suitable entry price for buying shares and a target sell price for realizing a profit.
  2. Open the app, go to the purchase investment tab, and fill in all input fields to complete your investment.
  3. Monitor the app daily for stock indicators (call flags) that indicate actions like "Buy Now" or "Sell Now".

Three technical challenges to overcome

  1. Utilizing React context and reducers to manage the global state and share data across components and server actions.
  2. Creating CRUD API requests to MongoDB Atlas to save and retrieve data.
  3. Learning how to visualize data with ChartJS.

Future updates

  • Component testing with Jest and End to End testing with Cypress
  • Additional charts summarizing the effectiveness of the strategy

The app was built with:

  1. Next.js is a frontend JavaScript framework, based on React but with server components/actions, used for displaying the user interface.
  2. TailwindCSS is a CSS library utilized to quickly style the application.
  3. Netlify is the hosting platform employed for hosting the application.
  4. Intelligence Financial Modeling Prep provided stock prices via an API. https://intelligence.financialmodelingprep.com/
  5. MongoDB is an open-source NoSQL database management system (DBMS) that uses documents instead of tables and rows to store and process data. With this project, data is stored virtually using MongoDB Atlas and Mongoose ORM.
  6. Chartjs is an open-source library that helps you easily visualize data using JavaScript.

GitHub Repository
Smiley Investment Planner website link

Top comments (0)