albertpratomo/vue-feedback-list

A feedback list made in Vue 3 + MongoDB

Vue Feedback List

This is an app where you can view and submit feedbacks. You can play with it here.

The tech stack: Vue 3, Nuxt 3, Tailwind, TS, MongoDB, Mongoose, Zod, VeeValidate, Vitest, Testing Library.

Setup

1. git clone this repo
2. Install pnpm on your machine
3. Create and fill in .env file
4. pnpm i
5. pnpm dev
6. App should be live in localhost:3000
7. pnpm test to run the automated tests

Notes

1. I don't want to reinvent the wheel, thus I use design system components from Shadcn Vue. This allows me to get accessible and keyboard-navigable components quickly.
2. I implement FE form validation, so user get instant feedback while typing. I also implement BE form validation, so the stored data is ensured to be clean. Thanks to Zod, the same schema can be reused to validate in FE and BE. The Zod schema is also used to generate Mongoose schema and the TS interface. See this commit.
3. I added a Vitest component test to ensure that the page is functioning properly. See this test file.
4. I implemented Tiptap to add Markdown support for the feedback body, so users can describe their feedback better. See this commit.
5. I made it tablet and desktop responsive.

Improvement list

1. Simplify form markup in FeedbackCreateForm.vue.
2. Write component test for FeedbackCreateForm.vue.
3. Use vue-i18n instead of hardcoding texts.
4. Make the app mobile responsive.
5. Add features: filter, sort, pagination.