トライデントコンピュータ専門学校 進級制作展ロゴマーク

トライデントコンピュータ専門学校 進級制作展ロゴマーク

Webデザイン学科1年生のオンラインでの進級作品展示です。

18. 文字主体SNS「Afim」

https://afim.onrender.com/
画像1
画像2
画像3
画像4

作品概要 #

TikTokは情報量が少ないことで疲れず夢中になって見れます。その現象が動画で起こるなら、テキストでも起こせるのではないかと思い投稿文字数を50文字以内にしました。フォロー、アンフォロー、いいね、ユーザー専用プロフィール、自分の投稿ー覧、フォロー、フォロワー一覧など動作します。
https://afim.onrender.com/

制作者 #

  • T.Yokota
  • フロントエンドエンジニア・バックエンドエンジニア志望
  • HTML, CSS, JavaScript, React, データベース, Node.js, Redux Toolkit, express, mongodb, mongoose, axios, styled-components
  • Figma、Visual Studio Code
  • アンティー・ファクトリー賞、GrowGroup 賞, アクアリング賞, メイクリー賞

SNS など #

アピールポイント #

フォロー、フォロワー、いいね、などで、バックエンドのデータがフロント側で更新されない時、Redux Toolkit を使用しました。結果、リアルタイムに表示が切り替わる、本物の SNS に近づきました。
また、長期にわたって開発できるように再利用可能なコードを心がけました。
そのため、「styled-components」、「React」を扱った AtomicDesign によるコンポーネント設計思想を取り入れました。重複して使用している無駄なコードを１つにまとめて他コンポーネントでも利用できるように、リファクタリングを行いました。
さらに、変数の名前、コンポーネントの名前などもチーム開発を意識して命名しました。

スライド #

制作者感想 #

僕は今年トライデントに入学して初めてパソコンを触ったくらいの初心者だった。
タイピングは誰よりも遅かった。ファイルってなんだよとか隣の人にもはやお世話されていた。
それでも自分のやるべきことは作りたいものを作るだった。だから、js、php を先取りで勉強した。みんなが帰った後も残った。
みんなが夏休みで遊んでいる時は React、Next.js ばっかやってた。こんなん無理だろとか何回も経験した。
一生理解できないって何回も思った。でも自分を信じ続けた。
カフェで隣の人が僕より早く帰ったとき、勝ったぜとかしょうもない満足感と共に 1 日を終え、それを毎日繰り返してたら 1 年老けてた。
お勉強で終わってたまるか（感想）

コメント #

作品ならびにプレゼン動画の閲覧ありがとうございました！
さらに学生作品への評価・アドバイス、感想などコメントいただけると、今後の制作、就職活動の励みになります。