Little Lemon App

Project>

The Little Lemon App

Team & Role>

For my Meta Front-End Developer Certification capstone, I independently designed and developed a comprehensive web application, managing the full UX/UI design process and the front-end development.

Objectives>

These are the main objectives of the project as follows:

• Conducting UX research methodologies and designing a user workflow to streamline the user journey
• Creating a medium-fidelity Figma wireframe and high-fidelity interactive prototype, translating user insights into tangible design
• Developing an effective component hierarchy
• Optimizing a responsive web application across multiple devices
• Authoring a clean, semantic HTML document
• Applying advanced CSS stylings using the CSS Flexbox and CSS Grid
• Building a restaurant booking system that fetches live API data for available booking times, ensuring real-time accuracy
• Implementing the menu navigation functionality throughout the site using the React Router DOM
• Developing robust form validation processes
• Executing React unit tests
• Authoring accessible codebases according to the industry standard accessibility guidelines
• Managing Git version control for efficient code tracking

Technical Platforms>

HTML5, CSS, JavaScript, React.js, Figma, Jest, React Testing Library, Node.js, Node Package Manager (NPM), GitHub, Mac Terminal

UX & UI Process>

• Ensured product requirements
• Defined problem statements
• Created a persona profile
• Created a user journey map
• Built a wireframe for each page using Figma
• Built an interactive high-fidelity prototype using Figma
• Built Figma component assets for the consistent design system
• Created a UI style guide
• Conducted a Heuristic Usability Evaluation and resolved the issues based on the outcome

What has been developed?>

• Modern User Interface Layout
  • HTML5
  • CSS Flexbox, CSS Grid
  • Responsive design for different device screens
• Core React Functionalities
  • Component hierarchy management
  • State sharing
  • Prop handover from the parent to the child component
  • React Router DOM menu navigation feature
• Accessible Coding
  • HTML5 semantic tags
  • ARIA
  • Accessible form design
• Form Validation
  • Client side
  • Server side
• Use of Hooks
  • useState, useEffect, useReducer, useRef
• Live Web API Data Fetch
• Unit Test
  • App.test.js
  • BookingForm.test.js
  • HTML5 validation unit test
  • Form validation unit test
  • 2 test suites passed
  • 20 tests passed
• Git Version Control

Enhanced Form User Experience>

• It displays live API data of the reservation time upon the user’s selection of the reservation date.
• It renders conditionally for the form field error and assistive text messages upon the user’s selection among phone and email for their required contact method option.
• When the user clicks the form label, it moves the focus inside the corresponding form input field.
• It provides robust client-side and server-side form validations as follows:
  • It displays the error messages when the required input fields are empty.
  • It displays the error messages when the input field value formats are incorrect.
  • Upon the user’s selection among their required contact method option, it updates the required field error message and assistive text message accordingly.
  • Regardless of the contact method required field, it validates the format of the non-required input field’s value when its value is not empty.
  • Not to intimidate the user, the required field error messages only display when the user leaves the field without providing any value using the handleBlur event.
  • It displays the live error messages according to the form value format validation mechanism while the user is changing the input field value, and their input value is not empty.
  • It renders the ‘Confirm reservation’ button’s CSS styling conditionally according to the server-side form validation outcome.
  • It double-checks with the server-side form validation:
    • When server-side form validation is unsuccessful, the ‘Confirm reservation’ button becomes disabled.
    • When server-side form validation is successful, the ‘Confirm reservation’ button becomes enabled.
• It displays the loading message when the loading time exceeds four seconds.
• After the successful form submission, it displays the user’s inputs for their confirmation.
• Once the user confirms their form field inputs, either of the following two things takes place:
  • When the user does not take any action for three seconds, the page transfers to the Congratulations page automatically.
  • When the user clicks the Okay button, the page transfers to the Congratulations page.
• On the Congratulations page, either of the following two things takes place:
  • When the user clicks the ‘View my reservation’ button, the page transfers to the ‘View My Reservation’ tab in the ‘Reservations’ tab.
  • When the user clicks the ‘Home’ button, the page transfers to the Home page.

Accessible Development>

• Every input field has been associated with the label element.
• The ‘aria-label’ attribute was used to provide a direct accessible name.
• The ‘aria-describedby’ attribute was used to provide an additional description for the element. The conditional description was used according to the error status inside the ‘aria-describedby’ attribute.
• The ‘aria-live=”polite”‘ attribute was used for the dynamically rendering elements to announce the dynamic content changes to the screen reader users.
• The ‘alt’ attribute was used for the meaningful or functional images or icons.
• The ‘alt’ attribute was not used for the decorative images or icons.
• The semantic HTML tags were used to ensure keyboard accessibility.
• The ‘role’ or ‘type’ attribute was used to indicate the element’s function.
• A sufficient color contrast between the content and background was provided for the buttons or interactive elements.
• The ‘fieldset’ and ‘legend’ elements were used for grouping related items.
• The ‘aria-invalid’ attribute was used to announce the error status to the screen reader users.
• To avoid redundant accessible names, the ARIA attributes were not used when sufficient accessible names were provided inside the opening and closing tags of the element.

Challenge 1) The conditional form error and assistive text message rendering based on the user’s required contact method selection among the phone and email created a complex scenario.

=> Resolutions:

Challenge 2) After running the React Unit Test using Jest, the CSS styling has been modified since Jest was calling the browser’s default stylesheet, known as the “user agent stylesheet”.

=> Resolutions:

Challenge 3) The React Unit Test has kept failing due to the multiple instances of the same Accessible Name.

=> Resolutions: