This project was the result of a Capstone Project run through Massey University. It is a webapp designed using NuxtJS to easily identify the different variety of mushrooms and fungi that grow in Aotearoa New Zealand.
Client: TailwindCSS, Vue 3 Carousel
Server: NuxtJS, Jest Unit Testing, Cypress End-to-End Testing
APIs: Cloudinary Image Hosting, Google Vertex VQA AI
This project uses npm as the package manager. Follow this process to install the project locally:
Clone the project
git clone https://github.com/kloudsoft91/mushroom_db_app.git
Go to the project directory
cd mushroom_db_app
Install the dependencies
npm install
Start the development server https://localhost:3000/mushroom_db_app
npm run dev
To run Jest unit tests, run the following command
npm run test
To run Cypress end-to-end tests in a CLI:
- Run the following command:
npx cypress run
To run Cypress end-to-end tests in the Cypress application:
- Run the following command:
npx cypress open
- Select E2E testing
- Choose preferred browser and click Start E2E Testing
- Choose the test file you want to run,
spec.cy.ts
in this case - The tests will now run automatically
This project is deployed automatically via GitHub Actions on a pull request to the main branch.
The deployment step in the GitHub Action is:
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
The admin interface can be found on: https://kloudsoft91.github.io/mushroom_db_app/admin
The Admin UI is to be used by admins of the app to create meta data to add to the app's storage. The admin page is a simple form that allows admins to generate JSON data for mushrooms that are to be added to the app.
Note: The ID must be updated before pushing the data into the app's storage. All other fields are initialised to either null or empty strings / arrays.
The main app is hosted at: https://kloudsoft91.github.io/mushroom_db_app/
- The top searchbox allows users to enter in names of known mushrooms, either common or latin names. Typing in data will dynamically filter the mushroom cards below, with a temporary red error message above if invalid user inputs are entered.
- The length searchboxes below can also be used to find mushrooms based on the measured size of mushrooms found.
- The Tag bar below the searchboxes can be used to find Edible, Gourmet, Poisonous, Psychoactive mushrooms as well as mushrooms with lookalikes.
At the bottom left corner of the screen, the bottom green Filters button will expand out an accordion of filter bars.
- Buttons can be clicked to apply filters or toggle them off
- The filter accordion bars can be closed by clicking outside the filter window
Contributions are always welcome!
See contributing.md for ways to get started.
- Manawa Technologies for sponsoring this project
- Massey University for setting up the capstone project
- Steve Pavarno from Manawa Technologies for mentoring the team during the project
- Amjed Tahir from Massey University for mentoring the team and being our supervisor during the project