This is a solution to the Devjobs web app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout for each page depending on their device's screen size
- See hover states for all interactive elements throughout the site
- Be able to filter jobs on the index page by title, location, and whether a job is for a full-time position
- Be able to click a job from the index page so that they can read more information and apply for the job
- Bonus: Have the correct color scheme chosen for them based on their computer preferences. Hint: Research
prefers-color-schemein CSS.
- Solution URL: https://www.frontendmentor.io/solutions/devjobs-web-app-with-vue-3-zmMPKB3cFh
- Live Site URL: https://devjobs-web-app-viniciuscosta89.vercel.app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vue 3 - The Progressive JavaScript Framework
- Pinia - The intuitive store for Vue.js
- Tailwind CSS - A utility-first CSS framework
- Typescript - TypeScript is JavaScript with syntax for types
- TanStack Query - Powerful asynchronous state management
- Vue Router - The official Router for Vue.js
- Bun - JS package manager
It was a way to fix Vue 3 and its world in my mind. To get used to Vue 3 features, Pinia, Vue router. And I learned Tailwind because it's my first project with it.
It could improve Vue's folder and file architecture and best practices. Insert unit and end-to-end tests with Vitest and Playwright.
I recommend to read each technology documentation.
- Website - Vinicius Costa
- Frontend Mentor - @viniciuscosta89