Building the Ultimate Auto Space Parking Application
Heads up!
This summary and transcript were automatically generated using AI with the Free YouTube Transcript Summary Tool by LunaNotes.
Generate a summary for freeIf you found this summary useful, consider buying us a coffee. It would help us a lot!
Introduction
In this article, we will walk through the development of an advanced parking application called Auto Space. This application incorporates several modern technologies such as React, Next.js, GraphQL, and 3D mapping to deliver a top-notch user experience. We'll cover everything from the architecture of the application to the implementation of various features such as booking slots and managing parking locations.
Overview of Auto Space
Auto Space is a full-fledged parking application that enables users to efficiently find and book parking slots. The application includes a customer-facing UI, a manager interface, and supports valet service functionality. In this section, we will go over the basic structure of our monorepo setup featuring multiple applications within a single repository.
Monorepo Structure
The Auto Space application is organized as a monorepo featuring multiple applications:
- Frontend Applications: Customer-facing, Manager, Admin, and Valet apps.
- Backend APIs: RESTful and GraphQL APIs to handle various functionalities.
Technology Stack
- Frontend: React, Next.js, Tailwind CSS, TypeScript.
- Backend: Node.js, NestJS, Prisma, PostgreSQL.
- Mapping: Mapbox API for 3D mapping and location services.
- Payment Processing: Stripe API for managing payments.
Building the Customer-Facing Application
In this section, we will implement the customer-facing application that allows users to search for available parking slots and make bookings.
Setting Up the Project
First, we will set up the project using create-next-app
, enabling TypeScript and Tailwind CSS:
npx create-next-app@latest autospace --typescript --tailwind
Configuring Tailwind CSS
Tailwind CSS is a utility-first CSS framework that allows us to build custom designs quickly. Configure Tailwind CSS in the tailwind.config.js
:
tailwind.config.js
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}", "./public/index.html"],
theme: {
extend: {},
},
plugins: [],
}
Implementing the Search Feature
The primary feature of the customer application is to search for garages. We will create a search form component that allows the user to select dates, times, and filter for types of vehicles. Here’s a simplified version of our search form:
const SearchForm = () => {
// State variables
const [startDate, setStartDate] = useState("");
const [endDate, setEndDate] = useState("");
// Function to handle search submission
const handleSearch = (e) => {
e.preventDefault();
// Perform search query
};
return (
<form onSubmit={handleSearch}>
<input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} required />
<input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} required />
<button type="submit">Search</button>
</form>
);
};
Creating the Map Component
The map component will display available parking locations using Mapbox GL. To set this up, let’s create a Map component that triggers API calls to fetch garage data based on user input:
import { useEffect } from "react";
import MapGL from "react-map-gl";
const MapComponent = ({ setBounds }) => {
const [viewport, setViewport] = useState({
latitude: 37.7577,
longitude: -122.4376,
zoom: 8,
});
useEffect(() => {
setBounds(viewport);
}, [viewport]);
return (
<MapGL
{...viewport}
onViewportChange={setViewport}
/>
);
};
Booking Slots
When a user decides to book a parking slot, we will handle that through another function that interacts with our backend API. We’ll incorporate validations and display success messages based on user actions.
Summary
In this section, we have set up a customer-facing application for Auto Space with a search form, map component, and basic functionalities necessary to reserve a parking slot. As we progress through this project, we will continue to build out advanced features such as user authentication, garage management, and payment integration with Stripe. Keep an eye out for more detailed guides covering these aspects in subsequent sections!
Conclusion
The Auto Space application offers a powerful solution for parking management. This guide has introduced you to building a 3D parking app with features tailored for customers, managers, and administrators. The knowledge gained in this guide can be applied to various real-world applications in future developments.
Stay tuned for next sections, where we'll dive deeper into backend integration and UI enhancements.
hello everyone today we are going to build Auto space it's a parking application we are going this is again
this is a monor repo we are going to have four frontend applications this is a customer facing application I have
hosted it on autospace docar tech.com and we have a cool 3D scene here we will build this from scratch using 3js it's
interactive and we have uh this is a manager application you can see from here and also we have this School logo
here okay like Vehicles parking in a parking slot and then we have the an application for this is the application
three application in verel from the same GitHub repository so I chose to not host the admin console online and this this
application has two apis you're going to build this frd API I'm using swagger UI and you can we can actually interact
with the with the backend this actually backend okay we can actually interact with the database using this this GPI
interface and predominantly we going to use the graph c one so that's what we are using in the
applications so I here I'm using App Explorer I love I like this interface Bas it's much simpler than actually
typing the queries ourselves so these are the stuff we going to build let's have a simple
demo I I have already logged in with my Google account we can log in with credentials and Google in this projects
I'm already log in with the Google account and I'm going to search for garages so I have some sample garages uh
created here we have three kinds of filters Happening Here one is the Geo query actually when I move
here you will have additional things right this basically whatever comes inside that lat long rectangle the bound
we're going to do that location Geo query second one is the date query which is we going to meticulously keep track
of the number of slots each garage has and when already if there are no slots available in this particular interval
then we won't display that garage itself so that's a second filter that's a date filter third one is you can we can do
this these additional filters like types that's we we have we support four types of vehicles we also support the
everything else you can also reset it we do some advanced stuff using react hook form here so once we are s happy with
the date maybe I'm going to book for tomorrow and when I select the start date start time now currently the start
time is is later than the end time right and you will get this error message here automatically it pops up so
have this cool icons that appears based on the time we select and also this Arrow specifies the
passage of time from to okay so I ended up giving a okay let's do a booking so I'm going to search for a car
slot and these are the slots okay so let's do this um so imagine I have I need a parking near the
actually another form but we we get the time started start time and end time from the search
driver from from some other location for example the parking slot the booking starts at 6:00
659 right so at 659 I cannot come here but I want some guy or yeah some person a driver near
charge for pick up and drop off you may select a different location for the drop off okay so what happens is that the
booking this is a stripe interface but you can see that we have a really good um listing of uh charges starting from
the parking valet pickup charge wallet charge drop off so let's do the booking okay so I have entered my card
details let's proceed to pay once the payment is successful automatically the we will be redirected
to the URL / bookings page and you can see the booking there and this is actually a link on clicking this this
will actually open Google Maps with a with that location okay that's the location of our
okay let's log in with our valet account also we have I use reuse the same 3D scene here but this is not
assignments in the valet valet interface one we have a pickup at 12:29 a.m. on on May 23 so that is going to happen at at
this point and this is the starting point this is the end point the B is the garage so this is from the pickup
along with the Lo along with the directions okay that's the directions and uh the driver can follow
that so I'm going to accept this assignment once accepted this thing will disappear from
the pickup so that not not anybody else can access that now in the my trips that is showing up and also it is displaying
uh the wallet can pick up and when the wallet picks up the status changes and uh the card still exists here until the
use until the wallot checks in I'm going to go here the manager has to open the bookings for the particular garage that
this this is the garage this is the vehicle that is same code right also they can see the timeline of of of the
happenings also we have we can search for the car number here now the manager is going to check
in once check in that card will automatically move to the out page you can now see the updated a
timeline and when we refresh now in the my trips page that card will disappear basically that
assignment is done for the wallet now I'm going to go and accept the drop request okay this is this this starts
from the garage that is near the that it's a static map okay that's that's the garage location
and the the the user requested to drop the vehicle in that airport I'm going to that that's 11 km
and I have to be there at 629 so I'm going to I'm going to accept the request and that disappears from the
page again there is a secret code now the valet is assigned for the for this assignment now the wallet
reaches the manager or or whoever in the gate they check out the vehicle now it goes to the
resol and now when the wallet refreshes the drop button enables the valot takes a vehicle goes to the location
and they match the passcode and they drop and the action is successful the the card moves out from the drop now the
customer now there they don't have any ongoing parking bookings for the customer but in the past they can have a
look at started with the booked State ballot assigned Pi picked up checked in assign for checked out checked out and U
description also uh AI wrote a note in the description which says we promise not to judge you if you cannot parallel
park okay yeah that's so kind of you also we have this address I don't know where that address
go inside in the New York City I'm going to be just play somewhere else actually yep so you can take you can actually
but that's an improvement you can do I'm going to place it here because that's what that's where I did not see a
parking slot lot fine and I'm going to get some pictures for this or some real pictures
out I'm going to have a few pictures and the next one for from eigor misnik these are very
helpful pictures thanks ran iic let's get the pictures these are the three pictures I just downloaded from
form okay so I I have not created the slots actually so I'm going to generate like five slots
we are also getting the height width the size of the garage so that people can actually use filter filter them so I
have U let's create six plots for car and also I'm going to have a few for four slots for heavy so that is a bit
garage two types of slots we are going to create here on once you're happy I'm going to
submit first the images will get uploaded we are using cloudinary and then the garage is successfully
can introduce um bicycle slot bicycle slots number of slots 12 bicycle slots it's going to be um tiny Six and 2
ft width with some height so you can add more or maximum 10 okay yeah I for so it automatically updates
here and the the manager can view the garage here the bookings in the garage here and this is the admin
works and these are the four three types of U three types of slots we have the cycle can set the start time end time we
can set the ve vehicle number I don't know if cyes have vehicle numbers but yeah so you give uh you can
technically get help for your cycle parking as well by collecting this pick up and drop off locations and you can
book the book it and we already saw this flow earlier and we have other stuff like the managers can um can manage
valets we have like two valets right now they can create more with the license ID and so on the admin
directory in the in the desktop and we want to create a directory called autospace and let's open that in vs
code let's create a new project with [Music] pnpm I okay with the name I'm going to
delete the uh main property because it's the root of the monor r we don't want we don't have anything to execute so we
don't want the main file Main property and I'm going to enable private so it's not
publishable let's delete the script that's okay now I'm going to create the pnpm workspace yaml
whatever projects we have inside the apps directory whatever projects we have inside the lips directory are going to
be part of this monor repo let's create this um directories apps and lips and let's also create a dog
ignore that will have the env. nextt so these are build directories build dis. nextt and node mod obviously we don't
want to commit that in our git repository don't want to commit the gitv that's it now let's create the
projects I'm going to initialize a g repositor in the root then let's go inside the
apps and um let's run first I'm going to create a next application let's call it
web and also meanwhile let's also initialize the next application this is what we're going to use for the back end
we're going to create a rest API graph API in the same project I'm I'm going to call this
API so both of them are asking a few questions which package manager would you love to use how to use I'm going to
specify pnpm for the back end because that's what we are going to that's what we are using in the mono
repo and next next JS is also asking a few questions I'm going to enable typescript yes lint Tailwind SRC app
runs in port number 3,000 I'm I'm okay with that so by default nextjs also runs in the port number 3,000 if 3,000 is not
available it will go to the next port number but instead of that I want to we we are also going to have multiple front
applications so I'm specifying 3,001 and when we create the front end for the manager admin valy we will
development let's clean up the terminal let's allot some terminals specific specifically for the web
root fine now a problem is the API files are not being tracked in the root G repository we initialized because when
we initialize the nest application it creates its own. kit it initializes it its G repository which I'm going to
make sure you're inside the API directory and you're you just started right so I haven't even committed
anything so I'm going to delete the do kit and refresh the source control panel and you will see
the API file is getting tracked in the root G repository we initialized that's it now let's we we
maintain a naming convention I'm going to have a spa at Auto space before the our applications and uh
typescript I'm going to install typescript as a depth dependency but we also have to specify this hyph W that's
root instead of going inside and inside the library application so they have this U feature so I have to mindful
going going to have a simple TS config a basic one we will actually extend this from inside our libraries also TS config
Json and so I created TS config at Json file and I'm going to have a few compiler options the target is going to
be yes next I'm going to have common jssm module because we have both the front end and back end code in the monor
repo so common JS works fine good and I'm also enabling the strict to true and I'm excluding the node J node
modules so that is the basic TS config now inside the sample lab I'm going to create one more Ts config that will
extending the TS config.js on from the root I'm also adding the out directory which is going to be dist and the root
directory is going to be dot which is whatever inside this directory fine let's create our code now
I'm going to create a index.ts that is going to have a simple add function which gets two numbers and
it Returns the addition of that fine now we already have typ installed in the monor repo so I'm going
build that is going to run the tsse and we get our build disc folder okay this is a yes module
module JS JavaScript compiled code Also let's modify the disc the main to Target the dis /
index.js and also we have to add the autospace slash inside that that's the naming convention we are going with we
have our library ready I'm going to now install that as a dependency in both our web and API
node modules you can see the autospace SL sample lib now we install more dependencies like forms Network
libraries we will get everything inside this at autospace directory in the node modules we have our dependencies now in
the page let's clean up let's run the application first let's rename the St start Dev to
running yeah let's also clean up the front end the next the page we don't want all these
things let's delete that let's also go to the globals file and I'm going to delete all the dark
mode stuff installed created by the nextjs this is the front end this is the back end now let's
function and let's render that now we will get that number here okay similarly let's do the same
let's import maybe let's go to the app controller that's what we getting this message um hello world let's go to the
service file I'm going to import that because we installed it in both our applications and I'm going to return
Plus add going to have some number here and for the back end you have to actually refresh because that's an API
call and we get the response so that's how we have a library we build the library we import
that and we are using that Library okay so we have a basic monor report set up we have two applications
validate script that's going to run the formatting linting type checking in the whole monor
repo let's do it let's start from installing the prettier also we have to specify that
have three scripts first we going to have the format script that we run the pr here that is this you're running that
I'm I'm I'm targeting all the TS TS6 JS js1 files inside the apps and lips and I'm ignoring whatever inside the kid
the prettier configuration so um njs already came with this preter RC I'm going to just drag that into the
check to see any formatting issues in the whole monor repo there are a lot of issues you can now run the
controls that will be fixed but here actually there is a problem with the es lint es L is uh struggling to work with
particular thing off about the Prett I'm going to inside the rules in the es land I'm
semicolons so you also need the prettier configure prettier extension so when you just control s automatically it will be
formatted you can do file available I'm going to just run the for format right script okay that will automatically fix
a lot of formatting issues you can see right all these things are formatted you can see the comma the
semicolons went away this uh mostly the semicolons also this double quotation I enabled single quotes
right fine that is format now on writing on doing the format WR or format check that checks the whole monor
parallel this is recursive so it's going to recursively look inside all the applications packages the apps and lips
inside the monor repo and it runs a TSC command if it has okay I have to add it we already have lint so probably when I
two two applications the njs the back end one has this link command we have the s l we have the s l configuration we
just added the pretti rule right similarly we have the link in the web also the front and the nextjs both
recursively and also they are going to run in parallel so we get so it saves some time now look at this when I run
command so you can see the they they started in parall the API was done first and then the web was finished yes L the
tsse command TSC we already have typescript right we enable typescript for both the front end
and back end so we can use this T TSC with a no emit flag fine similarly I'm going to have
the same command script in the print end also so this runs the TSC but it won't generate any compile JavaScript it just
checks for type type issues let's do the same for the sample lib also for building we we use a TSC
have two command I mean okay yeah we have all three ready fine now let's create the validate
script I'm going to first run the format right and then I'm going to run the pnpm TSC and then we will run the pnpm
link this is is not parallel this is sequential we first fix all the automatically we will fix all the
script so it runs the formatting first and then it started yeah and then it ran the TSC commands throughout the Monaro
fine now I'm going to do one more thing let's also add the build command Okay sometimes building while
building we we catch some issues this is going to Target all the build scripts right we already have them
so when we run pnpm parallel recursive run build we're going to run build script in all the three applications we
have right now three projects now let's do the validate script it automattic it runs the format
log the API one did not generate much Nest build and then it just done this is also the sample also simple
finally so we have a really solid validate script now now I'm going to create a pre-commit
hook we can manually run this anytime Nothing Stops but I'm going to run this in a pre-commit hook so that nobody can
commit without satisfying these checks okay so I'm going to run the use the husy init package I'm using pnpm DLX
it is an equivalent of npx so I don't have to install P husky in it locally or I don't have to uh run any outdated
versions of H it PP PDX husky in it will set up husky in the whole monor repo and then we will install the dependencies
that it added in the package.json okay so it added this husy directory with some um hy. S I have no idea what
commit it runs a validate command script and if it fails the commit is going to be is going to
fail and it also added um a prepare script in the package of Json it added husky it installed husky as a de
an error okay that's a type error let's commit the code now so this Adcom alas will add
everything to the stage to the stage it will stage everything and then it commits the code so add validation
script this should fail actually it R solve the formatting first and when it reach the TSC it failed and it it
can have the error in the sample lib can have the error let's put the let let's put this
oh yeah find that yeah the error is here okay cannot assign num because it's a constant remove that now you can commit
libraries consuming the libraries we have a really good validate script we have pre-commit hook setup
fine now let's create a local database I'm going to use um doer compose you have to make sure that you have Docker
inside the API I'm going to create this Docker hyph compost. yaml so we're going to have only one
service which is I'm going to call this autospace DB going to use the post image and use the port number 2000 maybe let's
environment variables here post post password but when you are having working with dealing with a remote actual
production database you have to be really careful about these environment variables but this database is going to
run in my local computer so yeah and also we have one volume to persist the data fine now I have the doer desktop
where I installed and running now go inside the API I'm going to run the docker compose up hyph D for
a container with the name same name I'm going to delete that let's run the docker compost once
dependency and you can use Prisma in it to initialize Prisma in this project which created a Prisma folder with a
schema file which is empty right now it will auto also create this EnV direct file with this database URL now let's
configure this database URL based on the dock the the environment variables we added in the doer compose it is post
post and password the username is post the pass the password is password the port number is
2010 and the data this is database name that is post class that is it we have the database schema
now I'm just checking if I can access the Prisma studio now okay so it has error because now we
don't have any model so it ask it is asking me to create any model it is also giving me a
sample let's create a basic database requirements that is required for the authentication we're going to
use next to for this and we going to actually manage all the user information in our database we're not going to use
this video we're going to manage our own user information in our own database using next
Au so these are the models we have this user model with the uid we manage the created and updated
dates this this at default now you'll make sure that whenever a row created is created in the user model you will track
that datea automatically date time also this at updated make sure that whenever we update this
database will keep track of that date time and we have the name information now let's go to the admin
and uh this primary key has a foreign key is a foreign key to the user table as well okay so we cannot create an
admin with an user ID that does not have an entry in the user table okay now then we have this
password okay the password is going to be hashed it's we don't we don't save plain passwords in the database the
is au provider so right now we have we enable Google and credentials we can add more but that's what we are going doing
in this project this credential will need this credential entry for the user with the email hash
to password for the Google we we we cannot have the password hash right so for the Google this credential is not
going to be there but just the Au provider with the type of Google and this U is going to be the primary key
and the foreign key for the user table that is the minimum setup we have here for storing the
okay as we can because I'm actually uh forgot to clean up the volume we deleted the existing service
it okay so the the database migration happened and also it generated the Prisma client now we can open the Prisma
okay yep so in this section we set up a local running Pro database we set up Prisma we did the migration now we are
our database is ready with the tables that are required for doing the authentication okay so we have our basic
monor repo setup ready we have our front end and backend applications created we have a local database running and we
have set up yeah so let's set up graphql in this section we will be creating a simple CR
operations through graph C that is going to interact with our post database so first let's start with installing the
dependencies we'll start with the core graph package and then the Apollo SL server we are going to use that as a
slash Apollo to integrate the n JS with upo fine now let's go to the app module here we have to import the graph qu
module the installation is going on okay now we can install the import the graphql module so for in the for root
we're going to set up the app driver and so on so here we have to pass a type the driver
config here we have to pass few things like driver is going to be Apollo driver and I'm going
to enable introspection so uh the client sometimes need wants to that the client which is consuming the graphical API may
want to get the schema information so I'm enabling the introspection and I'm going to enable
GS add GS the field solve enhances so basically in the field resolver sometimes we may have to add o guards
where we will be creating that in the upcoming sections to protect field solvers we have to enable
this and uh let's also specify the schema generate generation the location is going to be the current
directory from the current directory we're going going inside the SRC and we'll be generating the schema SL
schema. gql file here whenever the njs file njs server runs it it looks for the whole uh app
module the graph modules inside it and it will generate a graph schema out of that typescript classes so that's why
this is a code first way of generating graphql API creating graph API and finally I'm going to
enable so by default the number scalar mode is is float I'm modifying that to integer so basically we are creating
typescript classes right so there we are going to specify a number the number property type and in graph we have both
integer and Float right so by default I want numbers to be converted into integers in the graph schema
file so we can switch between float and integer here but I'm going to go with the integer
so we have set up the graph C so next we have installed the NS config to use the environment variables so I'm installing
the ns/ config I'm importing the config module and uh we'll add that here to the root app modules
Imports we have one more thing okay we just installed a few dependencies and we have just added this code right we have
one more thing then cjson I'm going to add a plugin here so first let's start with the uh at
nj/ graph we will also come back here and we will add the NS Swagger for the rest API okay so we have to add
this there are some benefits okay so that's the ca plugin I'm adding here right the graph is ADD
as a plugin in the CLI so we have some benefits like annotate all input objects automatically I don't have to specify
all the fields with a field decorator with a field type and the nullable will be automatically be derived from this
and inserted in the schema so that's why I'm adding this fine we have we have set up
okay we're going to create a mahle module it's going to ask for a module name the resource name let's give it
users because we already have a user table and we will just create a simple code operation for the user and we are
going going to do code first way of graphql so I'm selecting that would you like to generate code entry points
automatically because the server was running it was stuck in an error and when I generated what happened is in the
here it comes with one entity comes with two dto for creating and updating the resware is going to
have three mutations for creating updating and removing and two queries for finding all finding one user the
service file is going to have all the business Logic the resolver file is like a router like it gets the request like
here you can see like three mutations and two request two query two queries right so we will have all the business
logic inside this surveys and we will just use that method we will try to keep keep this resolver file
um christma service file I'm going to create a u folder we will will delete you will delete these things I'm just
copying inside it okay we are just importing the Prisma client from the this is the generated
one whenever we do migration or whenever we do Prisma generate it will it will generate this types and we
okay now the Prisma module we can add the Prisma Service as a provider so later we will simplify these processes
right we will create a Prisma module we will make that a global module so that we don't have to keep inserting
injecting the services into the providers so I have to do this first and then inside the service I can now
we have to I missed to do one thing like U we have to first modify the dtos and the object type
let's have it as a have the schema fil side by side so only the uid is the required mandatory field right the name
is optional these are autogenerated everything else is optional so also I don't have to
annotate every field with the field the Creator the uid is string okay this is going to be Sim same same for all other
the okay so there is a type error I have to pass the uid here and also okay ID is um string let's
just use string there now we can just use Prisma instance to create the user data and we can just pass the input
object and typescript is happy and let's do the find all user. find mini that's it okay now
Explorer and you specify the URL here which is Local Host 3000 SLG graph but it's giving me an error you can just
running but when I try to access it in Cas I think it's a course error so in the main file I'm just going to
up actually we will come back here for enabling course we will be actually specifying the actual exact Origins what
from from which Origins the API can be hit including our own um domain this playground The Local Host and so on but
right now it's this is sufficient for now for testing a crud in a graph qu you can see the query and mutations here you
have two queries for user users mutation create remove and update let's do the create one
because that's what we implemented I have to only pass the U ID from here let's say we have okay user
a a light way of building graph C we don't have any sorting filtering capabilities yet right think about it
when you have there are a few problems so this entity is not directly connected to the schema we have the database
schema right what if I change this uid to ID this guy won't know but actually we will get error here okay so this
create user input will have the ID and this will have a different the Prisma will be expecting a different one but
package okay this package I this is just a code General package it's not a dependency I wrote uh you can spe you
can generate a graph Q resource that is going to create a lot more DTS for filtering sorting finding
pagination and so on and everything is going to be derived from the Prisma types you can generate graphql resource
generate all these commonly used uh types Prisma service with a Prisma Global module common input types and all
resources and uh our graphic AP will be a lot more deeper and Rich compared to what we have
here so we have a really simple graph G setup here we have a query we have a we have one mutation ready I did not I did
I did not implement the remove user and update user because I'm going to delete that code
graphql and rest modules okay actually this is one module with both the graph qu and rest rest
pagination uh skip take cursor um wear filtering sorting even distinct okay all these things are there
we have this create update and everything is going to be imp is going to implement the types from the Prisma
so whatever we build in the the API will directly raying on the types that got generated from the
dependencies first one the dependencies that we need for implementing the rest AP I'm not going to go too incremental
we saw a simple example how to create it using nestjs CLI generator uh we did not have all these
facilities right so so initially I was planning to go step by step first maybe we could have
created the graphql first and then we would have created the complete one but I'm going to directly create the
complete version with the graph and API so let's install the required dependencies go inside the
API we need the nestjs Swagger we need class validator and class transformer for creating the
validations okay so we also want to include one more package called sj/ GWT because this code is already is also
focus on that in an upcoming section so in order to satisfy the typescript I have to install njs
to sign and verify the JW tokens okay we have all our dependencies ready now let's create I'm going to use
later we will create for other models as well now I'm going to just add for the user this will create automatically
create the common directory with all the O guards even Prisma service and module uh types file you will
see just won't ask any questions uh we are we rely on the flag actually so I'm also printing all these files and
we have skip take their number this is a search value the order value actually we will you we will further
extend this base query dto inside the model we are searching but which field we are sorting this is s order but but
model and we will set that as the field the search field and the sort field this is the common DT for graph CU
we have all the the daytime filter string filter string list filter which is an array of which which will help us
to filter an array of string in filter float location filter we need this this project because we have Geo filtering of
garages and also page input so we have the Prisma service this is exactly what we had last time we have
Prisma module which is this is a global mod module we have to actually add this in the app module let's do it we have to
import the Prisma module now we can automatically inject this is a global module so we can automatically inject
Prisma service anywhere we want and we have a simple types here rle and uh get user type you will come back
we have the users now let's U work with the graph CU now starting with the entity you can see that the the user
class is implementing something the restrict properties is a custom type utility so it gets the class
it gets the type so we get the user type from the Prisma client the user type has these scalar types youu already created
at name these objects these are the joints other tables actually credentials out provid and
admin so it restricts okay they can only have these properties and also along with the type okay key of T type of T
they cannot have anything else you'll see it in action so you can command period control dot you can implement the
to be in sync with the database you cannot remove a class you cannot add an additional class okay types scpe won't
credentials these are field resolvers okay we will deal in the graphql use as field resolvers we will resolve these
fields fine now one drawback is we cannot do this the name is optional right in the schema the name is optional
but you cannot do this because of the design I came up with okay that is a short that's a shortcoming okay when I
API this syntax we cannot use so for that we have to use the nullable field field decorator with the nullable
database schema for some reason if for example if we have a password here I don't want to include that here right so
in those cases you can use the omit utility type you can mention for example let's mention the name now you cannot
is a pattern we will use throughout the application okay let's add the name let's also decorate that
fine okay let's move to the dto create D I'm using pick type from the next graphql so I'm going to pick pick the
uid first and the name the good thing is I mentioned the name as a nullable property right I will show you in the
generator graph schema in a bit that that will get transferred the nullability or nullness I don't know the
create user input object as well also when you want to you can also add more things here like age for some
reason if you want you can add Nothing Stops right this is the create user input dto the update I'm using I'm
extending the partial type of the par type of whatever we get in the create user input obviously you can add more
here I making the primary key mandatory the primary key is not User it's not ID it's U ID right also I'm I'm not like
doing this right oops U ID fine now I'm not doing this even the type I'm getting from the
user object that is from the Prisma client okay you a string so when the database changes when I CH when I go to
database and change the U to number I don't have to come back here and change so we modify the entity we we
pick the type from The Entity this is the entity okay the class I'm picking whatever we I want from for the for
creating the user also remember you can add more Fe add more Fields here for the update I'm getting the partial type of
the create user input and I have to specify the primary key okay that's all for create mutating
DS let's look at the queries dto the first one is the find many Argus arguments that has
all this is for this is for filtering this is for sorting this is for page ination actually we will use Skip and