Based on the description of the application, the proposed design and the questions made during the call with the client, the plan was to work 4 hours daily and focusing on different areas to try to accomplish the implementation of the main functionality and main UI/UX. The proposed plan was the following:
the job should be complete by Monday 4 at night (CLST time).
The main functionality that will be implemented is:
- [x] Landing/Login screen without authentication functionality
- [x] Feedback landing page/tab with mock users data
- [x] Questions/Feedback flow with navigation to go next and previous
- [x] Starts and flag will be available but without feedback
- [x] Will implement the 3 types of questions (radio buttons, rate scale and textarea)
- [x] My Feedback and Team Feedback tabs
- [x] Will add the Feedback Period selector and button but without functionality
- [x] Since the skip button will not be available in Questions screens, then the skip tag will be not used in the report list
- [x] The bar chart that will be added will be the ones related with the radio buttons, rate scale and textare
- [x] Will not implement the "New" tag feature in the user list.
- [x] Will not add the hover feature to the report column
- [x] Will add the 404 screen
- [x] Will not use loading placeholders.
- [x] In the tabs will not add the badges.
- [ ] In the header the user data is mock data and the date for Feedback Cycle will be mock too.
- [ ] Will use semantic-ui or boostrap just to scaffold the app. Along with Create React App.
- [x] WIll use github to version control
- [x] And will deploy to netlify or maybe to github pages itself as static site.
THe items that are not marked were not accomplished. The site was developed using Emotion (CSS-in-JS) without any UI toolkit. I didn't have enough time to implement the Profile section in the Header. Also there are two bug:
- In the Questions wizard in the Scale/Rating question the user have to click twice in the squares to make the selection visible. And there is a missing/hide main functionality.
- The color of the visited links in the Header was not set so is defaulting to browser implementation.
The entire application runs on mock data so:
- The Questions wizard navigating through the questions but not persisting the answers, so when the user goes back through the wizard, the previous answer is not visible/present.
- After a Questionaire is answered that data is not the one represented in the My Feedback/Team Feedback tabs, those tabs use mock data for the feedback.
What I would do different:
- Add more coments.
- Start with Emotion immediatly instead of trying to use semantic-ui, I spent some time checking how to build it with that UI kit.
- Would develop my custom wizard solution immediatly instead of trying a 3rd party solution. I spent some time trying to make the 3rd party solution fit the desired UI.
- I would loved to be able to use some kid of mock service for the data instead of direct access to the javascript objects. I wanted to use Prisma, but for a POC and with time constraint was overkill. I think for a week POC that could work because will allow the client to see a almost real usage, including loading placeholders.
- With more time I would have spent a few more time in the code and the architecture to avoid too many refactors in the future.
- With more time I would have used flow better.
- With more time I would have added (better) comments into the code and write a little documentation README in the repo.
- With more time I would have added a few unit tests for some of the logic implemented like:
- The rendering of the bar charts in the feedback report screens.
- The manipulcation of the data in the Wizard. and also some integration test to be able to check how the changes in the Wizard data affect the other pieces of the app.