Login and Signup Forms UI in React JS - MERN Stack Chat App with Socket.IO #7

#MernStack #Socketio #ReactJS

Create Login and Signup / Registration Forms with React JS and Chakra UI.

👉 MERN Chat App Full Playlist -

👩‍💻 Source Code -

⭐ Support the channel by becoming member and learn from me one on one -

🌎 Live Site -

🔗 MERN Stack Tutorial with Redux -

🔗 React Beginner's Project Tutorials -

-------------------------------------------------------------------------

00:00 Intro
01:14 Initial Styles
03:32 Container, Box and Text in Chakra UI
05:41 Styling with Chakra UI
07:03 Tabs in Chakra UI
10:54 Sign Up Component
18:18 Color Scheme Fix
18:50 Login Component
20:47 Do this for Good Luck

-------------------------------------------------------------------------

Special Thanks to our members -
shahin parveen parveen
Vinay Vally CHALADI

[RoadsideCoder]

IMPORTANT NOTICE -
Please make sure you are using the same dependency versions as me in you project.

[shridharsarraf]

1:11 Actually in the 5th video i was pretty confused because my frontend was not lloking dark as yours it is white, thanks for clearing that. Appreciate it

[mirfan]

Broooo you are one of the most underrated creator I tried to learn React from many resources but your to the point and clean code cleared all my doubts and confusions about react js thank you so much love u bhai❤

[mayank]

I guess colorScheme issue that you were facing at 18:10 was bcz of dark color-mode of chakra-ui. I faced the same issue while following this tutorial. I was able to solve this issue by just clearing my localstorage where chakra-ui colormode was showing dark and then I refreshed the page.

[rishabhranjan]

for anyone whose guest credentials are not showing up. Add an value={email} and value={password} in respective input tags

[aaryansinha]

18:18 actually that is not an issue, you just have to edit the value of chakra-color mode or something in localStorage from dark to light OR a much better way would be adding a default theme from chakra ui

[arundhathimenon]

very Informative and more understandable. lots of love🤩🙌

[ankushladani]

at 14:32 You havent set color to placeholder. That's Why you are not able to see placeholder content also.
Just set value of color prop in Input tag to black.

[skyi]

those anyone who are facing frontend side issues like centering elements and design using chakra UI, please add
import logo from "./logo.svg";
import "./App.css";
import Homepage from "./pages/Homepage";

function App() {
return (
<ChakraProvider>
{" "}
<div className="App">
<Homepage />
</div>
</ChakraProvider>
);
}

export default App;....make changes in app.js file, thank you

[SoulfulSeva]

Very grateful for this amazing Tutorial.
I wanted to know Which version of react have u used sir?
Thanks a lot!

[hellisayhello]

I dont know if i missed something, or Chakra UI recent changes are to blame, but after entering the properties of Box as at 6:25 my text kept to the right side instead of being centered.
Text color wasn't white by default either.

My solution is to add < as='center' > in Box properties, but if anyone has an idea why it wouldnt be centered by default, please let me know, thanks

[kasifmansuri]

Thank you brother enjoying this tutorial

[AmanKumar-sbzy]

can you please upload video per day on this ....
Excited for next one

[souvik]

If we copy paste input field from signup component to login component then what's the point to use react. React is all about reuse same component by passing props

[premhulikoppe]

Learned a lot through ur videos thank you...

[fancyAlex]

I just want to take this time and thank you RoadSideCoder.

[deekshakarkaulia]

React Hook "useState" is called in function "signup" that is neither a React function component nor a custom React Hook function.please!! help me out

[ronnykn]

why did you prefer chakraUI over material UI?

[kshirodpatel]

Hello Piyush,
Could you make a video on how to learn new things with proper time management?

[tabaicanking]

At least upload one video a day. But thanks for the tutorials