Easy | Topcoder Skill Builder Competition | React | Mining Structure

Key Information

Register
Submit
Competition Timeline

Timezone:Etc/UTC

Registration

Starts

Mar 31, 2021

15:00

Ends

Dec 31, 2021

05:02

Submission

Starts

Mar 31, 2021

15:24

Ends

Dec 31, 2021

05:04

Review

Starts

Dec 31, 2021

05:05

Ends

Jan 02, 2022

05:05

Appeals

Starts

Jan 02, 2022

05:05

Ends

Jan 03, 2022

05:05

Winners Announced

Jan 03, 2022

17:05

Challenge Overview

Mining Structure

This is the EASY Level Competition about how the story started to create the Mining Plan. The miners are starting the plan to mine the ore, but before they need to prepare the structure on mine site.

Your task in this challenge is to create an initial application using the React. You are given a blueprint and in this task, you need to create an initial structure to the mining plan.

Solving this problem you learn:

  • To create an initial application structure using the React
  • To use React components to display data.
  • To use Props to pass data between components.

Learning Resource: https://reactjs.org/docs/create-a-new-react-app.html

What do you need to do?

  • IMPORTANT: Follow the exact naming (id and class names) from challenge descriptions, automated testers will check the exact same values
  • Task: Firstly your task it to create a component MineSiteInput to get inputs from miners, so they will be able to add all ore name found in cave
    • Name Input Field with id as "oreX", example: "ore1, ore2, ore3, …"
    • Create a button Add More with id addMoreButton, when click on this button will show up a new Input Field, so initially the component will show one Input Field "ore1", then when click in Add More will show "ore2" Input Field, if click again "ore3", etc.
    • Create a button Done with id doneButton, when click in this button pass all ore names to MineSiteOverview component
  • MineSiteOverview, this need be accessible via "/overview"
    • Get all props passed from previous page and sort by name
    • Display ores in simple list format, use "ul" and "li"

Submission Starter:

https://drive.google.com/drive/folders/12MkmW0AchVbEP8ERjqPMB3pSqqUyVAUf?usp=sharing

Topcoder Skill Builder | React Levels

Leaderboard: https://docs.google.com/spreadsheets/d/e/2PACX-1vRHoubIraa9FWIB3fOAv26dUwxBH_c46wqF9kT5H1WiGIjnZe_soXwt2lagu0scoNy14fzB_gZuI4Z0/pubhtml?gid=208403618&single=true

Submission Guidelines

Judging Criteria

  • Your submission will be reviewed immediately by Automated Tester and you will receive a score on the leaderboard based on the number of requirements you fulfil or test cases you pass. If you fulfil 6/7 requirements you will get 6/7*100 = 85.71.
  • In case you don't see a score, make sure you understand the submission guidelines. Also, look for Artifacts and Logs in Submission-Review to know more about your submission. You can also discuss in the challenge forum for any issues.
  • About your submission review:
    • Collaborating/Cheating in any way with anyone else (member or not) during a rated event is considered cheating.
    • An excessive amount of unused content should be avoided.
    • Code Readability is expected with necessary comments, indentation and somewhat refactored code (as much as possible)

Submission Guidelines:

Please Note - You don’t need to submit anything on this competition, but submit on a particular level/problem You must follow this submission folder structure so our automated test process can process your scoring:

  • Create a folder with “code” as the folder name then zip.
  • Inside the “code” folder, there needs to be a file named Dockerfile. This is the docker file used to build the user’s submission. Refer to the provided Docker file in Sample Submission for each level.
  • Zip that “code” folder and submit to the challenge.

Submission folder structure example:
RDM-Submission-Structure

Execution Details and Submission Logs

Each time you submit, the platform will leverage Docker to run your code. The execution logs will be saved as “Artifacts” that can be downloaded from the Submission Review App: https://submission-review.topcoder.com/.

RDM-Execution-logs

RDM-Execution-Logs-2

Checking Passing and Failing Test Cases

Using the Submission Review App (https://submission-review.topcoder.com/), navigate to the specific challenge, then to your submission, and then to the Artifacts for your submission. The zip file you download will contain information about your submission including a result.json file with the test results.

Docker Structure

Make sure you can run your submission with Docker from a clean slate. Your Docker needs to expose port: 8080 It needs to build on a completely clean machine when the platform runs your submission. If you are using something locally to build and run your submission, make sure it’s included as part of your Docker configuration as well.

Example Dockerfile for Node app for React submission:

FROM node:alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
RUN rm -rf /usr/share/nginx/html/*
COPY --from=build /app/build/ /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 8080
ENTRYPOINT ["nginx", "-g", "daemon off;"]

Especially for Angular submission we need include nginx.conf to expose the port 8080:

server {
  listen 8080;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri$args $uri$args/ $uri $uri/ /index.html =404;
  }
}

ELIGIBLE EVENTS:

2021 Topcoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30176450