React JS - GSIV25 - Guidance
React JS - GSIV25 - Guidance
© 2025 GSynergy
Do not distribute or share in any way, shape, or form.
Do not post any material, or parts of it, on any website, blog, forum, social post, etc.
Do not create derivative works for any use other than for your interview with GSynergy
Introduction
Thank you for your interest in advancing your career at GSynergy. We look forward to a
productive and insightful interview process that informs both you and us if we are going
to be a good fit for building great software together.
All our applications are developed using React. We are a fast paced, high productivity
team, where all our developers have high level of autonomy and ownership. We
therefore require that all our teammates have strong development skills, and are fairly
comfortable using React. Since everyone works from home, we require that everyone
have strong oral, written, and visual communication skills.
If you have the appropriate level of proficiency, the challenge should take you between 2
and 6 hours of effort, but if you get carried away, we will not penalize you for your
passion :)
You will be developing a progressive web app for manipulating and analyzing data
created in your app. The app will include two pages to add dimension members, one
page with an AG-Grid to enter measure data, calculate some expressions, and then use
conditional formatting to highlight outliers, and one page to show a chart.
1. Screen mockups
a. Stores page: Mockups/Stores Screen.png
b. SKUs page: Mockups/SKU Screen.png
c. Planning page: Mockups/Planning Screen.png
d. Chart page: Mockups/Chart.png
2. Other assets
a. GSynergy logo
b. Sample Data
The app
1. Display a top navigation bar with the company logo on the left, and, if
authentication has been implemented, a sign-in / sign-out menu to the right.
2. Display a left navigation menu with icons and label for each screen
3. The Store dimension screen which should allow adding, removing, and updating
stores. One should be able to reorder Store as well.
4. The SKU dimension screen which should allow adding, removing, and updating
SKUs and their Prices and Costs.
5. The Planning screen which shows the AG-Grid with a cross join of Stores and
SKUs along the rows, and Calendar along the columns. The Calendar should
group Weeks by Months. It should have the following columns for each Week.
a. Sales Units: Editable integer values for units sold
b. Sales Dollars: Non-editable calculated field, formatted as currency. It
should be calculated as: Sales Units * Price
c. GM Dollars: Non-editable calculated field, formatted as currency. It
should be calculated as: Sales Dollars – Sales Units * Cost
d. GM %: Non-editable calculated field, formatted as percentage. It should be
calculated as: GM Dollars / Sales Dollars. The cell background should be
conditionally formatted using the following rules:
i. Green if greater than or equal to 40%
ii. Yellow if greater than or equal to 10% but less than 40%
iii. Orange if greater than 5% but less than 10%
iv. Red if less than or equal to 5%
6. OPTIONAL: The Chart page should allow the user to select a Store, and show the
GM Dollars and GM % in a dual axis bar chart with values along the Y-Axis and
weeks along the X-Axis. To show these values for the Store, GM Dollars and
Sales Dollars must be totaled across all SKUs for each Store, and then the totals
must be used to calculate the GM %. Chart may be formatted in ways amenable
to the charting library used.
7. OPTIONAL: Provide the capability to import the given sample data to
prepopulate the application screens.
8. Page design should be responsive with a minimum width of 1080 pixels.
9. The Grid and the Chart must fit with the edges of the screen, with reasonable
margin/padding.
10. Use any popular styling and/or components library, but ensure that you follow the
standards of that library.
Evaluation Criteria
1. Application working according to the given specs
2. Page routing
3. State Management
4. Handling of async operations
5. Performance – we recommend testing using the sample data
6. Code structuring for reusability, maintainability and testability
7. Structure of the code repository
8. Structure of code commits
9. Code comments
10. Effective communication via the readme file
11. Presentation quality in the video
12. Optional – Automated tests
13. Optional – CI/CD
14. Optional – Logging errors and warnings
15. Optional – Authentication using common providers