Success Tracker is an application for investors. The web application is presented on a single page website which includes a home section, application section, about section and a contact/faq section.
The web application (Success Tracker) was built to display information about stocks in a clear and easy way. Investors who want instant information regarding the stock of their choice are able to not only get the data presented, but also get it visualized. The main effort was put on making the application user firendly. Too many similar applications are complex and are difficult to use and understand the first times. Success Tracker povides the user to find the information they need with one click. The website it self is aimed to deliver a good user experience and also taking a stab at proving that gradiant coloring is coming back.
The goal for this application:
- Fetch stock data from an external API (quandl API)
- Present relevant stock information for the user in an intuitive way
- Create an interactive application where user face different data depending on user input
The users goals are:
- Easily analyse their favourite stocks
- Get the wanted information fast
- English speaking
- Investors who have a basic understanding about the stock market
- Investors who want a simpel-to-use application
- An application which can provide them with instant stock data
- User friendly analytic tool
- It is intuitive and easy to navigate
- It is clean, without unnecessary features or information
- The application (Success Tracker) have limited user options, which makes it intuitive
- If questions occur, the FAQ section answer the most common questions
- If questions occur, it is easy to get in contact with the developer/team
- As a new visitor to the website, I want instant information of what the application/website can provide
- As a new visitor to the website, I want it to be easy to navigate through the different sections
- As a new visitor to the website, I want the application to be intuitive and easy to use
- As a returning visitor to the website, I want updated stock information when using the application
- As an investor, I want relevant stock information
- As an investor, I want to discover potenital stocks to invest in, thus, change between companies in a easy way
To view the initial wireframes for the application/website, click here
The wireframes display all the sections on the website, for both desktop and mobile view. The sections are:
- Home section
- Application section
- About section
- Contact section
- Navigation bar - When clicked on one of the options, the user is directed to the selected section
- Hamburger menu - When clicked, a dropdown display the navigation bar content and the process is the same as above
- Search field for companies/stocks - List displaying companies/stocks that filters depending on the users input
- Graph - Graph that displays the fetched stock prices and dates from the api. Based on user input. Users can hover mouse over grapph to get information about the specific date/price.
- Stock information - Beneath the graph, stock information is presented, which is fetched from api and based on user input.
- FAQ boxes - Drop down functionality for FAQ boxes.
- A error message for the user if they search for a company which does not exist in the api.
- Updated the list which matches the search field and the api.
- For the application to be more comprehensive, a larger api will be used. This is needed to be able to display P/E-value, Market Cap, compare to industries and indexes etc. Also, if real time prices is wanted a better API is needed.
- Login page for users to save their history.
- Forum for users to discuss shares.
- Notification functionality so that users can trach their stocks without actually using the application. (email sent when stock hit a price etc.)
- The website was built using HTML5 and CSS3.
- JavaScript was used to build an interactive webpage and to connect to an API.
- jQuery was use to make DOM manipulation easier.
- To make the structure and the site responsive in a simple manner Bootstrap were used.
- An API from Quandl was used to fetch stock data.
- To create a JSON-file, matching company names and tickers, data from nasdaqdata were used.
- To display the stock data in a timeline (graph) format, ChartJS were used.
- The website as built and developed using GitPod as IDE.
- Icons was collected using FontAwesome.
- The fonts used on the website was collected through Google Fonts.
- The logotype was created using LogoMakr.
- To design the "section breakers" on the page vectr were used.
- W3C's HTLM Validator were used to validate the websites HTML code.
- W3C's CSS Validator were used to validate the websites CSS code.
- JSHint were used to validate the websites JavaScript code.
There are two current issues with the applications that are well known and will be focused on in the near future. These two are:
-
Companies/stocks that shows as an example but do not exist in the API - This is because the API itself did not provide any company names (only 3 000+ tickers). To display the company names for the user, a separate list needed to be created. The problem is that the API have no information regarding what lists/indexes the tickers can be found, thus the developer decided to take the 4 000 biggest companies/listed stocks in the US and create a JSON file from this. Therefore, the user can find companies/stocks that cannot be displayed since it cannot be found in the APi. The JSON-file will be updated moving forward.
-
The user is not notified about above problem and only sees the loading gif - As of today, there is no error message displaying when the user send a request for a company that do not exist in the api. This will be the main focus to develop in the next stage.
For a in depth walkthrough of the testing done on the website see Testing.md
As mentioned, GitPod was used as IDE when developing this application. Throug out the development, the project was commited to the git and continuously pushed to GitHub. The following steps were taken to deploy the application:
- Log into my GitHub user.
- Chosing the repository "Milestone2"
- When entering the repository, clicking "Settings" which is found on the top right.
- When entering "Settings", scroll down to Github pages section and change "Source" to "Master Branch".
- Reload the page and scroll down to the same section - click the link and... Voila! The page is deployed.
- My girlfriend, Marie-Sofie Persson, gave input on the page layout and design.
- All images used in the webpage was collected from Pixabay and especially from the artist Manuchi
- Icons was collected using FontAwesome.
- The logotype was created using LogoMakr.
- To design the "section breakers" on the page vectr were used.
- To display the stock data in a timeline (graph) format, ChartJS were used.
- Inspiration for the filtering process and search functionality in the application was gathered from Traversy_Media on Youtube.
- A big thank you to my tutors at Code Institute for helping me along the way.
- Also a big thank you to my mentor Brian Macharia for all great feedback and for taking the time to help me(even during a friday night).