Creating a full-stack web application

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.

  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

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>

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

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



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