"World's 100 Billionaires "
"World's 100 Billionaires" begins with an about page that displays a description of the website and what the next pages will be about. On the top of the page, it contains links to "About" and "Billionaires List" pages. If users visit or click "Billionaires List" page, they will see a list of 100 world's billionaires' with their pictures, names, net worth, rank, and main sources of wealth in a descending order of rank (by their net worth).
When users click on one of the billionaires on the list, they are directed to that individual person view page that displays additional information; the page includes current residence(city, state), number of shares owned, share price, and some interesting facts.
.
- Have a navigation bar with two links
- Have 3 separate pages (About, Billionaires List, and Individual Person View)
- On about page, write a description of the website and make sure to have a button that directs to the list page when clicked.
- Render a list of world's billionaires on list page with pictures, rank, net worth, name, and main source of wealth.
- When one of the billionaires is clicked, the user will be directed to the individual person view page with additional information.
- Responsive design for Samsung Galaxy and iPad.
- Advanced CSS
- Ask UI/UX Designers for advice and insight.
- Add a search bar/button that allows users to type in billionaire's name and render only the information that the user typed in the search bar instead of rednering a list of 100 Billionaires.
|__ components/
|__ App.js
|__ Title.js
|__ About.js
|__ AboutNav.js
|__ ListNav.js
|__ Footer.js
|__ List.js
|__ Detail.js
| Day | Deliverable | Status |
|---|---|---|
| June 29 | Project Plan(Wireframes / Time Frames/ Approval) + Navigation Bar(Nav.js) + ClickButton.js + Footer.js | Complete |
| June 30 | About Page + Billionaires List Page | Complete |
| July 1 | Individual Person Page + CSS + Reponsive Design | Complete |
| June 2 | More CSS + Reponsive Design | Complete |
| June 3 | MVP | Complete |
| June 7 | Present | Incomplete |
| Component | Priority | Estimated Time | Time Invested | Actual Time |
|---|---|---|---|---|
| Navigation Bar(Nav.js) | H | 1.5hrs | 6hrs | hrs |
| ClickButton.js | H | 1hrs | 3hrs | hrs |
| Footer.js | H | 1.5hrs | 3hrs | hrs |
| About page | H | 3.5hrs | 4hrs | hrs |
| Billionaires List Page | H | 4hrs | 10hrs | hrs |
| Individual Person Page | H | 4hrs | 9hrs | hrs |
| CSS | H | 5hrs | 8hrs | hrs |
| Reponsive Design | H | 6hrs | 10hrs | hrs |
| More CSS | M | 5hrs | 3hrs | hrs |
| Total | H | hrs | hrs | hrs |
Strength: Organizing the components.
Weaknesses: I'm not familiar with doing the responsive design. Still need to understand props better.
Opportunities: This project will allow me to grow my skill at responsive design than before. After the project, my understandstanding in React will increase.
Threats: I'm worried that responsive design will take me a long time because I'm not familiar with it.
Use this section to include a brief code snippet of functionality that you are proud of and a brief description.
Use this section to document what changes were made and the reasoning behind those changes.