recipe-finder

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Node version

• v20.13.1

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint

Deploy in gh-pages

npm run build
npm run deploy

Design

This project follows the color palette defined here: color pallete

Below are the wireframes used as design guidelines:

• Desktop
• Mobile

Live demo

You can test the deployed project in a real environment at the following URL:

• Live demo

Tools and libraries used

I intentionally avoided component libraries to better showcase my coding skills. The technologies and tools used are:

• TypeScript: Adds static type checking, helping catch errors early, reducing bugs, and making the code more robust.

• Pinia: Applied for state management, ensuring a reactive and centralized state in the browser.

• Vue Router: Used to handle navigation between separate views for recipe search and favorite recipes.

• ESLint & Prettier: Enforced consistent code style, prevented errors, and improved maintainability.

• GitHub Pages (gh-pages): Used for project deployment.

• Vitest: Implemented unit testing.

• Vite: Chosen as the build tool for faster development and optimized production builds.

Accesibility

• This project follows WCAG guidelines to ensure accessibility compliance. The complete accessibility report is available in the project’s docs folder.

Future work and nice to have.

Due to time constraints, some features were considered but not implemented. These include:

• Better error handling throughout the application.

• Complete unit testing for all components.

• Husky integration to enforce linting and formatting on pre-commits and automate deployments post-push.

• Enhanced UI/UX by adding animations and smooth transitions.

• Improved accessibility refinements beyond WCAG compliance.

• Optimized CSS structure to reduce duplicate code and improve maintainability.

• Performance Optimization: A Lighthouse analysis revealed areas for performance improvement, particularly in image handling. When searching for recipes, implementing pagination with an offset of ten would ensure that only a limited number of recipe card components load at a time. This prevents the application from rendering all images simultaneously, reducing unnecessary load and improving overall efficiency.

• i18n support for multi-language functionality.