/fe-developer-tech-test-2024

Primary LanguageCSS

ProdPad FE Developer Pair Programming Exercise

Hey! Welcome to the ProdPad FE Developer pair programming exercise.

In this task, we will refactor and improve a simple Vue application — adding some styles based on an existing design system, constructing some new components to help break up the code, and improving the overall accessibility and semantics of the project's HTML.

Throughout this exercise, we will ask you to work through a list of tasks, but don't worry if you don't manage to get through them all — this is all about seeing how you like to work and approach problems!

Getting setup

  1. Clone this repository, navigate into it.
  2. Install the project's depenancies with npm install
  3. Run npm run dev to start Vite in development mode
  4. Head to http://localhost:5173/ 🚀

Task list

  • Can you start off by making the markup in App.vue more semantic?
  • Can you break out the .roadmap-card HTML into it's own Vue component?
  • Using the CSS-based design system defined in css/global.css can you add some styles to the newly created roadmap card component?
  • Can you add some code to render each card's objectives, as displayed in the design?
  • Can you utilize the Vuex store to allow the user to individually update the titles of each roadmap card?

Design reference