Skip to content

Frontend Assessment: Responsive React Idea Board with Local Storage Persistence

Notifications You must be signed in to change notification settings

DevonGifford/ClearScore

Repository files navigation

Take-Home Assessment

Responsive Frontend React Idea Board with Local Storage Persistence

Report Bug  ·  Request Feature

Tech Used in this Project:


Introduction:


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!
Demo-Mobile-View Demo-Desktop-View

🔑 Assessment Requirements:


✔ 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.


Stretch Features:

✔ Utilizes localStorage API to Persist Current State.

✔ Character Countdown for Description Text.

✔ Unobtrusive Notification for Updates.


Bonus Features:

✔ Light and Dark Theme Styling.

✔ Quick Generate Mock Ideas.


What We're Looking For:

✔ 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.


🧪 Test Coverage:


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.

Demo

(back to top)