kaleb96 / instagram

InstagramApp

Simple Instagram

---

The Vue 3 Bootcamp - The Complete Developer Guide 수업을 듣고 만든 간단한 Instagram application 입니다.

🖥️ About Project...

• Timeline
• Profile
• Loginn & Sign up
• Upload Images
• View other people's images
• follow people
• chatting, liking, comments, stories

---

✨ Features...

• Authentication
• PostgreSQL(SUPABASE)
• Scrolled-based-paging(Intersection Observer API)
• Design(ant-design-vue)

---

⏲️ learning time...

• 1048min

• An Introduction to Vue
• Diving Deeper in Vue
• Vue Directives
• Components and Props
• Pages and Routing
• Completing Quiz App
• Animations for an Interactive and Fluid App
• API Request to Fetch Data
• State Managements in Vue
• Vue with TypeScript
• CAPSTONE PROJECT START
• Building the UI with a Vue libary
• Identifying Users with Authentication
• Uploading and Displaying Photos
• Complex Data Relations
• Scroll Based Pagination

---

🌲Env...

• Node.js : 18.0.0
• npm : 8.15.0
• Vue 3.4.15
• Pinia: 2.1.7
• vue-router : 4.2.5
• ant-design-vue : 3.2.20
• supabase : 2.39.6
• IDE : Visual Studio Code

---

📝 Project looks like...

Profile

Login

watch-follower-posts

DataTables(supabase)

Authentication(supabase API)

starge(supabase API

instagram's Issues

#8 Scroll Based Pagination

• Check Auth Status in Timeline Page
• Separating HTML into Components
• Fetching the Followers

#3

• Rendering upload Photo modal
• Adding input Elements
• Creating a Bucket for File Storage

apply Authentication

• apply supaBase service
• Connecting App to supaBase
• Creating User Store
• Adding input Validation

#7 Unfollow Function

• Implementing th eUnfollow
• Toggling Follow/Unfollow Buttons
• Performing Aggregate Queires

#4 Uploading and Displaying Photos

• Uploading a photo
• Updating the Image policy
• Creating the post table

#10 Some Math

• Some Math
• Intersectino ObserverAPI
• Emitting and Event on Intersect
• Implementing the Pagination

#11 stopping unnecessary HTTP requests

• Stoping unneccessary HTTP Requests
• Saving data in Enviornment Variables

#9 Fetching the Followers'Posts

• Fetching the Followers'Posts
• Rendering the Posts
• Sorting by Most Recent

#5 Fetching Posts data

• Adding a post to supabase DB
• Adding a loading State
• Handling the Success state
• Fetcing Post upon render

#6 Complex Data Relation

• Building a following Table
• Rendering follow buton
• Implementing the follow user
• Determining follower info on render

improve Authentication

• singing up User
• Add login Logic
• Handling LogOut
• Navigating to the user Profiles