Creating a full-stack web application

2 min readJul 23, 2020


A step-by-step guide to creating a full-stack web application using a Rails backend and React frontend.

Part 1: Planning & setting up Github repositories


Once you have determined your app idea you must begin to plan for the instruments you will use to complete your MVP:

User Stories: What features will you have in your app & how will the user interact with them?

Database Design: Define Rails models, including their attributes & relationships.

Wireframes: Draw out a detailed description of the apps layout, this will help you to design the structure of your React components.

Scrum Board: Outlines goals and keep track of your progress.

Create & initialise your Github Repo

  1. Create a new repository in for your project
  2. Create a local code repository & cd into it:
  • This is the folder on your laptop that will store your GitHub project

Git commands

1. Connect your local repository with the GitHub repository you created

<git remote add origin>

2. Add all the Rails/or React files that have been created

<git add .>

3. See a log of the files you have added

<git status>

4. Commit your changes to your remote Github repo with a message

<git commit -m “commit message goes here”>

5. Send an initial commit to your remote GitHub repository

<git push origin branch-name>

Initialising a Rails backend

In order to build applications in JS & use frameworks like React, we specifically need rails to act as an API that responds with JSON

The following actions will be executed in the terminal

  1. Firstly install rails
< gem install rails > 

2. Then create a new rails application

<rails new app-name --api >
  • The — api flag specifies that application should be API-only
  • Controllers will inherit from ActionController::API
  • Generators will skip generating views
  • The Gemfile will include the rack-cors gem that’s commented out

3. Remember to change into your new Rails app directory before running the git commands

cd app-name

Initialising a React Frontend

The following actions will be executed in the terminal

  1. Set up a preconfigured, default React project
<create-react-app app-name>

2. Remember to change into your new React app directory

cd app-name

3. Download all the dependencies form

npm install

4. Run the git commands defined above to initialise your repos

In the next blog of this series we will cover:

Part 2 — Preparing your environments and launching servers