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

background

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

Vue.js ・・・ Front end
Rails ・・・ Backend
FirebaseAuth ・・・ Login authentication
Twitter API ・・・ Setting the disclosure range of New Year's cards

↓ ↓ ↓ We have already deployed it, so please play with it ↓ ↓ ↓ https://newyearmaker.netlify.app/card/new

Development environment

macOS 10.15.7
Ruby 2.7.2
Rails 6.0.3
vue/cli 4.5.6

Lightly demo

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

私のビデオ2 (1).gif

Enter the user name to be put on the New Year's card (only when you are not logged in) ← When you log in, it will be the Twitter account name you are logged in to.
Select a moving background for New Year's cards (common)
Input of message to be put on New Year's card (common)
Setting the disclosure range of New Year's cards (only when logging in)
New Year's card preview (common)

2. Next, New Year's card page

私のビデオ6.gif

Animation by anime.js
In the case of limited disclosure, disclosure is restricted from the user information that is viewed when loading the page.
The part of ~ is set to the account name when logged in, and "you" when not logged in.
The name of the creator of the New Year's card is set as the name at the bottom.
Receive New Year's cards from the button at the bottom left (only when logging in)
Click the button at the bottom right to go to the New Year's card creation page (common)

3. Finally user page (login only)

私のビデオ2.gif

You can check the New Year's card by displaying and clicking the list of New Year's cards received from the New Year's card page.
Transition to the edit page of the New Year's card you made (The edit page is almost the same as the creation page, so the introduction is omitted)

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)

Impressions

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.

Finally

If you like the New Year's card you made, please take a look. ↓ ↓ ↓ https://newyearmaker.netlify.app/card/b5d4cc19/show (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! !!

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