The application's function is to mimic finding dining establishments nearby.
The application was written mainly to consolidate Vue, unit tests, Storybook and Typescript, and to practice data retrieval with the Rest API architecture using Axios.
Click to see repo of this app written with React
Part of the data is fetched from DatoCMS with GraphQL just to demonstrate the ability of using GraphQL.
The app was written based on a mobile-first approach and it's fully responsive 📱💻🖥
Accessibility is at a high level ♿
The app has it's own favicon ⚡
Lines of code rewritten from tutorials: 0 ✔
The layout was designed by me in Figma 🖍
All photos have been cropped and their size has been reduced accordingly (to minimize file size) 🖼✂
- choice of restaurant type (bar, pizzeria, fast food, restaurant, oriental cuisine)
- display of places meeting certain kreyteria (unvisited, favorites, highly rated, currently open)
- adding places to favorites
- marking places as visited
- sorting of results
- searching by name
- displaying current promotions
-
Vite
-
Typescript
-
Vue
-
Vue Router
-
Mock Service Worker
-
Axios
-
REST API
-
GraphQL
-
Vitest
-
Vue Testing Library
-
Axios Mock Adapter
-
Storybook
-
-
Figma
More accurate informations about technologies used
Build tool:
- Vite
Language:
- Typescript
Framework:
- Vue
Vue libraries used:
- Vue Router
- VueUse
Backend mock:
- Mock Serice Worker
- part of the data stored at DatoCMS
Data read/write:
- Axios
- REST API
- GraphQL (to get data from DatoCMS)
Unit tests written with:
- Vitest
- Vue Testing Library
- Axios Mock Adapter
Styles:
- SCSS
Stories:
- Storybook
Components structure:
- Atomic Design
Designed with:
- Figma
Images editing:
- GIMP
- Clone the repository:
git clone https://github.com/writecleancode/where2eat-vue
- Navigate to the project directory:
cd where2eat-vue
- Install the dependencies:
npm install
- Start the development server:
npm run dev
- Open your browser and visit http://localhost:5173 to view the application.
