Simple CRM with Nuxt.js

17 hours of recordings of live broadcasts that I did from June 10 to July 12 about creating a simple CRM based on Nuxt.js . I advise you to look at the speed of 2x. The content can be useful for novice programmers who are interested in: Nuxt, Vue, MongoDB, Express, Mongoose.

Important! Treat the information with a high degree of skepticism and double-check everything. This is just my experience, not lessons or instructions for creating an application.

Playlist of 10 episodes of broadcasts:


No.1 Functionality planning and installation Nuxt.js

00:00 Introduction
01:37 Full list of future CRM functionality
03:15 User
04:13 Reminders for users
05:58 Night login)
07:05 Client
08:55 Statuses, industries, regions, services
10:31 Dates of introduction and next contact
11:43 Contact persons, comments and other fields of clients
13:41 Settings page
14:30 Rights restrictions
16:07 Administrator capabilities
16:53 Main screen of the program
22:23 Statistics with graphs
23:31 Log (recording user actions)
26:47 Application structure
28:20 CRM differences from a regular site
30:07 I will try SCSS
34:22 My impressions of the first season of broadcasts about creating a website on Nuxt.js
37:08 I'm not a programmer, check everything, what I say
37:53 It turns out my old broadcasts were reposted
39:45 Installing Nuxt.js
45:25 Differences between SPA mode and Universal(SSR)
47:15 Nuxt.config.js
50:00 Feedback is important!


No.2 Authorization, managers, SCSS

00:00 Introduction
02:15 Login to the program with an error about incorrect data
03:35 Differences in authorization on the site and CRM
05:15 What we save at the time of authorization on the site
08:44 bcrypt - encryption (hashing) of passwords
11:30 User authorization process
15:40 Decryption of the token on the backend
18:50 Creating a new user with manager rights
20:47 Hiding the change of user rights without administrator rights
22:47 How could I bypass the change of rights through Postman (it didn't quite work out to show)
32:18 Hiding menu items from users without administrator rights
36:04 Changing user passwords for administrators
41:07 Prohibiting changing user rights without administrator rights
50:48 Deleting users
52:20 Tried SCSS
58:45 Prohibition to get a list of all managers not for administrators
01:02:22 Adding a free text field for TinyMCE managers
01:09:24 Removing the hashed password from the server response when updating user data (thanks to TheLetslook)
01:21:17 Uploading images inside TinyMCE (answer to the Web VPF question)
01:30:00 End


No.3 Adding clients and setting up lists

00:00 Subscribe to the channel - this is important!
02:36 Managers can only log in to their profile, administrators can log in to any
08:37 Setting up lists of statuses, industries, regions and services
13:16 Correct operation of the label and input bundle
17:01 Client model
17:45 Getting a list of managers and highlighting the current one
20:59 Slightly altered authorization
21:43 Continuation about the Client model
28:30 Sending data to the database when making a Client on the site
39:30 Installing the Vue-devtools browser plugin
45:22 Receiving Client data on the backend
50:23 What data The result was
51:58 Creating a page and a route to get information about one client
58:55 A problem with the format of the date and time of the next contact (solved after the stream)
01:19:00 Problem with displaying the manager in multiselect (solved after the stream)


No.4 Comments and restriction of rights

00:00 Start
01:10 Clients output inside the table
03:37 Auto resale calls
06:01 The manager can only log in to his clients
07:48 Logout for 403 server response
10:03 Comments from managers - theory
17:30 Implementation of sending comments from managers (AD)
02:18:40 Solved the problem with the file (not req.body needed.file, and req.file)
02:26:10 Client data output via id and populate


No.5 Customer contact persons

00:00 Start
02:10 Revision of the admin panel
02:46 The comments themselves were updated
05:30 Took out adding comments and the admin panel to components
11:10 Deleting comments from managers
17:35 Adding comments from managers
23:53 $emit - transferring data from a component to a page
27:10 Component Admin Panel
34:40 Deleting a manager from an existing client
37:34 What are the contact persons of clients
40:56 Creating contact persons functionality
45:50 Why do I need to double-check everything and what do I do
55:45 Returning to contact persons
01:00:17 Creating a component Adding contact persons
01:39:16 Transferring data from a component to a page via $emit
01: 41:57 Deleting contact persons


#6 Log

00:00 Start
01:40 Changes in the client table
07:00 Call from Rostelecom
08:00 v-bind color highlighting by condition
09:45 Search by clients and contact persons
17:55 How to translate localhost with nuxt to https
22:45 Log model
29:20 Period selection for log entries
32:30 Dynamic change in the number of entries
01:00: 30 Pagination correction
01:05:25 Log output filtering (program inputs only)
01:38:30 Date correction on the backend +1 day
01:51:40 Total


No.7 Mobile version

00:00 Introduction
05:11 Modified the log
06:00 Getting unique users through distinct
07:30 Disabling the button :disabled by condition
09:00 What will happen next
11:00 Creating missing pages in the menu
20:20 Planning mobile versions (horizontal and vertical)
31:30 Layout of the horizontal version up to 1080px
01:13:00 Layout of the vertical version up to 730px</p >


No.8 Vue-chartjs - introduction to charts

00:00 Introduction
01:20 About how I pinched a nerve under the shoulder blade
05:25 Installing vue-chartjs
18:45 Adding the first schedule
30:35 Attaching several services to the Client
32:40 Event for Clients: sorting
37:25 Editing events, contact persons (subdocuments)
56:45 Filters in the client table
01:02:32 Attempts to use data from the backend in vue-chartjs
01:40:00 It turned out to use dynamic data for the chart


No.9 Charts chart.js + final edits

00:00 Introduction
01:40 Presented the program to the client, transferred to VDS
03:00 What charts turned out
05:50 Page code statistics
08:28 Chart options chart.js
10:30 Each graph is a component
12:40 Loading dynamic data for graphs
15:50 Generating data for charts on the backend
24:40 Model.aggregate: match, group, sort
29:50 Unwind - splitting the array into lines
33:15 How filters work in graphs
35:55 Graph broken down by month
49:08 Vue-chart.js (and the usual chart.js) pull up moment
56:50 Problem with duplicates of clients in the old version of CRM
57:40 Mongoose unique validator
01:00:00 Regular expression validation in vee-validate
01:02:38 Transferring data from the old version of CRM
01:10:10 How I transferred the project to VDS (copied everything except, .nuxt, dist, node_modules)
01:15:30 What will happen next


No.10 Final review of the project

00:00 Introduction
01:47 Tried SCSS
02:14 Graph Components
02:31 Component of adding contact persons for clients
05:00 Vue-the-mask - mask for the phone number field
07:35 Component of adding events for clients
09:02 Component of customer search
18:00 Component header - site header
19:55 Component admin panel for manager
23:00 Component of adding comments for managers
25:31 Template layout
26:11 Login page
27:30 nuxt authorization- auth
31:50 Main page of the program - table with clients
39:52 Current and rejected clients
41:18 Statistics - vue-chartjs charts
42:28 Log
46:40 Settings (lists of statuses, services, industries, regions)
48:20 Page with a list of managers
48:46 Page of one manager
50:02 Page of creating a new manager
50:35 Page of creating a new client
51:45 Backend
52:40 Client model
56:42 Log Model
57:28 Manager Model
58:40 Setup Model
59:00 Client routes
01:11:50 Generating data for graphs
01:18:00 Continuation about Client routes
01:22:40 Log Routes
01:28:07 Manager Routes
01:30:15 Settings Routes
01:30:50 vee-validate3 plugin
01:31:01 Static Folder (about Nuxt icons PWA)
01:32:00 .env
01:32:30 prettier settings
01:34:32 Nuxt.config.js
01:38:32 Package.json
01:42:10 Next open source project -

Author: Aleksandr Dergunov
Published: 7/12/2020