Smarter Choices, Brighter Futures, By OptiVest.
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.
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.
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
Give examples
Start with the gears hot by jumping in your terminal and:
Cloning the Repo: Clone this repo by doing
git clone https://github.com/Blue-Davinci/OptiVest-Frontend.git
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
Install Node.Js: Haven't installed node.js
? What are you waiting for, go ahead and download it from their official website
Install Svelte: Now get your nose deep by downloading svelte like below:
npm create svelte@latest
Install the project's dependancies: Proceed and install the project's dependancies by running:
npm install
Launch the OptiVest Backend: Start and launch the backend server by following the instructions here
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
We use cloudinary
, 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:
CLOUDINARY_API_KEY=<cloudinary api key xxxxxx>
CLOUDINARY_API_SECRET=<cloudinary api secret yyyyy>
generator.js
in lib\utilities\encryption.js
javascript debugger terminal
by first navigating to the directory:cd src/lib/utilities
node encryption.js
.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)npm run dev
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).
End with an example of getting some data out of the system or using it for a little demo.
The basics of the app includes:
http://localhost:5173
and contains the landing page
You will find:
- About
- Contact Us
- Features.env.development
and .env.production
files. The prod strings involve connections to & from the docker container.(Will Be Added Soon)
See also the list of contributors who participated in this project.
š„ See also the list of contributors who participated in this project.
š©āØ Hat tip to: