Multi step form that guides the user through checkout process and collects data using GitHub's API.
URL: https://github-buddy.herokuapp.com/
npm install
npm run serve
npm run build
npm run lint
npm run unit
npm run watch:unit
npm run e2e
- Vue 3
- Vue Router
- Pinia
- TypeScript
- Jest
- Cypress
- Tailwind CSS
- SCSS
- Semantic HTML
- Vee-validate & Yup
- Axios
- Webpack
Vue 3's Composition API allows to directly add the setup attribute to the script tag to expose anything we want to the template in a faster and easier way. More info: https://learnvue.co/2021/05/explaining-the-new-script-setup-type-in-vue-3-major-takeaways-from-the-rfc/#a-rundown-of-script-setup
The structure of the project is:
- Layout: Header & Footer.
- Steps: Introduction, FormOne, FormTwo and Navigation which is a shared child component of the previous 3.
- User: GitHubData & UserData.
Pinia is now the recommended library for state management in Vue 3 since it features many benefits and improvements compared to Vuex 4. Pinia provides a very easy to digest documentation in order to migrate existing Vuex stores to Pinia with clear benefits highlighted. More info: https://pinia.vuejs.org/introduction.html#comparison-with-vuex-3-x-4-x
Vue Router makes it easy to go back and forth with the multi step form by using the browser's back and next buttons.
GitHub API consumption is handled through a service with the usage of Axios: github.service.ts.
Vee-validate & Yup libraries allow to validate every field of the forms and provide clear errors to the user. Every step is correctly validated before the Next/Finish button is enabled.
If username exists the GitHub data panel will be shown in the final view. Otherwise a text stating username not found will be shown.
0.1.0
The MIT License (MIT)
Kevin Martínez Montero
Senior Front End Engineer