CRM Real Project | 2024
CRM Project haqida umumiy ma'lumot. DEMO link IT sohasida o'qishni tamomlab real loyihalar ustida amaliyot qilmoqchi bo'lganlar uchun ajoyib real loyihalarga asoslangan CRM projecti. Havola orqali CRM qanday bo'lishi haqida batafsil tanishib olishingiz mumkin.
Istalga turdagi ta'lim tizimini avtomatlashtirish uchun CRM project.
Ushbu project Webbrain Academy'ning shaxsiy mulki shu sabab uni tarqatish va projectni sotish, ham sharan ham qonunan taqiqlanadi.
Ushbu Project figmasi uchun 300usd sarf qilingan. Shundan tushunsa bo'ladiki project siz uchun faqat va faqat amaliyot vazifasi uchun yordam beradi. Uni sotish ko'chirib olish va tarqatish taqiqlanadi.
CRM Projectni tayorlashda quyidagi kutubhonalardan foydalanilgan:
— React Vite Template / ReactJS v18.2
— // TypeScript
— // Redux-toolkit / Redux Query
— React-router-dom@6
— Styled-components
— Material UI
— MomentJS(MUI ucun xolos) / asosan costum(generic date) date ishlatilgan.
1 - dars | Project haqida | YouTube Link
— Bu qanday project?
— Project kimlar uchun?
— Projectni uchun nimalar talab qilinadi?
— Project demo review.
— Projectda qanday kutubhonalar foydalanilgan.
2 - dars | Create Project | YouTube Link
— yarn create vite
— format folder structure
— components / views / utils / root / hooks
— Generic component yasash
— link to github
— git branchga ajratish
— install packages
3 - dars | Route paths | YouTube Link
— public folder config
— single path
— path children
— svgr usage / vite config
— ReactComponent -> .?react
— isPrivate and role
— Generic component view
4 - dars | Configure React Router DOM | YouTube Link
— configure the routes
— create generic route data
— handle 404
— handle redirect home
5 - dars | Building skeleton
— Implementing Outlet
— Building skeleton -> Navbar, Sidebar, Body
— Sidebar skeleton config
— Body skeleton config
6 - dars | Create Sidebar - 1 | YouTube Link
— Brand name
— Logout joylashuvini to'g'irlash.
— Profile component
— default css in root
7 - dars | Create Sidebar - 2 | YouTube Link
— Generic sidebar path implementation
— Active icons
— Open & close arrows
— Child paths
— Open & close child path
8 - dars | Create Sidebar - 3 | YouTube Link
— Logout Icon
— Implement Navlink
— Fix navlink onclick bug
— Active child paths
— Active parent path
9 - dars | Logout Routing | YouTube Link
— Logout path
— Hidden path
— Hidden route config
— generic hidden path
10 - dars | Navbar | YouTube Link
— Creating input
— Creating timer
— Timer config
— Material UI Config
— Creating Select
11 - dars | Calendar / Datepicker
— Placeholder style bug fix
— x-date-picker usage
— DatePicker style
12 - dars | Generic Input
— Create generic input
— create generic icon
— Input usage
13 - dars | Generic Input Optimization
— styled component optimization
— value setter and getter
— placeholder optimization
14 - dars | Analytics page - 1
— Make body scroll
— Make navbar sticky
— Profile z-index bug fixed
— Generic Title and Subtitle
— Generic style getValue function
— Add default value to generic getValue
— Generic card and wrapper
15 - dars | Analytics page - 2
— Generic data yasash va foydasi
— Generic Plus button
— Title center bug fixed
— Generic color picker function for cards
16 - dars | Analytics page - 3
— 15-dars davomi
— Media Data
17 - dars | Analytics page - 4 | Emails
— Test emails with mock data
— Subtitle counter property added.
— Email components separated and completed
— Moliya components separated and started
18 - dars | Generic Date
— Make a generic date
— Generic weeks
— Generic full-year
— Active date
19 - dars | Deployment
— Deploy to Netlify
— Fix width
20 - dars | Breadcrumb
— Creating Generic Breadcrumb
— Passing state through router DOM
— Fixing the route navigation
21 - dars | Generic Table
— Creating a generic table
— Material UI table analyze
— Fixing the route navigation
— Removing un-used codes from MUI
22 - dars | Deploy settings
— Auto deploy netflix config
— Github merge request
— Github pull request
23 - dars | Generic Table 2
— Table header style fix
— understanding MUI style
— Passing function prop to filter
— Create filter container
— Breadcrumb re-place
— Breadcrumb child button
24 - dars | Generic button
— Creating generic button
— Usage of generic button
— Add, delete, primary, save, filter buttons
25 - dars | Generic Select
— Fix generic button bug
— Creating generic select
— Usage of select
— Setting default properties
— Setting up filter container.
26 - dars | Filter
— Creating filter
— Setting action header
— Action click bug fixed
27 - dars | Modal
— Creating Modal
— vs code extension o'rnatish
— createPortals
— Modal Usage
— Props implementation
28 - dars | Lids Modal
— Creating Modal Footer
— Fix delete button
— Fix input style
— Modal Usage
— Props implementation
29 - dars | Lids Edit Modal
— Fixing generic table
— passing params for modal
— Fixing generic select
— Modal Usage
30 - dars | Lids Page
— Creating first class page
— Creating New Student Page
31 - dars | Student Page
— Creating All Student page
— Creating Archive Page
— Creating Active Page
— Configure navigation utils
32 - dars | Guruhlar Page
— Undestanding git merge
— Guruhlar navigation config
— Creating Active Page
— Generic table checkin config
33 - dars | Xonalar
— Bug fix
— Create xonalar mock data
— Create xonalar UI
34 - dars | Checkin Page
— Create checkin UI
— Create logic for data structre
— Create checkin navigation
35 - dars | Checkin Status
— Create Statsu Modal
— Icon logic for status|
— Create weekly checkin UI
— Add new properties on Generic table
36 - dars | Checkin Status
— Create Statsu Modal
— Test ref on onClose modal+
— Create event on modal
37 - dars | Bug fix
— Modal Bug fix
— get mouse data
38 - dars | Xonalar Page
— HR folder structure
— Create xonalar modal
— Create Xonalar Page
39 - dars | Role Modal
— Create Role Modal
— Checkbox explanation
— Create role data structure
40 - dars | Kurslar Page
— Kurslar Page
— Kurslar page navigation config
— Create mock data for Kurslar
— Create Collapsable table
41 - dars | Collapsable Table
— Implement the UI
— Collapsable Table
— Collabsable table mock data
— Fix the bugssss
42 - dars | Collapsable Table 2
— Change UI
— Add button for each row
— Fix input design
43 - dars | Modal / Multiselect /
— Collapsed data
— Create multiselect input
— Fix multiselect bug
— Create child modal
44 - dars | Sub Sidebar
— Create inner sidebar
— Create folder structue
— Configure navigation
— Configure events
45 - dars | Umumiy Sozlamalar
— Create sozlamalar page
— Create upload image
46 - dars | Filiallar - 1
— Configure the route
— Create mock data
— Create filiallar page
— Git flow concept
47 - dars | Sorovnomalar | CallConfig
— Configure the route
— Create mock data
— Create sorovnoma page
— Create call page
49 - dars | Bug fix
— How to debug.
— Navigation bug fixed.
— Fix breadcrump bug.
50 - dars | Manager
— Fix route icons|
— Fix sub sidebar bug
— Create modal
51 - dars | Sozlamalar Talabalar
— Route configuration
— Talabalar UI page
— Folder structure
52 - dars | Backend Config|
— Excel database nima va qanday ishlaydi?
— Excel config
— Sheet Best
— .env config
— expressjs usage example
— excel vs express
53 - dars | ContextAPI Config
— ContextAPI usage explanation
— ContextAPI Config
— User and Mentor Context example
— Multiple context usage two ways
— Context folder structure
54 / #1 — dars | Analytics Page Rest API|
— request data from api
— get analytics page data
— manipulate backend data and utils data
— get moliya data
— get email data
54 / #2 — dars | Analytics Page Rest API
— data manipulation
— get moliya data
— get email data
55 — dars | Lids Page
— Git compare
— Lids page
— Student Context
— Generic reload function
— Hooks Fetch
— Delete item
— Environment Variable
56 — dars | Generic Spinner
— Lids Page bug fix
— Generic Spinner
— Fetch optimization
57 — dars | Generic URL Hooks
— URL params usage
— Hooks replace / URL|
— Hooks query / URL
57 / #2 — dars | Houzing URL Hooks
58 — dars | Lids Filter
— Lids Filter
— Change multi state with a function
— How to costum hooks like useQuery and useReplace
— Default value after refresh
— How to use date
59 — dars | Lids Add
— Lids add
— Input bug fixed|
— Passing props
— Modal usage explanation
60 - dars | Lids Edit
— Edit lids page
— Passing props
— Generic select bug fix
— Update initial state
— Optimze Generic URL
61 — dars | First Class | Yangi Talabalar
— Filter data
— Manipulate modals
— Add Yangi talabalar
— Edit Yangi Talabalar
62 - dars | Backend Students
— Think like programmer
— Get data for Students page
— Student Modal
— Debug fetch and best sheet
63 — dars | Backend Groups
— VS code extensions
— Get / Put / Post data
— Create contants
64 - dars | Checkin
— Navigation bug fix
— Create checking logic
— Create Checking Context
— Get data based on Groups
65 — dars | Checkin Edit
— Checkin Edit
— Modal bug fix
— Checkin bug fix
66 — dars | Xonalar
— Get xonalar data
— Delete xonalar data
— Edit xonalar data
67 — dars | Kurslar
— Get kurslar data
— Delete kurslar data
— Edit kurslar data
— Yo'nalishlar edit
68 — dars | Kurslar | Add Student
— Gruruh qo'shish
— Manipulate backend data
— Barcha kurslar test
69 — dars | Yo'nalishlar
— Get yo'nalishlar data
— Delete yo'nalishlar data
— Edit yo'nalishlar data
70 — dars | Backend Role
— Create Data Structure
— Get role data
— Manipulate role data on UI
— Client UI logic
71 — dars | Backend Xodimlar
— Get xodimlar data
— Delete xodimlar data
— Edit xodimlar data
72 — dars | Sozlamalar Check
— Get checkin data
— Delete checkin data
— Edit checkin data
73 — dars | Sozlamalar Filiallar
— Get sozlamalar data
— Delete sozlamalar data|
— Edit sozlamalar data
74 — dars | Backend Xabarnoma
— Get xabarnoma data
— Delete xabarnoma data
— Edit xabarnoma data
75 — dars | Backend Sorovnoma
— Get so'rovnoma data
— Delete so'rovnoma data|
— Edit so'rovnoma data
76 — dars | Sozlamalar Status
— Get status data
— Delete status data
— Edit status data
77 — dars | Sozlamalar Manager
— Get manager data
— Delete manager data
— Edit manager data
78 — dars | Sozlamalar Mentor | Students
— Get mentor data
— Delete mentor data
— Edit mentor data
Video darslikni xarid qilish uchun quyidagi havolaga o'ting -> https://teletype.in/@webbrain_ceo/video_darsliklar