Optivest Frontend

optivest-frontend

Smarter Choices, Brighter Futures, By OptiVest.

📝 Table of Contents

• About
• Getting Started
• Deployment
• Usage
• Built Using
• TODO
• Contributing
• Authors
• Acknowledgments

🧐 About

The OptiVest Frontend is a comprehensive, user-centered interface for financial management, providing users with real-time insights, recommendations, and portfolio tracking in an intuitive dashboard. Built with SvelteKit and Tailwind CSS, the frontend offers seamless navigation, dynamic data visualizations, and responsive layouts for both desktop and mobile experiences. Core features include budget and expense tracking, goal-setting tools, and sector-diversified investment analysis.

Through a robust integration with external financial APIs and Golang\Python backend services, the frontend is designed to support efficient and personalized financial decision-making. Its user-friendly approach empowers individuals to monitor and optimize their financial health effectively.

🏁 Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

Prior to running the OptiVest project, you need to make sure that you have the following installed in your system:

• Node.js: This project is built with Svelte, which requires Node.js to run. You can download Node.js from the official website.

• Visual Studio Code: This is the recommended code editor for this project. You can download it from the official website.

• Svelte v5: This project is built with Svelte. You can install it globally on your system by running npm install -g svelte.

• Golang and The OptiVest Back-end: This can be found here

Installing

Start with the gears hot by jumping in your terminal and:

1. Cloning the Repo: Clone this repo by doing

   git clone https://github.com/Blue-Davinci/OptiVest-Frontend.git
   

2. Navigate to the Project Directory: Done? Easy right? Go ahead and navigate to the directory by doing: Say what the step will be

cd optivest-frontend

3. Install Node.Js: Haven't installed node.js? What are you waiting for, go ahead and download it from their official website

4. Install Svelte: Now get your nose deep by downloading svelte like below:

   npm create svelte@latest 
   

5. Install the project's dependancies: Proceed and install the project's dependancies by running:

   npm install
   

6. Launch the OptiVest Backend: Start and launch the backend server by following the instructions here

7. Make sure you have the following 2 files in the root folder i.e Aggregate-Frontend\ as they hold all the links used to interact with the API:

   .env.development
   .env.production
   

8. We use imagekit, found documented here, for hosting the User avatars. So create a file called .env on the root (where the above env.dev... are) and add your key + secret as Shown below:

IMAGEKIT_PUBLIC_KEY=xxxxxx
IMAGEKIT_PRIVATE_KEY=yyyyyy
IMAGEKIT_URL_ENDPOINT=https://zzz...

• You also need to add an encryption key and IV in the above file which will be used in encrypting the user api_keys. You can generate both the IV and Encryption key via the generator.js in lib\utilities\encryption.js
• For a quick generation you can use the javascript debugger terminal by first navigating to the directory:

cd src/lib/utilities

• Then execute the file by running:

node encryption.js

• You will find a .env file in the same directory. You can open and copy the data to the root .env, which should have your cloudinary secrets, or change it with the Admin dashboard (in the pipeline)

8. After a succesful setup+startup of the OptiVest backend API - above- proceed and start the development server by running:

   npm run dev
   

   Using Reverse Proxies

   This section is for the cases where you want to run the build and start when built and under a reverse proxy. We will use cloudflarered as an example.

9. Make sure to download and install cloudflarered from here

10. After a full installation, proceed and start the cloudflare free tunnel using th efollowing:

    cloudflared tunnel --url http://localhost:3000/ 
    

• Please remember to replace the exposed url+port with your own for the prod deployment.
• A free tunnel link will be provided, copy this.

3. Proceed to set the ORIGIN via env variables. If on windows you can do this via powershell

   $env:ORIGIN = "copied-tunnel-link"
   

• The above also prevents cross post errors when performing post request on the prod

4. Proceed to run the build:

   node build
   

• And that's it, you can proceed and access the app via your cloudflared tunnel.

The Optivests's Frontend should now be running on your local machine. You can access it by opening your web browser and navigating to http://localhost:5173 (or the port number displayed in your terminal).

• After signing up and logging in, you should see something like this:

End with an example of getting some data out of the system or using it for a little demo.

🎈 Usage

The basics of the app includes:

1. Homepage: This is the first page for users http://localhost:5173 and contains the landing page You will find: - About - Contact Us - Features
2. User Dashboard: This is the gist of everything and contains all you'll need to administer your finances includeing:

• User management with:
  • Login capability
  • Account recovery
  • Signup & Register
  • Startup Wizard (in progress)
  • User settings and profile changes (in progress)
• User Dashboard with:
  • Personal Finance manager with:
    • Budget Manager
    • Goal Manager
  • Personal Finance Tracker with:
    • Expense Tracker
    • Income Tracker
    • Debt Tracker
  • Group Manager (in progress) with:
    • Create your group
    • Manage your group including setting it as private or public
    • Invite users, if private, and set goals, manage expenses together
  • Investment Portfolio with:
    • In depth analysis of uour potfolio
    • Add stocks, bonds and alternative investmnets
    • Manage these investments via setting indicators and reminders
    • Ask for indepth analysis including risks and different information
    • Portfolio rebalancing
  • Personal Finance Portfolio
    • In depth analysis of your personal finances
    • Ask for in-depth analysis of your portfolio
  • Feeds And Edication
    • A ffeds section that allows you to peruse and gain actionable data & info on invetsments you own or follow.
    • Like, un-like, save and share feeds to your friends and family.
    • Gain educational materials from different finance educators.
  • Payment Capability (in progress)
  • Notification manager which include: (in progress)
    • Management of your notifications and remonders
    • Custom pings on different stock changes.

A note:

• The application uses different API connection strings based on the environment (development or production).
• The settings can be found in the .env.development and .env.production files. The prod strings involve connections to & from the docker container.

🚀 Deployment

(Will Be Added Soon)

⛏️ Built Using

• Node.js - Server Environment
• Tailwind CSS - CSS Framework
• Svelte-SuperForms - For form management
• Layer-Chart - For customizeable and engaging Charts
• Svelte - Innovative Framework for building user interfaces
• SvelteKit - Framework for building web applications with Svelte
• Paystack - Give your customers the gift of modern, frictionless, painless payments. Integrate Paystack once and let your customers pay you however they want.
• ImageKit - Allows you to deliver optimized images across web and mobile with minimal effort.
• Zod - TypeScript-first schema validation with static type inference
• Shad-CN Svelte - Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
• RoboHash - Robohash is a easy web service that makes it easy to provide unique, robot/alien/monster/whatever images for any text.
• Lucid-Svelte - Beautiful & consistent icons Simple Open Source icons carefully crafted for designers & developers. Made by the community.
• Other items not mentioned.

✍️ Authors

• @Blue-Davinci - Idea & Initial work

See also the list of contributors who participated in this project.

🎉 Acknowledgements

👥 See also the list of contributors who participated in this project.

🎩✨ Hat tip to:

• Official Svelte
• HuntaByte
• CiscoHeat
• SeanLynch
• Any and all people whose libraries\codes were used.