[Ruby] Half-year self-study inexperience made SPA with Rails + Nuxt.js so please see

4 minute read

Introduction

I made an app, but I didn’t have anybody to give me feedback, so I decided to write an introduction article on Qiita. Since there is no one on my own who can give me advice, I would appreciate it if you could point out improvements.

Self-introduction

The author has been studying programming by himself since the end of February this year. I only touched HTML a little in high school, so I had almost no background knowledge. Currently, I am studying for basic information for October while creating an application. This is the second application to be created. Previous URL Previous work repository

App overview

This is the created app.

Site URL github repository

PolPa is a learning record app whose level increases according to the learning time. I think that you can see the whole picture, so I will attach the ER first.

polpa.png

Function introduction

Here are some of the main features.

Guest login

localhost_8080_signup.png

You can login with a guest account from the bottom of the new registration form. You can feel free to try it out, so please come and visit us.

Record study time

time-report.gif

This is the main function of this app. You can earn experience points according to the time recorded. You can add tags to separate genres. Grass will grow on the day of recording. You can comment and like the record.

Follow users

follow.gif

When you follow a user, the timeline will show the user’s record. Interact with other users and motivate each other!

Search users

search.gif

You can search by user name. Search results change in real time.

Responsive design

It supports smartphone and tablet designs, so you can easily use it from your mobile device.

There are many other features we haven’t introduced yet, so please try logging in as a guest.

Reason for making

As a service

I thought that it would be easier to maintain my motivation if I used other learning management apps and had an index to measure what I have accumulated so far, and I added an element that “levels increase when recording learning time” I started to develop a learning management app that would be interesting.

as an individual

Personally, I started development because I wanted to create something using Vue.js and Rails. Before making it, I was wondering if I could start development with this kind of idea, but as I proceeded with the development, I became a little attached to it.

Technology talk

Main technologies and resources used

  • Ruby, Rails … backend
  • Vue.js, Nuxt.js … frontend
  • Vuetify … UI framework
  • PostgreSQL … database
  • Docker, Docker-compose … container virtualization
  • Git, GitHub … version control system
  • Firebase … Login authentication and hosting
  • heroku … server for API

Rails

Rails is used for the back end. Rails has the longest learning period and I used it in the previous work. My new app wanted to add new elements, so I decided to use a different framework for the back and front.

Vue.js, Nuxt.js

I’ve been interested in Vue.js for a long time and it was easy to coexist with Rails, so I started learning. Vue.js was book only, so I only learned the atmosphere I started writing code when I didn’t understand. I touched Nuxt.js itself for the first time since I started development.

Vuetify

Most of the front design relies on Vuetify. Since all the design components required for the application are included, it was easy to implement a design that was cumbersome to create from scratch. There are so many kinds, so it’s fun just to look at the Vuetify Official Reference.

Firebase

Firebase is used for login authentication. Since it was the first development method, I decided that I could not implement secure authentication and authorization on my own, so I decided to use Firebase.

What I felt by developing alone

I will summarize some of the good things, hard things, and reflection points in developing by yourself.

Good thing

I felt it when I made the previous work, but app creation is really a learning experience. Especially if you are self-taught, you have to solve all errors by yourself, so you can improve your debugging ability and problem solving ability. If you develop by yourself, you will generally need web development technology, so it is also a good point to clarify the field you want to study next.

Hard things and reflections

  • If you don’t know how to solve the error
  • If you do not decide the rules when developing, it will become coarser gradually
  • Even if that also adds functions to this, it will not be sharp

I was used to it because it was an everyday occurrence that the code moved unexpectedly and crashed for half a day, but it is stressful that I can not get any visible results. I’m really desperate when I search the net and find no such information. However, as I wrote in the good point, the advantages are two sides of the same coin. I managed to solve it, so I think it’s helping me.

At the beginning, I couldn’t do much, even though I thought, “This time, I will coat according to this method and proceed with development using this method!” It was getting messy, and it tended to be troublesome or just one person. If there is a next time, I would like to be aware of thorough rules.

About future

I have more features to add, so I’ll update if I have time. I’m planning to study Java for the basic information in mid-October, so I don’t think there will be time for a while, but I’d like to improve the completeness of the application, so please give feedback.