next project - audio tools
prev project - jira clone
instx7.mp4
for a quick understanding of project structure you can look at frontend models (frontend/src/models) or backend modules and their entities (backend/src/modules)
- Vue 3
- Vuex
- Typescript
- Quasar
- Vue i18n
- other - date-fns, some lodash functions, eslint + tslint + prettier
- Node.js (Nest.js)
- Typescript
- PostgreSQL + TypeORM
- AWS S3 (Amazon Simple Storage Service)
Github actions CI pipeline
❌ === not implemented yet
✨ === TODO idea. it seems that it won't be implemented but there were some plans
- English lanugage (wow!)
- User notifications (Post like, Comment like, User followed)
- Remove notificiation if user unliked/unfollowed
- User following system
- Google analytics
- Sentry - error monitoring and logging for both frontend and backend
- Login / Register / Forgot password
- OAuth with Google / Github
- 2FA with QR code
- Unique username / email check
- Send email verification mail
- Automaticly redirect to requested page after login (/auth?redirect=/profile/1)
- JWT access (1d exp) and refresh (30d exp) tokens, auto relogin if access token expired
- View all recent posts from friends (push / fan-out-on-write)
- Remove friend's post from feed after user has seen it ✨
- View own new posts (<24h) on top before friends feed
- View all recent posts based on their naive calculated score (likesNumber + commentsNumber*5 / (now - createdAt)) after friends feed
- Use pull / fan-out-on-read feed for celebrities (100000+ subscribers) ✨
- Feed infinite scroll with vue-observe-visibility
- Search users, search tags
- User suggestions in sidebar who follows you / followed by who you follow / new to instagram
- Posts CRUD
- Images support. Dragndrop or browse image to upload
- Videos support. Dragndrop or browse video to upload ✨
- Image crop with vue-cropperjs
- Image aspect ratio (1:1, 4:5, 16:9, original)
- Image filters
- Tags system and tag suggestion
- Dbclick to like post (with cool animation haha) or like with button
- Show users who liked this post
- Comments CRUD
- Like comment
- Report post
- Comment system with infinity reply nesting with path enumeration / materialized path | look bugs section (1)
- Share to users in messanger ✨
- Bookmark ✨
- Story CR✨U✨D✨
- Drawing canvas with vue-drawing-canvas
- Implement smart eraser (erase only user drawings) ✨
- View all own photos/videos
- View posts, followers and followed number
- Follow/unfollow if not own page
- Edit info - change username / name / email (✨) / bio etc...
- Upload user avatar (store in AWS S3, compression with sharp)
- Upload gif avatar ✨
- Can't load author relation in comment replies (posts.service.ts, line 172) and need to fix update/delete and correct create reply saving in frontend (FE + BE)
- Missing pagination in profile, post likes and somewhere else (FE + BE)
- Story drawing canvas incorrect markup if 16:9 image, problems with image size (FE)
- Search posts by tag not working (BE)
- Clone project
- Terminal 1 - "docker compose up"
- Terminal 2 - "yarn global add @quasar/cli" and "cd .\frontend" and "quasar dev"
- Terminal 3 - "cd .\backend" and "yarn start:dev"
- Don't forget to create new server (Object => Create => Server) and then database (instagram) in pgadmin (localhost:8082). small tip: in server connection field enter: host.docker.internal
- star? 🤩😊 anyway, glad to any PRs
Invalid login: 535-5.7.8 Username and Password not accepted - https://myaccount.google.com/lesssecureapps
- it was planned as 3-month pet-project from december 2021 to end of march 2022 but it lasted for 4 and even with +1 month deadline i couldn't do lots of things that i wanted. although of course i spent only a couple of hours a day on it, i think it's ok haha
- also i wanted to add some caching and queues but at this rate it'll drag on for another couple of weeks
- in the video logo on the top left disappeared from 0:36. it's cuz i took image source directly from instagram but it was blocked in russia lolll. before that i reseted browser cache behind the frame