How I created my login

We are living in changing and unprecedented times. Homelessness is on the rise across America and I felt there was a need that needed to be filled.

I wanted to create an app that was designed to help look for resources for those who are facing houselessness. In today’s society, we have a growing problem with the gap in wealth and we need to be able to create resources for people who are facing houselessness.


For these purposes, I want to share with you how I created my login.

This is how I created my login.

  • First I decided to work on my back end and create an API for the user to fetch resource listings and other things. I created a model called residents. I then put into the terminal rails g controllers and sessions for my instances.
Lines of code that detail what is in the residents controller
Residents as users

In the Residents model, I created :name, password; using the bcrypt gem, I created has_secure_password in order for the user to be able to save in their sign-up sheet and log in. For residents, I made login credentials (i.e. username and password.) I used a secure password on top so that way the password would not be compromised. After that, I then migrated my database and seeded them. Lastly, I focused on the react portion of my app.

For the react portion of this app, I then added a few components for the app but for the main purpose for this I’ll mainly talk about the residents (users) and Shelters (the cards I made). Starting with residents, I created the signup and login and named them Login.js and Signup.js.

In the Login.js, I made two inputs and a handleSubmit. Inside the handlSubmit, I have a preventDefault and a useEffect. For the onLogin, I created a function called handleLogin and passed it down as onLogin into the component.

Another component I made was the Navbar. Inside the Navbar, I made a logout function that would delete the user’s session from the interface. With that said, I made a login container for my login component and created a ternary for my two components. Inside the ternary, I made a {} to show the user’s name on the screen. That way the user could not only see themselves on the screen but see they are logged in.

And that is how I created my login, for more information and to see it deployed here are the links below.






Walking through my own wonderland

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

SASS — part 2.

You’ve Graduated Bootcamp, Hurray! Now What?

Klaymore x Kracker Labs

On Delightful Software Experiences

Datalore by Jetbrains

Consider if your are new to Open Source contribution.

Oracle Magento 2 Cloud on ARM instance Performance.

A Responsive Photo Grid with CSS Grid Layout

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jonathan Villanueva

Jonathan Villanueva

Walking through my own wonderland

More from Medium

Reading List Junkie

Paints of passion rendered by dyeing with devotion

Web 3.0: ATTA Enormous Contribution

Marvellous Highlights of AngularJS