Frontend React: Social Media

Setting things up

Time for the first task in this series! We'll start (like any other project made from scratch) with the development environment setup.

There are two main parts for this: installing and making sure the backend works, and installing the frontend tools and creating the frontend project itself (at least the first part of it).

Installing the backend

For installing the backend, you have two possibilities:

  • Install all the dependencies locally (python3, pip, gnu-make), clone the project, and run the backend locally.
  • Install docker and run the project as a docker container (recommended by me) - docker experience is a good skill to have in today's industry.

You can find the instructions in the backend's repository on Gitlab.

To test that the backend is running, when opening http://localhost:8000/ in the browser, you should receive a JSON response. You can also try accessing http://localhost:8000/api/v1/users/me to see if there is any error. A JSON message should be returned as well.

Creating the project

For this task, you need to set up your development environment, so you can run both the frontend and the backend locally.

I recommend using Linux (all the cool developer tools are for Linux nowadays, and the cloud is 90% Linux, so it is highly advisable to get comfortable with it if you want to have a competitive advantage in the tech job market).

But you can do it on Windows as well, that's fine too (on your own risk). Having Linux experience is always better in the software development scene and will help you tremendously when applying for sofware engineering positions.

npm install -g yarn
yarn global add create-react-app
yarn --version   # we will be using yarn to install and manage out dependencies

create-react-app social-media-frontend
# if it doesn't work, try this instead
$(yarn global bin)/create-react-app social-media-frontend

cd social-media-frontend

yarn add bootstrap reactstrap react-router-dom sass

The following libraries have been installed in the previous step:

  • react-router-dom - for URL routing
  • sass - for writing better and modular styling
  • bootstrap - for styling with ease
  • reactstrap - a React wrapper over bootstrap, to avoid writing all the bootstrap classes every time

Next, let's clean up a little bit by deleting the files we don't need from the generated project:

  • delete src/App.css
  • delete src/index.css
  • delete src/logo.svg
  • delete the content of the App component from src/App.js. Put in the following content instead
    import React from 'react';
    import {Col, Row} from "reactstrap";
    
    function App() {
      return <Row className={'bg-primary p-3'}>
        <Col>
          <h2 className={'text-white'}>Social Media App</h2>
        </Col>
      </Row>
    }
    
    export default App;
  • Remove any imports referencing the deleted files

Next, start the project using the yarn start command. An ugly unstyled header should appear, because we haven't imported the Bootstrap styles yet.

We'll need to create our initial project structure and setup the styling. All the code will need to go into the src folder.

We need to create the following files and directories:

  • src/pages - here we will put our pages, each in its own folder. For example, for the login page, we will have a src/pages/login/LoginPage.js component
  • src/components - here we will put our reusable components
  • the src/scss/_variables.scss file, where we will centralize our styling variables. For starters, we will overwrite the default bootstrap color variables. I provided some example colors (picked fromthis Material colors table, but feel free to change them as you wish.
    $primary: #1976D2;
    $secondary: #78909C;
    $info: #2196F3;
    $danger: #e53935;
    $warning: #ffc107;
    $success: #4caf50;
  • the src/scss/style.scss file, which we will use as the starting point for our global style.
    @import "variables";
    @import "~bootstrap/scss/bootstrap";
  • Import that file in the src/index.js file, like this
    import "scss/style.scss"

Setting up the routing

React is used to create single page applications, meaning that the whole application is contained in a single index.html page which is served for all URLs. Because we still want to display different screens, depending on the section of the application (eg. a login screen, a user settings screen, a newsfeed screen), we need a routing mechanism. Basically a giant switch statement through which the app decides what to display, depending on the current URL.

For the next part, we will use react-router-dom to set up some initial routes. Let's start with the following empty pages: LoginPage, RegisterPage, NewsfeedPage.

We won't have implementations for them yet, so we should create a component ComingSoon in our reusable component directory. We should also write a NotFoundPage page in our pages directory.

Then we need to create those three pages, which will only display the coming soon message. Feel free to play around with the Bootstrap classes to create a cool design for that page. You can use inspiration from the internet, that's cool, but make sure you only use bootstrap styling. At this point no custom styling is allowed.

In our App.js component, let's write our routing logic:

function App() {
  return <BrowserRouter>
    <Switch>
      <Route path={'/login'}><LoginPage/></Route>
      <Route path={'/register'}><RegisterPage/></Route>
      <Route path={'/newsfeed'}><NewsfeedPage/></Route>
      <Route><NotFoundPage/></Route>
    </Switch>
  </BrowserRouter>
}

Conclusion

That's it for the current task. You should have the project skeleton in place, ready to build on top of it the rest of the project.

If you have spare time left, you can play around with styling of the coming soon and not found pages (remember, no custom styling allowed, only bootstrap classes. You can try different layouts, colors, texts, images, etc).

You could also create some more general purpose pages (we won't use them right away, but they will come in handy at some point): server error page, see you soon page (after the user logs in, a page with a farewell message could be shown, to provide a better user experience).