Context

Challenge Context

Welcome to the "Metadata Editor App - Backend API Design Challenge". We are building a new web application for a client. This application will be divided into frontend and backend. In the previous challenge, we got UI design (https://www.topcoder.com/challenges/30127937). In this challenge, we are going to implement the frontend UI.

Project Context

Make my large number of tags manageable in bulk.

We are looking for an application where data users can view and edit existing metadata fields. The database is a relational database, similar to what sits on the backend of classifieds websites such as Craigslist/Gumtree. Administrators need to be able to find items within the database using a search function along with filters to narrow down relevant results. Results are then selected, with the metadata editor opened up to make changes to the assigned tags - the functions incorporated into the metadata editor should be the primary focus of the challenge.

Expected Outcome

A React application ready to be integrated with backend API.

Challenge Details

Technology Stack

• React 16
• Redux
• NodeJs 12

Individual Requirements

• Marvel Link: https://marvelapp.com/prototype/8fd7j99/screen/70044631
• All screens are in scope.
• Must pass standard lint and NPM audit.
• Backend Swagger file is provided in the forum. Please create mock server and point UI to this mock server.
• You should create components for reusable UI / features instead of copying and pasting the same code everywhere. This is considered a major requirement in the scorecard during review.
• For date picker, you could use "react-datepicker"

Screens

• 1 - 2 login pages
• 3-10 dashboard
  • 3 dashboard
  • 4-8 dashboard search popup
  • 9-10 dashboard saved search (all saved searches are stored in session)
• 11-25 Datasets
  • 12-18 Dataset edit
  • 19 Pin
  • 21-25 Saved filter (all saved filters are stored in session)
• 26-43 Tags
• 44-53 Activity logs

Testing

• Unit tests are NOT required for this challenge.

Browsers

• Chrome (Latest)
• IE10
• Edge (Latest)

GENERAL REQUIREMENTS

• Must use ReactJS and follow the provided design.
• The main content should have fluid width to fill all the available space, the minimum supported resolution is 1280*720 (height is actually unlimited since the page can scroll).
• Searching / filtering should work whenever applicable.
• Pagination should work whenever applicable.
• Filtering/pagination happens on the server side so you need to pass the query parameters and the server is expected to return the pagination info (pageSize, total etc).
• Implement popup for confirmation and warning messages. Do NOT use browser alerts, but use custom styles popups as shown in the design
• Show loading spinners when populating data from API / local JSON to UI
• Implement validation errors (for example: login error as shown in design)
• No linting errors
• No errors with prod builds
• You are expected to create a detailed README file including information on how to setup, run and verify your application.

CODE REQUIREMENTS

• ES6 syntax is preferred, as Babel has been set up to handle transpiling the syntax to the current JavaScript standard.
• Use .jsx extension for React components; using PascalCase for filenames. E.g., ComponentName/index.jsx.
• Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.
• Ensure that there are no lint errors.
• You’re free to choose between CSS & SCSS but you need to use flex instead of float.
• Follow a clean folder structure.
• Create reusable components.

Final Submission Guidelines

• Full code that covers all the requirements.
• README.md including information on how to setup and run your application.