Building a Social Media App (Pages)

This image shows innumerous book pages with words on it. Some pages overlap other.

On the previous post we discussed the stack and the file/folder structure of the project. After discussing it, I said that on the next post (this one) we would start talking about the pages of our application, so, let’s get started on that.

As you now, we created four pages (home, login, profile and register). On this post we’ll discuss the login and register pages, this are the simple ones. Home and Login will have some components that we can reuse in some cases.

For now, these two pages will be dummy pages, what does that mean? It will not perform the registration (sign up) and log in (sign in) at the moment, it will only be the front-end but we can have the schema for MongoDB set up for when we add the logic.

Perfect, on the register folder inside pages we need to create two files:

1. Register.jsx
2. register.css

Let’s start with Register.jsx. We did not worked on register.css but we can already import it on our React file. After that we need to declare a function and export it and start working on our “body”.

import './register.css'

function Register() {
  return (
    <div>Register</div>
  )
}

export default Register

This is our initial state of the page, now we can develop our front-end properly. We’ll divide the page into two parts, left and right, and inside create our register form and our social media description. The left and right parts will be wrapped by a DIV and all will be inserted on our major DIV, as React advises to.

import './register.css'

function Register() {
  return (
    <div className='login'>
      <div className='loginWrapper'>
        <div className='loginLeft'></div>
        <div className='loginRight'></div>
      </div>
    </div>
  )
}

export default Register

On the loginLeft we will add our social media description and on the loginRight our login form. Some will be asking “Isn’t this our register and not our login?” Yes! But most social media reuses the login and register pages only changing the form and the action performed. This HTML and CSS will be reused on our login page.

Let’s now add some things on the two parts.

import './register.css'

function Register() {
  return (
    <div className='login'>
      <div className='loginWrapper'>
        <div className='loginLeft'>
          <h3 className='loginLogo'>Social Media</div>
          <span className='loginDesc'>Connecting people around the world!</span>
        </div>
        <div className='loginRight'>
          <div className='loginBox'>
            <input type='text' placeholder='Username' className='loginInput' />
            <input type='email' placeholder='E-mail' className='loginInput' />
            <input type='password' placeholder='Password' className='loginInput' />
            <input type='password' placeholder='Repeat password' className='loginInput' />
            <button className='loginButton'>Sing Up</button>
            <button className='loginRegisterButton'>Log In</button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Register

Awesome, our page has the elements that we need on a register page. Now we need to style it, let’s move on to our register.css. It is pretty simple, just some responsive classes and standard styling.

.login {
    width: 100vw;
    height: 100vh;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loginWrapper {
    width: 70%;
    height: 70%;
    display: flex;
}

.loginLeft, .loginRight {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.loginLogo {
    font-size: 50px;
    font-weight: bold;
    color: #1775ee;
    margin-bottom: 10px;
}

.loginDesc {
    font-size: 24px;
}

.loginBox {
    height: 400px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.loginInput {
    height: 50px;
    border-radius: 10px;
    border: 1px solid gray;
    font-size: 18px;
    padding-left: 20px;
}

.loginInput:focus {
    outline: none;
}

.loginButton {
    height: 50px;
    border-radius: 10px;
    border: none;
    background: #1775ee;
    color: white;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

.loginForgot {
    text-align: center;
    color: #1775ee;
}

.loginRegisterButton {
    width: 60%;
    align-self: center;
    height: 50px;
    border-radius: 10px;
    border: none;
    background: #42b72a;
    color: white;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

There you go! If you want to see how the page looks, just head to App.js or App.jsx and render the Register page, as I show below.

import Register from './pages/register/Register';


function App() {
  return (
    <Register/>
  );
}

export default App;

To finish, we will create our login page. It will be the same as register, just the form will be smaller (only two inputs) and a forgot password link to reset the password (we will discuss this in another time). Lets start with Login.jsx.

import './login.css'

function Login() {
  return (
    <div className="login">
        <div className="loginWrapper">
            <div className="loginLeft">
                <h3 className="loginLogo">Social media</h3>
                <span className="loginDesc">Connecting people around the world!</span>
            </div>
            <div className="loginRight">
                <div className="loginBox">
                    <input type="email" placeholder="E-mail" className="loginInput" />
                    <input type="password" placeholder="Password" className="loginInput" />
                    <button className="loginButton">Log In</button>
                    <span className="loginForgot">Forgot Password?</span>
                    <button className="loginRegisterButton">Create a New Account</button>
                </div>
            </div>
        </div>
    </div>
  )
}

export default Login

And the CSS wil be:

.login {
    width: 100vw;
    height: 100vh;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loginWrapper {
    width: 70%;
    height: 70%;
    display: flex;
}

.loginLeft, .loginRight {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.loginLogo {
    font-size: 50px;
    font-weight: bold;
    color: #1775ee;
    margin-bottom: 10px;
}

.loginDesc {
    font-size: 24px;
}

.loginBox {
    height: 300px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.loginInput {
    height: 50px;
    border-radius: 10px;
    border: 1px solid gray;
    font-size: 18px;
    padding-left: 20px;
}

.loginInput:focus {
    outline: none;
}

.loginButton {
    height: 50px;
    border-radius: 10px;
    border: none;
    background: #1775ee;
    color: white;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

.loginForgot {
    text-align: center;
    color: #1775ee;
}

.loginRegisterButton {
    width: 60%;
    align-self: center;
    height: 50px;
    border-radius: 10px;
    border: none;
    background: #42b72a;
    color: white;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

To see it, update the App.js or App.jsx

import Register from './pages/register/Register';
import Register from './pages/login/Login';


function App() {
  return (
    //<Register/>
    <Login/>
  );
}

export default App;

I guess it was a pretty long post, so the MongoDB Schema will be discussed on a new one.

Hope you enjoyed it. See you soon!