Build and Deploy a Full Stack MERN Application With CRUD, Auth, and Charts Using Refine
In this one video, learn how to develop a fully functional full-stack MERN dashboard application with complete CRUD functionalities, authentication, pagination, sorting, filtering, and more!
⭐ refine - https://github.com/refinedev/refine
💻 GitHub Code Client - https://github.com/refinedev/refine/t...
💻 GitHub Code Server - https://github.com/refinedev/refine/t...
📙FREE Ultimate MERN Guide: https://resource.jsmastery.pro/mern-g...
📚 Materials/References:
GitHub Gist (Code) - https://gist.github.com/adrianhajdin/...
Assets - https://drive.google.com/file/d/1KsXj...
Interfaces - https://drive.google.com/file/d/1ibOH...
Figma design - https://www.figma.com/file/QLU3mZJOsm...
Google console - https://console.cloud.google.com/
Alongside building this great application, you'll also learn the following:
1. Node.js, Express.js, MongoDB, and React.js together form the powerful MERN stack
2. Material UI: The most popular UI Component Kit nowadays
3. TypeScript: Yep, you heard that right; we’ll use TypeScript on this project! No previous typescript knowledge is required
4. You’ll learn how to transform a Figma design into a fully functioning website
5. You’ll also learn how to optimize images and store them on the cloud using Cloudinary
6. Provide a quick and easy way for your users to log in and register using Google Auth
7. Most importantly, you’ll learn how to build React-based CRUD applications quickly using refine.
💻 Join our Discord Community - / discord
🐦 Follow us on Twitter: / jsmasterypro
🖼️ Follow us on Instagram: / javascriptmastery
💼 Business Inquiries: [email protected]
Time Stamps 👇
00:00:00 Intro
00:05:39 Setup
00:20:00 Sidebar
00:29:15 Refine
00:39:33 Home
01:12:41 Properties
01:22:09 Create Property
01:48:40 Backend Setup
02:08:11 Routes
02:36:48 Displaying Properties
02:51:02 Pagination, Sorting & Filtering
03:18:20 Property Details
03:45:31 Agents
04:30:01 Deployment