Memorable Frontend Test Submission

[josiah-brown]

This PR contains 2 separate commits corresponding with each of the tasks outlined in the test. The changes in each commit are outlined below followed by my thoughts on the overall project:

Add 'Creatives' table in Library page (e05475e)

• In order to work with the new "Creative" entity, some foundational work had to be done. Specifically, the creatives repository was initialized (creatives.repository.ts) along with the creatives domain (creatives.domain.ts). This allows for data fetching inside of the app folder.
• After setting up the repository and domain, creative-library.page.tsx was updated to fetch the data and store in state.
• Lastly, creative-library.table.widget.tsx was created to display the creative items passed down from creative-library.page.tsx. Note that most of the ui for this table widget was reused from the brand page.

NOTES: The bulk of the problem solving for this commit was in trying to understand how all of the different pieces of this project fit together. I have never used graphql in depth so it took some time to figure out how to get the data to the frontend. Once I had a grasp on that though, the UI was very easy to implement.

Add a new 'Sectors' page (31b43dc)

• To start on this feature, a sector page had to be created by updated the routes in business-settings.routes.ts and creating sectors.page.tsx.
• Next, the sectors.grid.widget.tsx and sector-card.ui.tsx files were created to handle the UI.
• schema.ts was updated with a specific interface that represents the sector data.
• The code that simulates a data fetch using static data was added to the sectors page using a simple setTimeout and the static data was stored in temp-data.ts

NOTES: This feature needs more work but I am working full time and only had a few hours to put towards this challenge. If I had more time I would do the following to improve the code: (1) Move the code for the sector data fetch into a new sector.domain.ts file (2) Create a sector repository that does a better job of mimicking the future backend endpoint (3) Add more robust interfaces for the Sector entity in schema.ts.

Proposals for Improvement

General

• There are some components that highlight on hover but are not clickable. This could be confusing for users.
• As far as I can tell (I could be missing it 🙂), there is no global standard for the amount of padding and spacing to give to components created in the future. This could lead to small variations in the UI over time which looks unprofessional. I think it would be worth spending some time thinking about how to make these types of styles more global and scalable.

On the Library page...

• Add a sorting functionality on column title click
• Filter results based on search input value
• Add a button/widget that allows the user to implement custom filters

On the Sectors page....

• The cards look extremely bland and ugly in my opinion. I know this is just a challenge so I did my best to copy the design ref, but I would add some border radius, box-shadow, and potentially a border if I had it my way :)

Thanks for taking the time to review this! I look forward to meeting and discussing further!