The story of making an electronic New Year's card app with Vue.js + Rails

2021/1/11 Addition of demo part, other corrections


I like seasonal events and customs and want to express them in what I am good at, so I decided to create a website for New Year's cards. In addition, the idea of ​​a web application that allows you to create a New Year's card was born with the desire to have fun playing with what you made. By imagining how users play, I came up with the idea of ​​using the Twitter API, using a Twitter account to log in, and playing without logging in.

I created a PC user as the main. However, since most people played with smartphones, many smartphone bugs were found. .. I fought bugs at the end of the year, but now I should be able to play on my smartphone without difficulty. ..

Technology used

↓ ↓ ↓ We have already deployed it, so please play with it ↓ ↓ ↓

Development environment

Lightly demo

1. First, from the New Year's card creation page

私のビデオ2 (1).gif

2. Next, New Year's card page


3. Finally user page (login only)


Where I devised

There were many people around me using Twitter, so I implemented functions such as follower-only disclosure. It made it possible to log in with Twitter using firebase, and it was very easy to implement.

I wanted anyone to feel free to use it, so I made it possible to play without logging in. When you log in, you can receive and edit New Year's cards, and you can set the disclosure range, so please log in and play! !!

When I was desperately making the user page on December 31st, the kid messenger was over. .. .. (Lol)


Rails had only the knowledge of tutorials, but there were many articles that were very helpful and the implementation was faster than I expected. I've only touched Vue for half a year, but I participated in the offline hackathon twice, and I think I was able to learn a lot and learn efficiently. She can only thank the people who opened the hackathon, the mentors who taught me, and the seniors I met there.


If you like the New Year's card you made, please take a look. ↓ ↓ ↓ (Since the backend is deployed on heroku, it may take some time to load.)

Thank you for reading this far. Thank you to Mr. Y for making the background video for the New Year's card! !!

Recommended Posts

The story of making an electronic New Year's card app with Vue.js + Rails
The basics of the process of making a call with an Android app
The story of the first Rails app refactored with a self-made helper
The story of making a reverse proxy with ProxyServlet
The story of making dto, dao-like with java, sqlite
Summary of initial work when creating an app with Rails
The story of toString () starting with passing an array to System.out.println
[Rails 5] Create a new app with Rails [Beginner]
The story of making an Android application that can adjust the sampling frequency of the accelerometer
The story of making ordinary Othello in Java
Downgrade an existing app created with rails 5.2.4 to 5.1.6
The story of making the existing Dockerfile GPU compatible
Publish the app made with ruby on rails
The story of tuning android apps with libGDX
rails new app is not created with app name
Create an app by specifying the Rails version
[SPA development with Rails x Vue] Learn the basics of Vue.js (Overview of vue.js, template syntax)
Arguments with default values Take the full_title method of the Rails tutorial as an example
How to push an app developed with Rails to Github
[Heroku] Associate AWS S3 with the deployed Rails app
Test the contents of an Excel file with JUnit
The story of an Illegal State Exception in Jetty.
Challenge the settings for developing with vue.js on Rails 6
Roughly the flow of web application development with Rails.
The story of making Dr. Oakid using LINE BOT
I made the server side of an online card game ①
Story of making a task management application with swing, java
Rough procedure verbalized output when creating an app with Rails
I want to push an app made with Rails 6 to GitHub
A story packed with the basics of Spring Boot (solved)
How to specify db when creating an app with rails
What to do if the app is not created with the latest Rails version installed when rails new