Build a SolidJS User CRUD App With LocalStorage Crash Course With Deployment to Vercel in Browser

uh Hello friends welcome to this video so in this video we will be talking about a new framework solid

JS which is very popular among developers and we will be trying to

build a user cred application inside this it is very much similar to react but it is very much

performant it is very effective in terms of uh it doesn't have virtual Dom as

supposed to react chers we will be looking at a full crash code full

stepbystep tutorial to how to build this uh CA application so we will be storing

the user details such as name email address profile picture country and we will be having actions such as you can

edit the information or delete this so we have a simple form right here where you can actually write uh the name of

the user then you need to write the email address and from your file system you

can upload a image file right here and then you can write

country so now if you click the button uh this alert box will be shown by sweet

alert library and you will see one record has been added so we are actually using base 64 code to actually embed

images you will see that so this is the actual state of the application if I

close this window and again try to go to the same URL you will see that it is

actually storing these details in the local storage and you can see you can delete this as well

so if I again open it you will see that these details stay in the browser because it is stored inside local

storage so in this way you can add some more entries like

this so we can actually pick

so one other entry has been added and we have this edit button uh if you click the edit button it will look something

like this you can change the email address or name let me make the modification click on okay so now you

can see that the name has been simply be changed right here you will see that name is changed so in this way you can

add as many entries as you want so it is not stored inside database

it is just storing in the local storage of the browser of the specific browser I will also show you how to deploy this

application to versal which is actually a platform where you can deploy your Cloud applications so for building this

we are using solid JS which is a new framework a reactive JavaScript library

and it is very much performant it doesn't reender whenever

your Dom changes whenever your state changes as opposed to react ja which actually uses virtual Dom this solid ja

doesn't use Virtual domor it doesn't require you to actually refresh your components whenever your data changes

inside the component so let's suppose uh we actually write some record

right here we add the record so when we click this add person button

so it will only update that component which is affected by this data it will

not renter the entire application as opposed to react CHS which uses virtual dor so this is the

main uh benefit of using solid JS which is it is very much uh beneficial in

terms of uh you don't need to rerender the entire application it it

only uh renders the component which are affected by the data so you will see you

will be looking at when we develop the application from scratch so the whole source code is given in the description

of the video so you can purchase it from Pro Cod store com from my website the link is given in the description so you

will actually get a zip file uh from Google Drive after you make the payment so the link is given this will be the

directory structure of the source code you will see we will be writing jsx code it is similar to react

CHS but it uses signals and store so it's a reactive Li

library and uh it is based upon Primitives and it uses a concept of uh

create signal signals are very much uh the concept in solid JS which allows

them to actually update only the components which are affected with the data not reenter the entire application

so this will be the source code you will be getting after you make the payment if you need the source code so now let's

start this application from scratch and I will be seeing you in the next section when we start building this

application uh now guys we will start building the solid JS application so the

very first step we need to do we need to go to the project directory and there is

this command which you need to execute npx digit D git T solid JS SL templates

so it it supports both typescript and JavaScript for this specific tutorial we'll be looking at

JavaScript sljs template sljs so this is a command npx then you type digit D git

solid JS / template sljs so you can even write TS as well if you're working with

typescript but for this tutorial be using JavaScript then the name of your application let me call this as person

current APP just enter it and it will actually clone the basic solid JS project inside

your uh this directory person card app so you will see it has cloned this to this directory

now we can navigate to this directory person cred app so if you see the directory

structure of a basic solid JS app it will look something like this we have this app.jsx folder it will look very

similar to react ches and uh it is very much similar you will see that we have

the app.jsx file we have this index. CSS file which is a global stylesheet file

then we have index. jsx file which actually contains this render method which is contained inside solid JS web

and this render method actually wraps your app level component and serves it inside the browser so just we need to

install these modules so we just need to invoke npmi command this will create

node mod node modules folder right in the root

directory then we will set up a Tailwind CSS because we are using Tailwind CSS as a user interface framework so I will

show you how to set up Tailwind CSS in solid JS it's very

easy so it will hardly Take 5 to 10 seconds uh installing this and uh if you

want to check out the documentation just write solid GS and it has a very rich ecosystem and it has great documentation

as well you can see that uh the references docks are very good and we

will also be using sweet alert to which is a popup dialog Library this is normal

alert boxes that you see but it customizes to actually see this

beautiful looking C popup dialog so we'll be using the sweet too I will show you how to integrate this inside solid

JS so now it is installed so we just need to say npmi sweet Alert 2 this is

actually the package we are using it npmi sweet Alert 2 so enter it install this as well so

after this guys we need to actually integrate Tailwind CSS and for integrating Tailwind CSS just write here

integrate Tailwind CSS with solid JS so the very first article which comes right

here simply go to it and they basically give you the instructions here and uh so

we are actually uh just need to copy this command right

here so we need to install these dependencies as Dev dependencies npm install DD first is tailin CSS post CSS

Auto prefixer these are three Dev dependencies which will get added if you check in the package.json

file so we have this uh dependencies which are solid JS we are using it on

sweet alert too and solid JS actually works with vat

development engine you will see that wheat is actually a uh environment for developing

front-end projects such as react can also be developed view so similarly solid J supports V which is a pretty

good uh development environment where you will be able to run your project so you will see in the dev dependency

sections we have installed Auto prefixer post CSS and Tailwind CSS and the next

step is to actually create a Tailwind config.js file for

automatically creating it we can actually write this command npx tailin CSS in it- B so this command will

actually create two files tailin config.js file and post CSS config file

so just execute this command and you will see in the left hand side it will

create these two files

you will see tailwind config.js and this uh post CSS one so inside your

Tailwind config.js simply copy this code and I will just paste it right here

it's very easy to integrate tement CSS all the instructions are given and then it is telling to us that inside your

Global index. CSS file right here this is a file simply copy paste this code

that's all now you can actually use your Tailwind CSS classes inside your jsx app

level component so here we can give it a and the very first difference if you

notice guys in react JS we actually use class name but in solid JS we can use

class directly like this this makes it very much easy to write jsx because in

traditional web development we use class so we don't need to write class name

right here we can directly use class here and then we can use some Tailwind classes

BG that 500 and we can

say person CR app in solid

jss so if you want to run this application uh you simply write npm runev so this will actually start your

development application at Port number Local Host 3,000 and if you navigate to

it you will see that so the classes have been successfully applied you will see

that so so we have W full class as well

you'll see that so so the very first I think I think I need to show you guys

the very basic concept of solid JS which actually based upon signals so solid JS

uses a concept called as signals which is called how the track changes how they

react to changes in the state so they manage state by using signals

so first of all I will show you a very basic example so in react JS we actually

use a state by using U state but inside the solid J we have a hook so let me

take a very simple example set count set counter and this will look very uh

familiar to you when you use react CHS but in this we have this create cre signal in react sorry solid JS if you

type here create signal automatically it will be imported from solid JS if you see that and here you can put a initial

value this counter is actually a function not a variable in react GS this

counter is a variable and this out set counter is a function but in solid GS set counter is also a function and set

counter is also a function and here you can put a initial value of counter let's suppose zero and now we can simply embed

this value let's suppose count we can say that in

paragraph the current we can access this using the current value of counter is

and then in curly bracket we can say counter if you just write like this

counter if you don't put the parenthesis you will get a error in solid JS you can't directly it will say current value

counted is zero but this if I change this to to Let's suppose

five it will still work but the correct way of accessing the

state this is actually a function so we just need to say here parentheses so

right now this F also work but this is a recommended way this is all this is a

function not a variable and now I will simply add a button right here to actually change

this state we can say add and we can actually bind a on click to it so when

we click it we can execute this function add we can Define this function like

this and uh when this button is hit by the user so when this button is hit by

the user you will see add is not defined so just put a parenthesis right

here I think now you okay so whenever you call the

function you just need to write parenthesis it's a function so I'm just telling you if you coming to solid JS if

you are a beginner you just need to first of all know the very basic concept of signal before we can develop the cred

app so here when you click this button this function will execute and what this function will do it will actually call

this function set counter you will see that we are calling this function set counter and right here inside this

function we will increment the value of counter by by one like this and uh now if you click

it so I think we have made a mistake right here sorry again if you see guys

this is not a variable that's why it is creating error because if you see if I click the add button it will simply

showing the function right here it's not a function it's not a variable so we need to Simply write like this counter

parenthesis so now this is actually a function we are calling this function right here and if you see as we click

this so let me see let me rerun the application

uh npm runev

uh sorry guys I forgot to do this this is uh we just don't need to write parenthesis here because if you just

write here parenthesis in the add function it will only execute once if you see the six the value is increased

by one and if I again click this button nothing will happen so you don't need to write parentheses here we are simply

calling this function so whenever you click the add button we will call this function programmatically so if you see

now this will work if I click the button the value of counter will changed and it

will be incremented every time by one so I just want to show you a benefit

of the base component will only execute once so in solid

chairs as compared to react chairs it actually uses virtual Dom but in solid JS we don't use the concept of virtual

Dom the app component that you see right here it only executes once whenever the

application starts so let me write a console lock statement right here so let me say app component

is loading so if you see right here uh this

ex this statement will be executed in the browser console only

once you will see that this statement that you see right here app component is loading so this is one if I again click

it you will see that this function this statement is not repeating again and

again this is the biggest advantage of using solid JS guys because the component only renders once and

uh right here if you add one of the static statement this is uh person C

app because this is a static statement this is not dependent upon this state

that you are referencing right here which is counter state so this will also execute one

so let's suppose you can have another function let's suppose you can declare

another state right here name set name and the initial value of uh create

signal will be let's suppose you are accessing this one

uh my name is like this so this state is totally

different bit to the to to this this state so counter is not related to name

so if you now execute right here the this this statement will only

execute once and if you also check the elements right

here whenever you click the add button the thing that you see this will

remain constant this H1 tag this Gotham's value static this value is not related to The

Counter VAR value so that's why it will not re-render solid JS doesn't reender

it only re rerenders the stuff which is related to The Counter stuff so if I again click the add button only this

statement will change the current value of counter rest of the stuff will remain constant and it doesn't reenter the

component so this is a biggest advantage of using solid GS it is very good in

performance whenever you deploy applications which are very large and complex if you have a lot of components

then in that case it will be not reender every component from scratch whenever any state changes or any data changes

inside your application as opposed to react CH so in react CH this is the biggest problem and solid GS solves

these problems very easily by using the concept of create signals so now if you

know your create signal one other method is there on Mount which is actually a

hook which is very similar to use effect this function only executes when you're if you want to do

something whenever your uh component is loaded so if you check right here this

on Mount will actually loaded right here if you check the

console if I delete everything you will see app component is loading and this

component is loaded so on Mount executes

as soon as your component loads for the very first time so in inside this section you can do

something let's suppose if you want to do some kind of configuration related to your application you can do right here

so I just wanted to introduce to guys solid JS as a framework w why it is

created and what problem does it solve before we develop C application and in

the next section guys we'll start building the cred application so I will be seeing in the next

section uh now guys we will be start building the project so for actually

building the project we need state or data so we will be defining the state here and uh in defining state in solid

JS is very simple as compared to react CH we don't need any sort any extra

Library such as Redux or context we don't you we don't need to use use state

in every file use effect so there is a very simple formula in solid is you create a store in the source directory

you need to create a folder it can be anything but I'm just calling it as

store and inside the store you actually create the file let me call this as

person data.js so you can call this file any name of your choice and uh it can be

typescript file as well but as you will be working with JavaScript so we called

this as person data.js so inside this we will be actually be containing all the

state variables and the methods we will Define it at a at a very single level at a global level so that each and every

component that we Define later on will access will get access to this file we can simply include this file and uh let

me just first of all import the create

store from the solid JS store so this is the basic uh method

which is provided by solid JS if you want to create a store store is something like State you may call for

your application which may be accessible by every component you just need to include this file and then you can

simply access it by the dot symbol I will show you later on so first of all in this case we need to define the array

here we'll be storing a persons data so this will be persons and we'll be having

set persons very similar to react but here we will use this create store

method and right here we will be storing it inside local storage so we will say

Json dopar local storage. get

item and we will be defining it as persons so here we will simply say U if

the local storage is not defined in that case we will be defining a array of

users so so by default we will have two records available right here we

can simply Define these records so I will later on show you how to iterate through

them we can have another JavaScript object right right here this is just a static data so you

can basically pull this data from API database anything you can do it so the

concept will remain the same so I just want to show you how to display this data on

the browser so now you have defined a store guys and right here we defined a

array of object which contains two objects right here name email country these are three properties and now we

can simply export this so how we can do that we can simply say export con export

and parentheses uh squirly bracket and simply export this from this file so now

this store that you created is accessible by each and every component that it will import so this is the very

fundamental thing that solid J support it allows you to actually declare state in a single file and then you can

reference that state in each and every component you don't require Redux you don't require context you don't require

any special Library which you saw in react CHS no very simple setup you

define the create store you define your data and now you can actually go to to

our app.jsx and right inside this file we can create uh two

components let me create a component here first of all to show this data on a table so we'll be creating this

component called as person table so right in the source directory just create a components

folder and just create uh persons person

table. jsx this will be a simple functional component and person table it

will return so we can now include this component right here person table so it will imported from

the components folder you will see that so if you refresh your application if if you go Local Host

3,000 so if you go to the console uh it is saying that person table l jsx

oh sorry we accidentally imported react you will see that so we don't need react

here simply now you will see guys person table is showing right here we are

actually including components so solute J if you have a large application you

can split your code into multiple component just create a components folder and just write it is very much similar to react CH it's a functional

component basically and uh right inside this component we will Loop through our

users which we defined in the store file if you see we Define this data right here now this data that you define it is

similarly accessible in this component we directly can simply import

this import persons and you will see automatically vs code will do the importing you it is

importing it from the store file person data just make sure that you written the statement export person so that it can

be importable if you don't write this you can't import this so after that we can simply uh loop

through so right here we can just write a console log statement

right here this is a person table component so right here we will actually

have a table inside this uh

table tag you'll be giving some classes to it of Tailwind classes minimum width

full divide uh y divide gray 200 100 margin top I will

give it eight after that we will say table heading which is

name which is email and lastly for we will show you profile picture later

on I just want to show you how to Loop through the data in solid JS so we have

if you see if you refresh it we have these three columns name email country and now if you want to Loop through this

data we simply uh right here in the table body so solid JS does

provide us a for each Loop it has its own conditionals you can use for each

right here but we'll using the solid JS which is this for Loop that is provided

it is built in inside solid JS if you see it is imported so this tag inside this we have the each

statement and here you will provide your persons so we can import this persons right here that we imported as defined

right here inside the store file so we are referencing directly you will see that we imported just imported it so no

complex setup we are simply references by including the file of store this is a main Simplicity of solid JS

you can the state is very simple to Define and include now in the we have

this person for each person we will have the index variable and this is similar

jsx we have the loop right here and we can Loop through that TR and we can

simply say here curly bracket we can say person do

name like this and then we can say person. email like this so very simple

so this is all react chers person. country that's all so if

you refresh so you will see that guys

uh if you see the data is coming from local storage so for this I need to

refresh the browser here or you can open your application in a brand new incognito window so that

the different browser Local Host 3,000 and now you can see that that data that we defined is coming you will see

that this is the simplistic use of solid JS guys if you want to do this similar

thing in react CH it will require a lot of code it will require a lot of external Library Redux in some cases

context API so it's a lot of messy things in react JS but in solid JS it's

very simple you define all your state all your methods in a separate store file in in similarly that we defined

right here we export it and now in any component that we defined in the application we can directly import the

state and directly we can reference it this is the magic of solid GS so it has

speed it has Simplicity it has everything so it doesn't have virtual

Dom so you will see the component will render on only once you will see person table component if you make any sort of

changes it will not rerender because it doesn't involve virtual Dom so this is

the thing about solid JS so now what we can do we can simply add a form right

here where we allow the user to actually enter information such as name email country profile picture so we will be

looking at this in the next section uh now guys in this section we

will be developing the a simple form where we allow the user to actually

enter this information name email country look also look at the profile picture as well so for that we just need

to create a brand new component in the components folder so just create this

person just follow Pascal case so person

form jsx so just create this functional component right here and now we can

include this component right at the top which is person form so we can can see we have included

that and uh now we can go to that component person form right

here we can delete this statement react one so right here guys we just have a

simple form right here to actually for first of all doing this we

need to actually declare some State variables in this so whatever the user

will write we need to store that so we'll be again be using Create signal so

we'll be using name set name and you using Create signal once again so create

signal is the main you will see a lot of create signals used in solid J it's a

main recipe of building solid JS application similarly you'll be doing it for email as well

then we will have for profile

picture so profile picture so in this we will be storing the base 64

URL we'll be encoding the base 64 converting AR

buffer to Bas 64 and then storing it so again we'll be using Create signal and

initial value will be empty and then we'll be doing it for the country as well set

country and lastly we do need to have a reference to that image

input so that whenever we submit the form that input is cleared so form is reseted

so we will have this again this create signal this time the value will be null

by default these are the state variables which are required for this person form

so this is specific to this component that's why we are not writing these in the store file because this is specific

to this person form component that's why we just need to write this in this file only so after you do this

uh we just need to have a form right here we can simply write a

form and uh we can give it a class of space y4 and

uh so right here you will have a div and inside this you will have a

label block text font medium so these are all

Tailwind classes text gr 700 so the label will be simply name so

here we'll allow the user to actually enter the name and then we will have input text type will be text and uh we'll be

giving actually this class empty margin top one blog width will be

full and it will be rounded on medium devices border gray 300 and it will have

some Shadow on small devices so this is a pseudo class Focus be giving a border

of indigo

300 Focus

rink Focus ring Endo so CSS is not necessary guys I'm

just writing it to Simply style it you also be giving opacity and it's required so if

you just refresh your application you will see this name input is added right here if you see that and just make sure

inside app.jsx just give it a container class right

here so it will have some container class applied just zoom in right here

uh so after you do this we just need to MX Auto P yeah MX Auto we also need to

say Auto P4 so with this applied your form will

be centered so it it will have some spacing from left and right and now this is right in the center position so after

you do this uh we will repeat this we will copy

this repeat this for the email so simply copy this and this time this will be

type will be email and the label will be email

so if you see there will be two Fields added name email similarly this will be for the

third one and fourth one will be country so I will change it to Country input type

text so this third one will be for profile

picture so input type file here

so you will see that so here now you can actually select your profile picture and

this is country and after that we will have a simple button to actually submit

the form so you can say add

person you're giving a class of margin top for PX4 py padding to BG blue

5600 text right and it should be rounded on medium

devices you'll have a button right here you will see that so so just button type

attribute submit and here we need to attach some attributes to these uh input

elements so one such attribute we will be attaching it to the form right here at the very top so when we submit the

form there is an attribute right here on submit you used in react also so this is

same right here in solid JS so we will be executing this function handle submit

we need to now Define this function handle submit this e parameter will be passed

here you need to Simply say e do prevent default to prevent the auto submission

of the form and now for each input element we just

need to attach a attribute right here this attribute will be the on input so

whenever you start writing something right here it can also be on change as well we

will be using on input so you'll say set name to be e. target.

value this is the on input that we attach similarly thing we need to do it

for this email as well

so this time this will be set email

and for uh profile picture this is actually a input type file here we will

actually select a media file so for that you just need to attach on change so

when the file changes in that case you'll be attaching this function handle file change so we now need to Define

this function right here is simply Define this

so this e parameter will be passed right here in the argument so apart from that

we also need to attach a ref attribute right here ref

that we declared which is set file input this is coming create signal you

will see so these are all the methods that we defined set name set email set country set file input set profile

picture so we are actually attaching these create signals to these individual input element so this is so whenever

their value changes you will actually handle this inside create signal so

after you do this simil similarly we just need to

attach it for the country as well as so we'll simply say

here on

input set country so here uh e parameter will be

passed here so e do target.

value like this so in this way you can uh do it so after you do this we just

need to if you just refresh nothing will happen if you click the add person button we do need to actually write this

handle submit function but before that for the profile

picture in this handle file change method so we just need to get the

profile picture selected by user so for that we

just need to declare a file variable and you'll simply store e. target. files and

uh it will be an array so you'll be storing the first file which is selected by user and here in the if condition we

will simply check that uh you'll read this by using file reader API which is

available in browser so reader. onload and this is basic JavaScript code for actually

reading the file so we'll simply say set profile picture and we'll be reading the

base 64 code by using this so it will return the base 64 code and we'll be

using this function read as data URL so this is provided by this file reader

API now we just need to call that so we this function will get called and

then when the file is successfully read then we'll be calling this uh signal

function set profile picture and the F image data will be assigned reader.

result that's all so now after we submit the form we can

simply return alert statement right here form is submitted just to

check if you refresh write something in the name

email select your profile picture let's

suppose so you will see form is submitted so the it is successfully

executing this function so now inside this function we just need to actually

Define a method inside of a store which allows you to actually add the data in

the local storage so we will simply go to this file person

data JS so right here if you see we have this we can delete for now we don't need

this we can delete this this will be empty array if the local storage doesn't

contain any data this will be assigned as empty so right here Define a function

in this file which allows you to actually add a

person in local storage we will Define a

add person and this will take person as

argument so inside this method guys what we need to do we'll say set

person we'll call this uh create sign create store this function right here in

order to add a new entry so for doing this we'll call this function and we will say we'll use the spread operator

dot dot dot this will actually copy the previous person array and then you will add this person to this array this is

basic JavaScript and the spread operator will actually copy the previous data in

just present in the array and then this entry will be get added in the person's

array after that we need to add this to the local storage you'll say local storage set item

person and then we'll say convert this into Json convert to a Json string json.

stringify and and then dot dot dot persons person that's

all so we are setting this in the local storage that's all two lines of code so

now we need to export this method so simply right here you can say add person so it is that easy so we Define the

methods which will manipulate the state in a single file and now we can export this method and now we can include this

method right inside this component we need this method so we can simply say

import add person from the store file you will see that it automatically get uh imported

now we can use this method inside this component so first of all we will call this add

person and here we'll pass the name to be name parenthesis because it's a

function not a variable so we need to access this using par es so it will get

this value and similarly email to be email and then the profile

picture is the profile

picture lastly the country will be country very simple you

will see that so after we do this uh Define this we can actually show a alert

message to the user sweet alert so for that we just need to import the sweet alert package it will automatically get

imported from suet Alert 2 so it contains a notification message you can

say success and we can simply say user created

successfully and then the third argument is the icon that you need to pass right here and uh there are various icons

available will be showing the success icon and then we need to reset the form

so you'll say set name to be nothing set email to be nothing and set and then for

the file input that's why we given that ref attribute to it so now we can simply

check call this file input right here and just check if the file input is

there then we need to reset that so file input Dot

value nothing that's this will reset the input field and set profile picture to

also be nothing and set country to be also

be so that's all and uh if you just refresh now hopefully we

will able to be adding you'll see currently nothing is there so local storage is empty so we will Define a

record we Define your picture right here

and you can say user created successfully uh if you see uh you will

not see profile picture because we in the last tutorial we haven't had it the profile picture if you

see so now if you want to show the profile picture as well just add this

entry right here and right here we'll have a image

tag and Source

person so we'll be using a base 64 for this uh because uh to actually show the

picture we will actually be using base 64 code for doing this person. profile picture yeah so we

can directly reference that so person. profile

picture and we can actually give it a

plus so if you see just refresh it the image size is pretty large so

we're doing this width and height and

okay so you can see that so now now the image is showing like this we just need

to add a table heading for that which is profile

picture so you can see that now the name email profile picture country is showing

you can add any other record right here in the local

storage so record is inserted but if you see the form is not

resetting it if you let me see what is the

problem so all the things are perfectly showing uh but the form is not

resetting set name to be

set name nothing set email nothing if file

input if you just refresh now this entry will stay if I close this tab and again

reopen that the local storage is actually the data will stay right here in the browser you will see that so you

can just write any data

so so another user us is created so you will see that how easy it is and uh now

I will show you how to actually edit and delete as well so just inside this we

will be actually be having uh the addit and delete buttons so this

will be added button the here will be delete

button so this I will call this as actions

so this will go in a separate component so right inside components folder just say here

edit edit person and similarly you'll be defining

another component for delete person

so we can just include this right here in the person table

component so we can even pass information as a props as well similarly

as we pass in react CHS for this simple we need to pass this index so that we

can uh actually added the user by its ID and delete as well so for that we don't

need to Define this index in the store file we can't do it so that we can directly pass this as a prop so we can

say that index is equal to index like so we are actually passing

index to both these components as a prop so now we can receive this very easily

so we can have this property props available by default in solid Js so you

can also pass information by props as well to IND individual component if you don't want to Define it in a global file

you can even pass information as props as well similarly as we did in react CHS as well

so so now we will be tackling this edit and delete section in uh functionality

in the next section so now guys in this section we'll be tackling the uh delete button

so this is a component that we created in the last tutorial so if you see in the last tutorial we actually couldn't

reset the form after we click the add person button so for that the problem was very simple in the

person form component we haven't attached the value parameter to the

input type text parameter we need to attach a value parameter and this will be actual value which is the

name like this this is the name you can see that we need to we are referencing

this name right here in the value parameter similar thing we need to do it in the email as well so

email don't need to do it in we have already attached is the ref parameter so

this one for the country value parameter and Country so now if you submit the

form the form will reset click uh basically enter any name

email so it will clear out the fields so you

will see the form is successfully reset just attach these value parameters right

here so after we do this we come to the delete person component so right inside

this delete component we have a simple button right here so inside this button we will

simply have a TD tag for we have a

button so this button will actually will say to the user that

delete so we'll actually be attaching a class to it of PX4

py2 BG red 500 text

white rounded on medium devices so if you just refresh now there

will be this uh you do need to include this component

I think I forgot to do this so if you see in the person table

component right here we have this uh edit person and this is delete person so

this is delete person right here so just refresh you will actually

see this delete Buton button is appearing right here so now to actually make this button working we will

actually attach a on click function right here so when we click this button this function will execute inline

function which is handle delete and we will simply pass this

props index so as you can see we are passing this uh property this is the

from person which we are passing it this index property if you

see as a property to this component so we can directly say props do index it's

a function so that's why put parenthesis so now we just need to Define this function right here handle

delete right inside

this so it will actually get this uh index passed as as an argument right

here so with the help of this index we can actually delete the user we can simply show

a notification message so sweeter 2 is automatically imported so right here we

have this title are you

sure and then we have the text uh you won't

be able to rever this

so you can also show can warning as well icon then you can even

show a cancel button to be true so you can also show a cancel button to the user to actually cancel the operation

and confirm button color these are all CSS we can control

this so what I can do I can copy paste

it this you can all control it this hexa decimal colors so confirm button text

has deleted and uh this will actually return a promise after you make the selection dot then and we can actually

get the result and right here you can simply say if the user has clicked the delete button

then we need to delete the user we'll call this function delete so right inside your store file again you'll go

to that store file and write here you will Define a delete method similarly we

Define a method for adding a user now we'll be defining a method for deleting the user so index using the index

variable and here it will just perform filter so this is a array method

available in vanilla JavaScript yes6 and right here we will say if

I is not equal to index so you basically get the array which neglect this index

so that user will be deleted from the array then we'll be updating this by using set persons and passing this array

update persons and then we'll update the local storage by setting item once

again again use json. string if I uh updated

person so that's all three lines of code we actually find out the user which was and then we deleted this we get this

updated array then we set this persons we call this set person every time when we actually update our state so this is

coming from create store then we again update the local storage we pass this array as in setting the item in local

storage that's all this function is important set persons every time you want to manipulate or change state in

solid JS you call set person and it will in turn call this create store which is

actually update your state automatically globally inside your application so this

is the magic of solid JS and if you now go to your delete person right we will

call this function delete person this will be imported if you see

uh sorry what we call this so sorry we do need to actually export this so we

can say delete person like this and now we can import

this so we can say here delete person so it will get imported right

here if you see from the store file and right here we can

simply pass the index to this function after that we can show a

notification message again delete

it person has been deleted and we can show a success

message like this so if you see now we have the ability to delete the user you'll see are you

sure so that user will be

deleted so as you can see we can delete any user so as we are

deleting it the user is getting gone so if you refresh only one user is remaining and if I close the browser

browser reopen it once again so it will stay right here you will see the local storage will actually detect only one

user is available then it will show that user to you so in this way you can perform the delete operation and now in

the next section we'll be seeing the update operation to actually update the details of a specific user uh now lastly

guys we'll be actually be seeing how to update a user this functionality will be slightly complicated because we do need

to show a alert box when we click this edit button to actually allow the user to uh actually edit the details of a

particular user so right here uh go to your edit user edit person component and

right here we will actually have a simple button which will so right here

uh we will have a

button so this one will be simply

edit so we will be giving Tailwind classes to it of margin right two PX

padding from the X direction is 4 padding from the y direction will be two background color

will be a yellow 500 text

white so if you see the edit button is ready now we just need to attach a

onclick listener to this button so when we click this edit button similarly we

need to execute a

function so right here you'll simply say handle edit and here you again pass the

index so Props do index so right here we'll actually be defining the

function index will be passed as an argument right here and inside this

uh here we need to actually again go to the store file so right for the

updating update functionality we do need to actually have uh State variables for

this we need to have storing the index for keep tracking the index so for

keep tracking the index we will Define a edit index and set edit index so which user

the user selects for updating so this value will be keep tracking for that so

here create signal will be again we'll be using Create signal and this will be

null and the second one will be for the

edit person set edit person so this is useful because when we actually click on

this edit button for a particular user these details that you see the previous details which should preop in the alert

box for doing that we need to actually create this create signal and this will

actually hold the buil-in name email the profile picture and the

country this will actually show the old information to the user so that the user

can actually update that so this is name email profile picture

country and after that we'll Define a function in the store for updating the user so

you can see all the business logic which is for the CED application is stored in the single file and now we can reference

this file in various components so we take the index and the updated person as

two argument to this function and we actually first of all call set persons to actually

update passing the index and the updated person this will actually update that

user which has this index and then it will update this uh updated person sorry this

is updated person so it will update this

information which is passed which will be an object which will contain name email profile picture country and it

will actually update that that info with that index number so you can you may say that

various indexes are there 0 1 2 3 so we just need to detect which index the user

has selected so let's suppose the user has selected the first user to be updated so it will actually have this

value index to be zero and the updated information whatever information the user provides so this will manipulate the

state again we are using this uh updated person

this is the data which is coming so again we are calling this function set person so every time we will call this

function set person when we want to delete update or add person this is the

create store function so after we manipulate or

update the state again we need to say local storage set item persons json. stringy file very

simple persons that's all so this is all now we

just need to update all these variables and functions so we'll say update person

we will say set edit index set edit

person so we are updating all this edit index as

well edit person as well so we are updating all this exporting all

this in our export one so now we can import all these variables methods that

we there inside the store file which will manipulate the data for state of the application now we'll move to the

edit person right in the handle edit function we will actually require the

function set edit index so you can see it automatically imported from person data

we will set the index pass this index which is selected by the user and then again we will call this set addit

person and here you'll pass the index persons.

index and then we will again use site alert which is site alert will

show a simple popup message to the user added

person and then we'll be showing a HTML right here and we'll be pre-populating

the old values such as the name country email address and profile

picture so we'll be giving these classes well to

input so we just need to attach this value parameter which will be coming from

so it will be coming from edit person dot it will be a parenthesis because

it's a function not a variable in solid J dot

name and then close the parenthesis so here this added person that you

see we actually got this addit person so this added person that we defined right

here if you see this is a function and it has a property name so we are actually

accessing this using again this parenthesis if you

see parenthesis you'll see do name this value will get X similarly we'll close

this we will copy this repeat this for email

this will be ID will be email and this folder will

be this will be

email this will be for profile

picture

input type will of

five so the value will not be there just delete this for

this then we will have for the

country that's all and uh after you do this uh we will have a

simple so after you do this you will close this you will have another property here

which will be Focus confirm and we will set it to true

false did open this will be a here will be a call back function right here

uh let me just show to you and if I click edit

button I think some error is taking place in the console it is saying persons is not

defined it also need to import the persons as well so the persons is also

imported you will see the persons are actually this one so all these things we are exporting

from this file so we are simply showing

it so if you click the edit

button you will see the details will be prepopulated this is a name email

address this is a profile picture you need to update the you need to Simply you can choose any other profile picture

and this is your country you can change all these values then click on okay so

when you now click okay we now need to actually update this information

so so this is slightly complicated so what

I will do uh I will show you let me just copy this and

then this is all happening in that uh popup window if you

see uh I think let me just paste it

here all the source code guys is given in the description you can directly purchase the full source code

[Music] okay I think this is

creating so here what is doing guys you can see that basically up till now we

written this code right here if you see Focus confirm false and here we

actually for the profile picture we will actually given an ID if you see right here to the profile picture profile

picture we simply targeting this using query selector we are simply if the

profile P picture is selected by user they want to change it then this event

handler will automatically get fired change event handler and then handle file change would be called and here e

parameter will be pass set edit person we will call this function set edit

person so we'll get the value we have given each input field a ID parameter if

you see this is ID Name ID email so we will get all these values name email

profile picture country after if there doesn't please enter all the fields we will show a message so you will read the

profile picture again by file reader API again we'll do the same thing and we'll read it as a base 64 URL and

then we will resolve this promise name email profile picture and

Country and this will return a promise so if the update process buttton is

clicked we will use this function which we Define in the store file update person if you see we are passing two

arguments to this which is the index and the update

we are passing this edit index and result. value so edit index is actually coming

from this function right here you'll see edit index so

whichever whichever user they want to click on edit so now if you want to

change the name click on okay uh let me

see just refresh

here let me inspect element what is there it is saying that update person is

not defined I think we update

person so now this update person will be available to us you will see that so now

if you refresh click on edit if you want to change

this edit index is not defined

okay you also need to import edit index put a

comma so you can see the person has been updated you can also change the profile

picture let's suppose if you want to change it this picture you'll see the profile picture is changed you can

delete a user you can create a user so the advantages of solid JS I already

told you guys in the starting of the video it doesn't contain uh virtual Dom

as opposed to react CH it doesn't rerender the component it only updates the component when it needs to and the

state you can see all the state has been defined in a single file we have created the store file person data all the

business logic is contained in a single file and then we are importing the store file in each of the

component so all the methods that we need we are simply requiring it at the very top and using it so very simple

application very solid ja and uh now if you want to deploy this into a platform

we will also show you the deployment process as well let's suppose

uh I so solid JS supports various platform I will show you versal platform

which is very famous for deployment so we already have account

here and uh

so first of all uh we do need to actually create uh

let me also show you how we can build this solid JS application which is very simple uh in your V configuration you

need to actually install a plug-in right here which is weed plug-in

compression so this is useful if you want to decrease the bundle size so if

you don't include this if you directly build your application by mpm run build

so what should happen basically it will actually create a disc for folder right inside

your will create a disc folder uh you'll see that it will actually

contain this assets folder the size here will be the Base Library size is 95

kilobytes and which is very much lower than react chairs react chairs size is almost 150

kiloby so solid GS libr is almost small so if you g a bit then it will

reduced from 95 to 27 so I will show you how to uh uh just decrease the bundle

size by compressing it with the gzip and broadly which is two famous compression

algorithms so inside assets folder you will actually see this only this single

JS file you will be importing it 94 kilobyte size now there is one plugin

out there in V which you can install it as a Dev dependency which will allow us

to actually decrease the size even further so weed plugin compression this

is the name of the library so npmi Das Das

D so this is the actual Ved plug-in compression simply install this so it

will install it as a Dev

dependency so now I can see it is installed right here if you

check so it is installed as a Dev dependency V plug-in

compression so just move it into the dev dependency

section and again include uh execute npmi that's

all so now inside go to your v config.js file this this is a

file so here we need to actually add this

code so right in the plugin section

uh we will be adding this code right here uh which is uh in the plugin section V compression

so this wheat compression will be coming

from from wheat plug-in compression so you

can see that this will be coming and it takes three options first is the algorithm so it basically supports all

the famous ones which is broadly or gzip so let me show you first of all gzip if

you compress it your bundle size of gz and then the extension here will be do

BR sorry Dot

gzip and we can pass the third option verbos to true so it will only just tell you the

it will print out information about the compression process so if you just write this like this and one more thing you

just need to add this in the build if you so it is already added yes next you

will see that so if you now execute this npm run build

so now the size will be considerably reduced because it is applying this gzip

algorithm so it will now have two files right here two additional files which is

the Z if you check your disc folder

so it has two more files which is gzip file this is your main file 94 kilobytes

this is your gzip file which is created 27 kiloby this is a CSS which is 8

kilobyte and GF file which is 3 kilobyte so by default all browser including

Chrome browser or Firefox Internet Explorer apora Safari supports gzip conf

compression by default so if you deploy to verell it will automatically compress your application using Gip but if you

don't use versal if you just use shared hosting this is very mandatory step that you want to compress your application

using gzip or broadly so let's suppose if you want to now use broadly here you

can simply go to this and just change it to

broadly compress and then do V for broadly so

this is a second algorithm

so the size will even reduced you will see now there will be this

file BR file which is stands for broadly so

even the size is reduced 94 kiloby it is now 24

kiloby so broadly even more reduces your size so it typically depends upon the

server which file it will serve either broadly or G depending upon the configuration of the client so now we

will deploy this application to verel and we can simply write here versal D- PR this will deploy your application for

versal it will ask some questions set up and deploy I will say

yes and which scope you want to deploy to I will say no what's your project

name I will say person C app in which directory look code is located it is

there in the same directory so now it is uploading my want to modify these settings I will

say no so it is actually deploying this project to production

so it will give you this and one more thing you don't you need to delete this

file which is present right here which is this file pnpm block yml so just

delete this file before you deploy your project to versel so simply delete

doesn't rerun your application so so now it will give you your production URL

once it deploys the

application so now your application is deployed very simple solid JS

application just copy the URL and paste it if I refresh my dashboard as well if

you see this file this project is successfully deployed if I

paste the link this is you first of all need to you can see this is a

project you will see that

so so you can see that the application is deployed and is working perfectly

fine so in this way you can deploy and make your solid JS application we can

edit the details like this you can delete

this so the full source code guys is given in the description you can directly purchase it if you want the

full source code with full documentation and directory structure I will provide you full support so thank you very much

for watching this video please hit that like button subscribe the channel as well and I will be seeing you in the

next video