Coder Social home page Coder Social logo

alstn113 / emotions Goto Github PK

View Code? Open in Web Editor NEW
15.0 1.0 0.0 10.03 MB

마크다운 형식의 시리즈를 작성할 수 있는 커뮤니티 블로그

Home Page: https://wap-dev.store

JavaScript 1.78% TypeScript 91.12% Shell 0.13% Dockerfile 0.29% HTML 0.63% CSS 6.05%
nest react blog mobile web workspace markdown

emotions's Introduction

Emotions

(1년간 유지 후 AWS free tier 만료와 함께 사망했습니다( ~2023.10.31 ))

Emotions는 자신의 감정을 마크다운 형식으로 기록할 수 있는 커뮤니티입니다. 또한 글을 시리즈 형식으로 연재할 수도 있습니다.

What I Learned

  1. pnpm workspace를 통해서 monorepo를 구성했습니다.

  2. 모바일 우선(mobile first) 방식으로 개발해서 UI/UX를 높였습니다.

  3. React의 Suspense와 Error-boundary 을 통해서 데이터 로드와 에러 처리를 분리하였습니다. Lazy Load를 이용한 Code Splitting을 통해 성능을 향상시켰습니다.

  4. Git Actions를 통해서 배포 자동화를 시켰습니다.

  5. Nest.js에서 class-transformer, class-validator, plainToInstance를 통해서 dto를 요청과 응답에서 알맞는 타입의 값을 받을 수 있게 했습니다.

  6. 댓글을 2단계까지 구성하였고, 그 이후로는 mention으로 처리하였습니다. 또한 parentId값을 통해서 한 번의 query 요청으로 댓글들을 받아오고, 이후 Map을 통해 group화하는 방식을 사용했습니다.

  7. AWS SES(Simple Email Service)를 통해서 댓글이나 답글이 달릴 시, 경우에 따라 Post Author이나 Commenter, Mention User에게 Notification Email을 보냅니다.

Sturcture

  • Server: Nest
  • Web: React + Vite
  • Deploy: AWS EC2 Ubuntu, NGINX, Docker, PM2, Git Actions
  • DB: Superbase + Postgresql
  • ETC: AWS S3, AWS SES, Google Analytics

Website Link

Project Stack

  • Server

    • Nest
    • Typescript
    • Prisma
    • Swagger
    • Postgresql
    • Passport
    • JWT + Cookie
    • AWS S3, AWS SES
    • PM2
  • Web

    • React
    • Typescript
    • React-Router
    • Suspense + Error-boundary
    • Tanstack Query
    • Zustand
    • Emotion
    • Framer-motion
    • React-beautiful-dnd
    • Code-mirror

emotions's People

Contributors

alstn113 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

emotions's Issues

댓글 알림 기능

[ FEATURE REQUEST ]

작업 리스트

  • 라이브러리 선택 / 아마 Nodemailer
  • AWS SES -> 자격증명이 필요한 듯?
  • sanitize-html
  • 댓글 알림 , 대댓글 알림, mention 알림, post 글쓴이한테 알림

참고사항

예상 소요 시간

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.