The path to optimal health is closer than ever. At Fréyja healing, we believe in the bodies natural healing ability's.
However,
if you a suffering with a lingering ache or chronically stressed, book an appointment with any of our experienced naturopaths & begin your journey to better health.
As a user, customer I would like to the following:
✅ successfully implemented
❌ not yet implemented
- ✅ View information (prices and details) on all available services.
- ✅ View opening times & contact information.
- ✅ View information on naturopaths (practitioners).
- ✅ View privacy policy on how the users information is handled.
- ✅ Send inquires about a service.
- ✅ Book an appointment.
- ❌ Add uniques image for each available service.
- ❌ Improve SEO (Add open graph meta information).
- ❌ Receive email appointment confirmation.
- ❌ Receive email contact form confirmation.
- ❌ Setup payment processing.
- ❌ Add account page for users:
- User can view account information
- User can place booking via payment method
- User can write review
- ❌ Improve security:
- Add Cloudflare Turnstile (privacy focused captcha).
- Protect mailto address (further research needed).
- Add Content Security Policy (further research needed).
- ❌ Add unit testing & CI workflow (further research needed)
Color pallet
- I utilized the nuxt icon module to generate the icons. The Icons are from Google Fonts Material Symbols
- I chose to use default browser fonts & not to use a custom font.
NOTE
These wireframes are exported wireframes from Figma. They are not screenshots from a browser.
Mobile
Booking (step 1)
Booking page (step 2)
Booking page (confirmation)
Home page
Contact page
Contact page write to us
Privacy page
Team page
Treatment page
Desktop
Booking page (step 1)
Booking page (step 2)
Booking page (confirmation)
Home page
Contact page
Contact page write to us
Privacy page
Team page
Treatment page
- Users can choose from any of our 6 appointments & place a booking. The user is required to enter the following:
- Name
- Contact number
- Choose a time & date
- Submit after verifying their details are correct
- View all services with an overview of the following INFORMATION
- Treatment Details
- Treatment
- Treatment duration
- Treatment Price
- A list of benefits of the treatment
- Treatment brief description
- Treatment Details
- Users can send inquiry about any of the services offered with the following INFORMATION
- Name
- service
- Short message
- Users can easily navigate to any of the available services.
- Users can easily navigate to the contact page.
- Users can easily navigate to the about us page.
- ❌ Add uniques image for each available service.
- ❌ Improve SEO (Add open graph meta information).
- ❌ Receive email appointment confirmation.
- ❌ Receive email contact form confirmation.
- ❌ Setup payment processing.
- ❌ Add account page for users:
- User can view account information
- User can place booking via payment method
- User can write review
- ❌ Improve security:
- Add Cloudflare Turnstile (privacy focused captcha).
- Protect mailto address (further research needed).
- Add Content Security Policy (further research needed).
- ❌ Add unit testing & CI workflow (further research needed)
-
- Markup language used within VueJS templates.
-
- Used to style elements within pages & add transition effects.
-
- Used to add reactivity.
- From validation (client side)
- Return data based on query parameters
- Tailwindcss 🔗 (Used to enhance workflow & improve maintainability of CSS).
- Vue.js 🔗 (The Progressive JavaScript Framework)
- Reactivity.
- Reusable components.
- NuxtJS 🔗 (The Intuitive Vue Framework)
- Used for server side rendering.
- Enhanced SEO.
- Image optimization.
- Code optimization (minified CSS & JavaScript).
- State management.
- NuxtJS Modules 🔗 (Extends NuxtJS functionality)
- Nuxt Icon 🔗 Used to generate Icons for project.
- Nuxt image 🔗 Used to optimize images for variable screen sizes & convert to webp image format.
- VueJS devtools 🔗 Used to inspect debug VueJS (performance issues & reactivity issues)
Google page speed insight (Used for testing performance & SEO) 🔗
Mobile
About us
Booking
Contact
Home
Privacy
The team
Treatments
Desktop
About us
Booking
Contact
Home
Privacy
The team
Treatments
I tested responses in Firefox Developer & Google Chrome from 300px to 1200px & Iphone for mobile device testing.
Iphone SE responsive screenshot
Ipad responsive screenshot
Desktop responsive screenshot
knowledge of accessibility is limited, application will need audit at later date to improve accessibility for screen readers.
- Check for overflow issues.
- Home page information cards overflow at 300px
- Check for accessibility issues (contrasting colors).
- None found
knowledge of unit testing is limited, application will need unit testing at later date.
INFORMATION
NuxtJS & Vite provide excellent development experience & detailed errors in development.
- Check for JavaScript errors
- All known errors resolved in development.
BUG CSS
is() CSS pseudo-class does not work on invalid form input.
- View mobile experience (validate page links work & inputs on forms)
Input validation is based on pattern attribute value
Form input testing booking
Form input testing contact
- Contact us page: The form will not send unless the following rules are met.
- First & last name: (Required) must have 2 - 20 characters using alphabetic notation only.
- Email: (Required) must be a valid email address & math pattern.
- Service option: (Not required) Choose a service are predefined options.
- User message: (Required) must be 5 - 300 characters.
- Booking page: The form will not send unless the following rules are met.
- Name: (Required) must have 2 - 20 characters using alphabetic notation only.
- Email: (Required) must be a valid email address & math pattern.
- Phone number: (Required) must be numeric only and 5 - 10 characters.
- Calender: (Required) Choose date, calender is not viewable beyond December 2022 & before the current month of the current year.
- Time: (Required) Time must be between 9AM - 5PM, 9AM is predefined input if no time is chosen.
- Booking confirmation details: Check users details are correct.
- Name
- Phone number
- Appointment date
- Appointment time
Important
HTML & CSS validation returns 54 CSS parsing errors. This issue is discussed by the maintainer of Tailwindcss & has provided a solution however,
I cannot use the recommended fix as I use scoped styles within VueJS. This will break styles used within the application. Remove --tw- variables from universal selector #7317 🔗
W3C Markup Validation 🔗 (Validate HTML)
About us page
Booking page
Contact page
Home page
The team page
Treatments page
W3C CSS Validation 🔗 (Validate CSS)
About us page
Booking page
Contact page
Home page
The team page
Treatments page
JS Hint 🔗 (Validate JavaScript)
I added the following rule to ignore missing semicolons and test for ECMAScript 9 support.
/* jslint asi: true, esversion: 9 */Not all VueJS files contain JavaScript that can be tested with JS Hint. I tested the following files.
-
Pages
- contact.vue
- booking.vue
- treatments.vue
-
Components
- AppFormInput.vue
- ContactForm.vue
- TheFooter.vue
-
Composables
- Services.js
Js Hint results
NuxtJS auto imports VusJS components, Eslint will display no-undefined warnings, I have yet to find a fix for this.
Nuxt Auto imports 🔗
VueJS & JavaScript
I added Eslint & Eslint-plugin-vue to validate & check for errors during development as well as follow VueJS best practices based on VusJs style guide. Linting errors are shown in visual studio code terminal.