React Nodebird
2022-03-25 — 2022-07-28
Full-stack Twitter-like SNS clone built with Next.js SSR — Redux-Saga async state management, Passport session authentication, Sequelize relational modeling, and AWS Lambda image resizing pipeline
Project Description
A full-stack Twitter-like SNS clone project with React/Next.js frontend and Express backend, built to systematically learn Node.js-based full-stack development. The frontend leverages Next.js getServerSideProps for SSR to ensure initial load performance and SEO, manages complex async flows (login, post CRUD, follow) through generator-based Redux-Saga, and uses Immer for concise immutable state updates in reducers. The backend designs BelongsToMany relationships across 5 Sequelize models (User, Post, Comment, Hashtag, Image) and implements session authentication with Passport Local Strategy + bcrypt hashing. Image uploads go directly to S3 via multer-s3, with an AWS Lambda function triggered by S3 upload events using sharp to auto-generate 400×400 thumbnails — a serverless image resizing pipeline.
Highlights
- Next.js SSR + next-redux-wrapper auth rendering
- Redux-Saga async state management + Immer
- Sequelize 5-model design (self-ref BelongsToMany)
- Lambda + sharp image resize (S3, 400×400)
- Passport + bcrypt + express-session auth + CORS
Features
- Sign-up/Login — Passport Local Strategy + bcrypt hashing session authentication with cookie-based login persistence
- Post/Comment CRUD — post create/edit/delete, comment creation, like and retweet features
- Infinite scrolling — cursor-based pagination (lastId) for seamless post loading
- Image upload & resizing — direct S3 upload via multer-s3, AWS Lambda + sharp auto-generating 400×400 thumbnails
- Hashtags — regex-based hashtag parsing, BelongsToMany relationship for post-hashtag many-to-many mapping, per-hashtag post listing
- Follow/Following — User self-referencing BelongsToMany relationship (Followings/Followers) implementing social graph
- Image carousel — react-slick based image slider with conditional rendering for 1/2/multiple images
- SSR — Next.js getServerSideProps for server-side rendering, next-redux-wrapper for server/client Redux store synchronization
Lessons Learned
- 💡 Learned that Redux-Saga's generator-based side effect management enables declarative control of complex async flows (login → load user → load posts), with effects like takeLatest/throttle providing concise duplicate request prevention
- 💡 Confirmed that combining Next.js getServerSideProps with next-redux-wrapper enables hydrating the Redux store on the server, rendering complete pages with auth state and initial data at SSR time
- 💡 Discovered that Sequelize BelongsToMany with through tables and as aliases enables declarative definition of complex relationships — User self-reference (Followers/Followings), Post-Hashtag many-to-many, and Post retweet — all within a single model file
- 💡 Learned that connecting S3 upload events as Lambda triggers enables async image post-processing without server load, and sharp's fit: inside option maintains original aspect ratio during resizing
Tech Stack
Related Links
Project Images
