I have been working on my last project which is React application which allowed the user to create/edit/delete player and create/delete character for World of Warcraft game. The application was built on the Rails API Postgresql for backend and React for frontend.

rails new wow-backend --api --database=postgresql
create-react-app wow-front-end

I also included additional gems for:

Rails: gem 'rack-cors', gem 'pry'

React: npm install react-redux, redux-thunk, react-route-dom; npm install dotenv

I used the (debugger, prying pry, console.log, React and Redux development tools) to troubleshooting the errors while building my application.

Rails API backend

I used belongs_to and has_many relationship in the models. I also use serializer to nest characters under the player. The characters will be deleted implicitly when the player is deleted by using depent::delete. The controllers are set up with CRUD.

belongs_to :player
has_many :characters, dependent: :delete_all

The Postgresql created a database and run any migration(s) and seed files if there any. The Rails app used default port http://localhost:3000

rake db:setup

React frontend

React app used default port http://localhost:3001 and it fetched data from backend by using fetch to request to the server http://localhost:3000/api/v1.

The application used function and class for presentational and container components, action creators, reducer. It used Redux Store. State and reducer in the store, which helps us to remember when we created a store with a statement by createStore and send initialState to rootReducer. The Store provided dispatch API command when we do mapDispatchToProps. We called the command dispatch which is the same as store.dispatch.

The dispatch sent actions to the reducer and changes the value in Store. The reducer is the function that took current states and actions and returned to the next state back. Then it will be updated when the state changed and sent the update to the component as props.

The App was wrapped around by Provider which used to get access to Store functions, and Router which used to create routes in index.js. It used the thunk middleware to return the function instead of the object, and connect is used to connect the Redux Store. We used compose to connect Redux Dev tool to the browser.

The App.js rendered NavBar, set up Route, and render PlayersContainer. Then it fetched the Players data and used Switch to filter the Route.

The application was set up with different folders such as actions (action creators), components (function and class components, stateless components), containers (Players and Characters containers), reducers (Player reducers).

The CSS file helped to style the web page more user friendly. I’ve learned how to use React and Redux, Postgresql, Rails, and CSS skills while working on this project. I wished I have more time to use third party wow api, bootstrap framework, delpoying app to Heroku, and create user login features for my application.

References:

https://medium.com/@noordean/setting-up-postgresql-with-rails-application-357fe5e9c28

https://www.newline.co/fullstack-react/articles/how-to-get-create-react-app-to-work-with-your-rails-api/

https://medium.com/@e_himmelfarb/implement-redux-devtools-extension-with-thunk-and-other-async-middleware-20e97100b2b0

https://medium.com/@noordean/setting-up-postgresql-with-rails-application-357fe5e9c28

https://stackoverflow.com/questions/40714583/how-to-specify-a-port-to-run-a-create-react-app-based-project

https://stackoverflow.com/questions/33840150/onclick-doesnt-render-new-react-component

https://www.newline.co/fullstack-react/articles/deploying-a-react-app-with-a-server/