Today we build Autospace: Complete Parking Management Suite.
Code: github.com/karthickthankyou/a...
This massive monorepo contains approximately 14,000 lines of TypeScript code.
Chapters:
00:00:00 Demo
00:16:26 Setup
00:27:18 Validate script
00:38:23 DB Setup
00:45:40 Basic GraphQL Demo
00:58:40 GraphQL + REST Codegen Demo
01:29:16 Swagger for REST API
01:41:00 Authentication & Authorization
02:01:30 Registration & Login
02:22:28 Switch from pnpm to yarn + Nx
02:32:13 DB Schema
02:52:07 Write all GraphQL and REST Modules
03:11:09 GraphQL Demo
03:26:50 GraphQL Resolve Fields
03:34:11 Typesafe Queries & Mutations with GraphQL Codegen
03:54:12 Setup Next-Auth
04:23:49 UI Library
04:42:46 Forms Library
05:15:20 UI Base Layout
05:37:24 Search Garages Query
06:09:49 Search Garages Filter Schema
06:19:10 Search Page: Setup Map
06:55:48 Render Garages on Map
07:14:13 Advanced Search Filter
07:53:10 Parking Slot Booking
08:57:14 Valet Management
09:32:24 Manager App: Setup
09:52:58 Manager App: Create Company
10:17:42 Manager App: List Garages
10:35:44 Manager App: Create Garage
The video exceeded the limit and could not be released as one video. Next time I will make the tutorial concise with better planning.
Part II here:
• Parking Application - ...
Follow me:
1. LinkedIn: / iamkarthickr
2. Twitter: / karthicthankyou
3. Github: github.com/karthickthankyou
4. Medium: / karthickragavendran
Technologies:
The Autospace monorepo leverages a range of modern technologies and libraries to provide a comprehensive and efficient parking management solution. Below is a breakdown of the primary technologies used in the project:
Frontend:
React: A JavaScript library for building user interfaces.
Next.js: A React framework for server-side rendering and static site generation.
Tailwind CSS: A utility-first CSS framework for rapid UI development.
Material UI: The world's most popular React UI framework.
@tabler/icons-react: Icon set for React applications.
react-hook-form: A library for managing form state in React.
zod: TypeScript-first schema validation with static type inference.
@react-three/fiber: A React renderer for Three.js.
@react-three/drei: Useful helpers for React-Three-Fiber.
Backend:
NestJS: A progressive Node.js framework for building efficient, reliable, and scalable server-side applications.
GraphQL: A query language for your API.
REST API: Standard for creating APIs using HTTP requests.
Prisma: A next-generation ORM for Node.js and TypeScript.
Swagger: A tool for documenting REST APIs.
Stripe: A suite of APIs for handling online payments and transactions.
Shared Libraries:
@autospace/network: Manages network requests and GraphQL code generation.
@autospace/forms: Provides reusable form components and validation using react-hook-form and Zod.
@autospace/3d: Utilizes React-Three-Fiber and Drei for 3D graphics.
Tools and Utilities:
Nx: A smart, fast, and extensible build system with first-class monorepo support.
TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
Prettier: An opinionated code formatter.
ESLint: A tool for identifying and fixing problems in JavaScript code.
Husky: A tool for managing Git hooks.
Thanks for watching. 🙂
Негізгі бет Parking Application: Full-Stack Monorepo with Next.js, NestJS, GraphQL, REST, Prisma, Mui & Tailwind
Пікірлер: 103