Through out this tutorial series we will create and deploy a Full-stack Login/Register App with the MERN stack – MySQL, Express.js, React.js, and Node.js. I assume you have some knowledge with the technologies we are going to use. The final project is available here.
Let’s Have a Look on What We Are Building
First of all, the user can create an account on the register page.
Then, they can log in to their account from the login page.
Last but not least, we have this very humble home page where the user is welcomed. There is also that log out button in the header that logs the user out. This page is just created to demonstrate to you how to use the session to store the currently logged in user’s data.
What Are We Going to Need/Use?
On the server side (backend):
- Dependencies (node modules):
- express – for the backend server
- mysql2 – to communicate with our MySQL database
- express-session – to use and manage sessions
- express-mysql-session – to enable express-session to communicate and store session data in our MySQL database
- bcrypt – to hash and verify passwords
- body-parser – to parse bodies of incoming requests and get data out of them
- cors – to enable and control CORS (Cross Origin Resource Sharing)
- dotenv – to securely load private keys from a .env file
- express – for the backend server
- Dev Dependencies:
- nodemon – to restart the express server automatically on any change in the code
On the client side (frontend):
- Dependencies:
- react => for frontend
- react-icons => to get icons into our react app easily
- react-router-dom => to handle routing inside react app
-
sweetalert-react => to use sweetalert easily in our react app
- Dev Dependencies:
-
babel-loader => required by sweetalert-react
-
For data storage (database):
Sure enough we are going to need an online database that we can access remotely from our server. We are going to use a database provided by Free MySQL Hosting.
Alright, that’s all you need to get started. Next, we will create a database and write the code needed to connect to it and perform various operations with it.
NOTE: You can find all parts of this tutorial here.
