Investie

Investie is a trading application that allows users to explore and choose stocks from a huge list of stocks. Users can buy any stock from the list according to its tradable status. Upon buying any stock, Investie will inform the buyer by SMS.

Note: The stocks in this application are virtual stocks and used for learning purpose.

Moreover, using Investie developers can track their purchased orders. It provides a graphical as well as list representation of the purchased stocks. So, it benefits the user to track orders on monthly bases.

Investie also allows users to have a look at their account details to check their account balance and other details.

This platform is made using DhiWise and the open APIs of Lemon.markets, and Twilio.

Table of Contents

• Features in Investie
• Setup
• Version of Technologies
• Folder Structure
• Dependencies in project
• License
• Community

Features provided in Investie

Using Investie, users can check the stocks on the Dashboard. At the same time if the user wants to buy any stock then he can buy it by clicking on the Buy button.

In the buy menu, users can buy stock of any quantity.

From the Account Details, the user can check all account-related details.

On the Order Details page, the user can check the details of all the stocks he has bought. On this page, there is a chart of monthly order details so it would be easy for the user to track his quantity of orders on the monthly basis. There is also a list of orders below the chart view.

Setup

Setup your project by running the following commands.

npm install

To run the application in the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Clone Project

To clone a project firstly choose the directory to clone the project. Then open the terminal at the location and run the below commands.

git clone https://github.com/DhiWise/Investie.git

Tokens required to run the project

To run this project, the user needs Lemon.markets and the Twilio API key.

Lemon.markets

For API key of Lemon.markets Sign in on Lemon.markets. After creating the account you can find your API key on the Dashboard.

Copy that key and paste it into the api.js and index.js file. Replace the API key with the "Enter your Lemon.markets API key here" text.

For Api.js file Goto src folder -> goto service folder -> Api.js

.
├── src
│   ├── services
│   │   └── api.js ------ API functions
│   │   └── index.js ------ API functions

Twilio

For Twilio API key sign in on Twilio. After Signing in you can find the Auth token and Account SID from the Account Info section on Dashboard.

Then for the authentication token follow the instructions in Twilio documentation.

Replace that Token with the "Enter your Twilio token here" text in the api.js file.

For Api.js file Goto src folder -> goto service folder -> Api.js

.
├── src
│   ├── services
│   │   └── api.js ------ All API functions

Running the storybook

We have detected common components and have generated possible variants of it. To check the documentation of generated common components by integrating storybook, Please follow below steps.

Install and Initializes

 npx storybook init

Run the Storybook

  npm run storybook

Version of Technologies

• git - v2.13 or greater
• NodeJS - 12 || 14
• npm - v6 or greater

Folder Structure

After creation, your project should look like this:

.
├── package.json
├── package-lock.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.js
│   ├── assets
│   │   ├── fonts ---------- Project fonts
│   │   └── images --------- All Project Images
│   ├── components --------- UI and Detected Common Components
│   ├── constants ---------- Project constants, eg: string consts
│   ├── hooks -------------- Helpful Hooks
│   ├── index.js
│   ├── pages -------------- All route pages
│   ├── Routes.js ---------- Routing
│   ├── styles
│   │   ├── index.css ------ Other Global Styles
│   │   └── tailwind.css --- Default Tailwind modules
│   └── util
│       └── index.js ------- Helpful utils
└── tailwind.config.js ----- Entire theme config, colors, fonts, etc.

For the project to build, these files must exist with exact filenames:

• public/index.html is the page template;
• src/index.js is the JavaScript entry point.

Dependencies in the project

Below are all the dependencies that were used in the project.

1. @tailwindcss/forms - 0.4.0
2. @testing-library/jest-dom - ^5.15.1
3. @testing-library/react - ^11.2.7
4. @testing-library/user-event - ^12.8.3
5. Axios - ^0.27.2
6. lodash - ^4.17.21
7. moment - ^2.29.4
8. prop-types - ^15.8.1
9. react - 17.0.2
10. react-datepicker - ^4.5.0
11. react-dom - 17.0.2
12. react-modal - ^3.14.4
13. react-router-dom - 6.0.2
14. react-router-hash-link - ^2.4.3
15. react-scripts - 5.0.0
16. react-select - ^5.2.1
17. react-toastify - ^9.0.1
18. recharts - ^2.1.9
19. simple-react-hook-form - ^1.0.4
20. web-vitals - ^2.1.0

License

MIT License

Copyright (c) 2022 DhiWise

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Community