logo

ClearScore Idea Board

Idea Board Preview

This ClearScore take home test required me to create an Idea Board.

What Is The Idea Board?

The Idea Board is your personal canvas for ideation. With its user-friendly interface and robust functionality, this application empowers you to:

  • Create Ideas: Transform your thoughts into tangible concepts. Craft new ideas effortlessly by providing a title, description, and tapping into the prompt-focused title field to jumpstart your creative process.
  • Edit with Ease: Seamlessly revise your ideas on the fly. Edit titles and descriptions inline, making refining your concepts a breeze.
  • Time Stamps: Every idea you create or update is accompanied by clear time stamps, keeping track of your creative journey.
  • Organisation and Sorting: Stay organised by sorting your ideas chronologically based on their creation dates or alphabetically, ensuring easy access to your evolving concepts.
  • Minimalist Tile Design: Each idea is represented as a visually appealing tile, showcasing its title, description, and time stamp. A subtle delete button ensures effortless removal when necessary.
  • Persistent State: Takes advantage of the localStorage API, which keeps your ideas intact even when you refresh the page. Your creative progress remains unbroken.
  • Character Countdown: Stay within the limits of a concise description. Experience the helpful character countdown that signals as you approach the 140-character threshold.
  • Subtle Notifications: Receive discreet notifications whenever an idea tile is updated, enhancing your overall user experience.

Embrace Real-World Development:

This project embodies real-world development practices. I approached it as if I were crafting a production-ready application, ensuring it's not just a prototype but a fully functional solution. To guarantee a seamless experience and robust codebase, I've incorporated:

  • Responsive Design: The app adapts effortlessly to various screen sizes, ensuring a smooth experience across devices.
  • Thoughtful Testing: A comprehensive test suite validates the functionality, enhancing reliability.
  • Attention to Detail: I've meticulously attended to each element, from the UI design to the code's internal structure.

Technologies Used

TypeScript
React
Cypress
Jest
Styled Components