Welcome To FIRE 🔥, the website designed specially for beginners to jump start their Financial Independence, Retire Early journey.
User Stories ☺️
This website hopes to achieve the following:
1. Educate beginners on the fundamentals of stock market investing so as to help more people attain FIRE.
2. Ignite passion in people of all ages to start their own journey to financial freedom and reduce financial illiteracy.
3. Turn a boring subject into an interactive and fun one so that users will not give up on investing!
4. Build a community of passionate FIRING and FIRED individuals to assist others on the road to FIRE so that
everyone can move forward and learn from one another.
As the user of the website, I hope to:
1. Learn more about stock investing and money management so as to gain financial independence.
2. Try to learn jargons and ins and outs of investing without feeling overwhelmed so that I can finally have the
confidence to start my investing journey.
3. Join like minded individuals in a forum so as to have a sense of belonging and learn more from experienced individuals
so that I can have guidance on how to manage my own money.
4. Find out more details on a stock so as to know if the investment strategy is right for me.
UX Design 🎯
Information architecture
1. The index page provides the user with 3 distinct choices. Every choice has an interesting writeup to let the
user make an informed decision and a bright orange button to navigate to the respective pages. The index page is
also the only page with a video as its background because I did not wish to compromise on readability on the other
text heavy pages.
2. The navigation links allows the user to browse through each choice easily. The navigation links are also
available on every page.
3. The About page has 5 very distinct orange same-page navigation buttons for users to navigate easily to their
desired article. Each article section is also separated with distinctive boxes enveloping them.
In the 2 main approaches article, there are 2 buttons designated for user to have ease of access to saver and grower page.
4. The search bar and button on the grower and saver pages are big and obvious for users to extract the infomation they desire.
5. The undecided page offers the user a direct and to the point survey to pin point the type of investment they are most
suited for.
6. The contact us page comprises of a big glaring Reddit icon and turns orange when hovered over. This is to show users clearly that
the button is an external link to the community page.
Mobile responsiveness
1. Website is fully mobile responsive on all screen sizes.
2. Navbar shrinks to a hamburger and creates a whole page length dropdown. This so so that the background text would not be in the way
of the navigation.
Features 📑
Existing Features
1. Navigation Bar:
- Fully linked to all pages from all pages.
- User is able to navigate the website without the use of browser back button.
- Able to go back to the index page by clicking on the FIRE logo.
2. Footer:
- Social media icons changes color on hover.
- Social media icons links to respective external sites.
3. Buttons:
- Buttons turns white on hover.
- Buttons links to their respective locations.
4. Saver and Grower page search bars:
- Displays stocks information in an accordian.
- All information including line chart is real time.
- If their stock ticker symbol cannot be found, an alert pops out notifying the user.
- The FIRE rating is color coded E.G Firey HOT! rating will render the text red while
Icy Cold will render the text sky blue. This is responsive to the results that is
queried from the database in realtime.
5. Undecided page:
- Every selection has a corresponding unique outcome.
- Buttons that spawns from the results are linked to their respective pages.
- If any field is unselected, an alert pops out notifying the user.
Features left to implement
1. Saver and Grower pages:
- A button that allows the user to compares 2 stocks.
- A list of checkboxes that allows the user to filter their search results by industry.
2. About page:
- Built in video player that plays the explaination of the respective jargons.
Technologies Used 💻
HTML:
- Link: https://html.com/
- Used as the backbone of the website that users see.
CSS:
- Link: https://www.w3.org/Style/CSS/Overview.en.html
- Used to style the website that users see.
JAVASCRIPT:
- Link: https://www.javascript.com/
- Used to write logic statements and simplify DOM manipulation.
BootStrap4:
- Link: https://getbootstrap.com/
- Used to create a mobile responsive site.
- Used grid system to make the website look tidy.
FontAwesome4:
- Link: https://fontawesome.com/v4.7.0/
- Used to add in social media icons.
JQuery:
- Link: https://jquery.com/
- Used to query elements from HTML.
ChartJS:
- Link: https://www.chartjs.org/
- Used to create stock chart.
Axios:
- Link: https://github.com/axios/axios
- Used to get response from API links.
Alpha Vantage API:
- Link: https://www.alphavantage.co/
- Used to get stock quotes and stock data.
Testing 💯
All testing were made manually, no automated testing was implemented.
In depth testing file: https://github.com/liuzhenxin2/project-FIRE/blob/master/FIRE%20testing.pdf
Deployment 🚀
Steps I took to deploy my project
1. Login to GitHub.
2. Click on my repository.
3. Select project-FIRE.
4. Locate settings tab in the grey background section under the navbar. Settings icon looks like a gear.
5. Click on settings.
6. You will be transported to the settings page.
7. Scroll down to the second last section and locate GitHub Pages.
8. The first line should read "Source". Click the button below it named branch and select master.
9. You are now on the master branch and your website is ready to be published.
10. It should be published in a few minutes.
10. Done! My website is now online! Website live server link: https://liuzhenxin2.github.io/project-FIRE/
Credits ❤️
Acknowledgement
This project would not have been made possible without StackOverFlow forums, w3schools and Bootstrap documentation.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent