Challenge Overview
Read Our Blog: https://www.topcoder.com/blog/topcoder-skill-builder-spree/
The challenge prizes are:
- Tshirt for everyone: every successful submitter on any Skill Builder Competition gets a Topcoder t-shirt. Note: if you have previously competed in the Topcoder Skill Builder Competition : Angular (https://www.topcoder.com/challenges/41236c11-a15b-428b-a9da-019cd4aad5d8), in order to win a t-shirt, you should improve your score and you should get a score over 75% of total score, meaning to get over 1312.5 of 1750 points.
- First Time Submitter: 50 First time submitters on any of the Skill Builder Competition get $50 as a bonus
- Gig Workers Bonus: Gig Worker who have never competed in a Topcoder Challenge, get $50 as a bonus above the mentioned prizes
- AlefEdge Skill Builder Bonus: If you successfully submit in any Topcoder Skill Builder Competition plus participate succesfully in the AlefEdge Skill BuilderBuilder Competition, the first 50 members will earn an additional $100 bonus.
- Multiple Skill Builder Submissions: The more you participate, the more you earn. There are 9 Skill Builder Competitions and we’ll double your September bonus prizes if you successfully submit to all of them.
This is the ADVANCE Level Competition
After coming home from the last expedition, the treasure hunter’s collection became so large that he had a hard time placing it inside his house. Now we need to help the hunters to create a dashboard page that will display his top treasures. Then we need to move other treasures to a separate page that allows him to check the treasure details.
In this challenge, you need to continue updating the app by following the requirements below. You'll move around the components, add top features, add services, messages, and details pages using the navigation with routing.
Solving this problem you learn:
- Create smaller components for reusable elements in the development
- Create angular application services
- Create services messages
- Create navigation with routing
- Implement more bootstrap components to the app.
IMPORTANT:
- For this challenge, scoring will use manual review NOT the automated testers like previous levels
- We recommend you complete all previous levels before you can submit to this challenge. Check the Challenge Links below:
- Easy | Challenge Link: http://www.topcoder.com/challenges/30157801
- Medium | Challenge Link: http://www.topcoder.com/challenges/30157808
- Hard | Challenge Link: http://www.topcoder.com/challenges/30157819
- Hints: These Learning Material links will help you create a submission for this challenge:
- Create a Feature Component: https://angular.io/tutorial/toh-pt3
- Add a Services: https://angular.io/tutorial/toh-pt4
- Add a Navigation:https://angular.io/tutorial/toh-pt5
- Bootstrap Components: https://getbootstrap.com/docs/5.1/components/
- As possible please follow how the pages gonna look based on the screenshots below.
What do you need to do?
There will be 3 pages for this web app:
1. Dashboard Page
- On the header bar
- Set page title as “Topcoder Learning Angular Level Advance”
- Use navbar components from Bootstrap: https://getbootstrap.com/docs/5.1/components/navbar/
- Add 2 menus next to the page title
- The dashboard will take to “/dashboard” route
- Treasures will take to “/treasures” route
- Wrap each div inside the content area with Bootstrap container: https://getbootstrap.com/docs/5.1/layout/containers/
- Give more margin/space between each section
- Top Treasure area placed on the content area
- Use 4 columns layout
- You can use the Bootstrap grid to follow the columns layout: https://getbootstrap.com/docs/5.1/layout/grid/
- Inside the column, please wrap the content using the Card component: https://getbootstrap.com/docs/5.1/components/card/#header-and-footer
- Click the Detail link will navigate to the treasure detail page
- Messages area
- Create a Clear message button that will remove all Treasure Services messages.
- Use Button from Bootstrap: https://getbootstrap.com/docs/5.1/components/buttons/#button-tags
- For the message text wrapped using Alert component: https://getbootstrap.com/docs/5.1/components/alerts/
- Each activity message from Treasure Services needs to be displayed in this Message area
Expected Output:
2. Treasures Page
- This screen will contain all data from the services
- Use existing List components from Bootstrap: https://getbootstrap.com/docs/5.1/components/list-group/
- Notice there is an id & name on each row
- Click the link will take the user to the detail pages
- The clear message is also displayed on the bottom of the My Treasures area
Expected Output:
3. Treasure Detail Page
- Use “/detail/1” format for this detail page route
- Users need to remain to able to edit the name
- Create a blue-colored button to go back. Use Bootstrap button component
- Message area need to remain displayed on the bottom
Expected Output: