Description • Demo • Pages • Installation • Tech stack • Documentation • License
Beep beep. Meet Velocity – app for taxi company. It's not totally complete because doing this project alone is very difficult. The main goal for me was to learn how to use Vue with TypeScript in anticipation of the third version. Also, I never wrote the server side for applications. First tried Node.js, Mongo, Mongoose in action.
All components are ready on the client side, it remains only to write the logic. The server uses stubs to respond to pages. Only the logic for working with the user is ready: registration, authorization, password recovery, changing information about yourself, loading the avatar on S3.
For unit tests I used Jest. Tests cover only client components, approximately 80% of the entire code. Also, the application was not tested in most browsers, since I did not have a goal to make applications for production, I wanted to learn more about new things.
As a result, I realized that Vue in conjunction with TypeScript is still not reaching React. Poor IDE support, not working templates with prop types highlighting. It forced me to switch from templates to JSX, where I met new problems. Small community, poor documentation, etc.
If app is taking a long time to load – please wait.
Heroku will spin down app to save resources, if it's not accessed for a certain amount of time. Thus the slowness is caused by having to start up the entire app again.
Application unavailable for now due to AWS free tier expiring. You can run it locally after filling the .env file with all keys.
| Page | Description |
|---|---|
| Home | Home page |
| Login | This is a page where the user can log in, register, receive a password reset email |
| Reset password | This is a page where the user enters a new password. A token is required that comes to the mail |
| Analytics | This is a page with various graphs and statistics on the project |
| Vehicles | This is a page with a table of all the vehicles that can be filtered |
| Reminders | This is a To Do List Page |
| Map | This is a page with current trips |
| Chat | This is a page where you can communicate with customers |
| Settings | This is a page where the user can change information about himself, choose a theme for the site |
| Not found | Not found page for 404 error |
| Page | Description |
|---|---|
npm ci |
Install dependencies from package-lock.json |
npm run dev |
Run dev server with HMR |
npm run build |
Build app for production |
npm run start |
Serve production build locally |
npm run analyze |
Analyze webpack bundle |
npm run test |
Run unit tests |
npm run lint:write |
Lint and fix all files |
npm run prettier:write |
Run prettier |
| Technology | Description |
|---|---|
| TypeScript | TypeScript is getting more and more popular in the Front-end environment. Myself, I have loved it since I used it for the first time. And I will continue using this in all my next projects for sure. |
| Vue.js | My main JavaScript framework for building user interfaces and single-page applications. |
| Vuex | A main state management library for Vue.js. This app is fine without Vuex, but @nuxt-auth module requires activated Vuex. |
| Vue Router | I don't like built in Nuxt.js `pages` folder so I use my own router config. |
| Nuxt.js | It simplifies the development of universal or single page Vue apps. |
| Nuxt property decorator | Handy ES / TypeScript decorators for class-style Vue components in Nuxt. |
| JSX | Vue.js doesn't have good TypeScript support using a template so I switched to JSX |
| MJML | The only framework that makes responsive email easy |
| Chart.js | Chart.js is an easy way to include animated, interactive graphs on website |
| Leaflet | Open-source JavaScript library for mobile-friendly interactive maps |
| Jest | Framework for unit testing |
| Storybook | Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient. |
| Technology | Description |
|---|---|
| Node.js | Node is a popular choice for building backends largely due to the fact that it shares the same base language, JavaScript, as many frontends. |
| Express.js | The fast, unopinionated, minimalist web framework for node |
| MongoDB | The most popular database for modern apps |
| Mongoose | Mongoose provides a straight-forward, schema-based solution to model my application data. |
| Yup | Dead simple Object schema validation |
| AWS S3 | Object storage for users static files |