This project was created as part of a time-constrained frontend assessment for ClearScore. Developed within 6 to 8 hours, it utilizes modern technologies like Tailwind CSS and ShadCN UI Library for rapid development. Prioritized simplicity, accessibility, and thorough testing.
The project meets all core and stretch requirements, including responsive design, sorting options, and character countdown. Additionally, it implements extra features such as dark/light themes and new-idea modals with quick generation of mock ideas.
Note
For reviewers:
- Please disregard boilerplate ShadCN code in
components/ui, as it does not require review. - For known issues and potential enhancements, please refer to this repos github issues.
- Your constructive criticism and suggestions for improvements are welcome!
✔ Fully Responsive Page.
✔ Each Idea Tile Should Contain a Title and Description.
✔ Idea CRUD Functionality.
✔ Inline Edit Ideas.
✔ Display Created/Updated Time.
✔ Focus Title Field for New Ideas Prompt.
✔ Sort Ideas by Creation Date or Alphabetically.
✔ Utilizes localStorage API to Persist Current State.
✔ Character Countdown for Description Text.
✔ Unobtrusive Notification for Updates.
✔ Light and Dark Theme Styling.
✔ Quick Generate Mock Ideas.
✔ Hosting on a Live Site.
✔ Clean, Concise Code.
✔ Stylish Solution.
✔ Demonstration of CSS Knowledge.
✔ Isomorphic/Universal SPA.
✔ Consistent Use of ES6 and ES7 Features.
✔ Utilization of PostCSS.
✔ Detailed README.
✔ Testing with modern tooling (RTL etc.)
❌ MEN (Mongo, Express, Node) Stack Websites.
This is a Frontend Assessment and Doesn't Require a Dedicated Backend or Database.
❌ We Build Using the Webpack Module Bundler and Lerna Package Manager.
This App Uses Vite and Thus Utilizes Vite's Own Builder.
Warning
ShadCN components, including those in components/ui and components/theme, are thoroughly tested within the library itself. Consequently, there's no need for individual testing of these components in this project. All necessary coverage for these components is ensured through integration tests.
The below image reflects the testing status as of the latest commit.
