insta

Introducing Insta, a clone of Instagram built with Vue 3 script setup. With Insta, you can sign in and login, upload posts, follow and unfollow other users, see your following posts in the timeline (homepage), search for specific usernames, and access your own profile.

Insta uses pinia for state management, supabase for the backend, ant design vue for its prebuilt components, and vue-router to route between URLs. Get started with Insta today and experience all the features of Instagram in your own web app! You can watch the video below for a temporary introduction to the project.

Insta-1.mp4

Features

Sign in and login ( they all have validation on its forms )

Access own profile

Upload posts

Follow and unfollow other users

Timeline to see following posts

Search for specific usernames

Tools Used

Pinia - State management library for Vue 3

Supabase - Cloud backend service for building APIs with PostgreSQL

Ant Design Vue - A set of prebuilt components for Vue.js

Vue Router - The official router for Vue.js

you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Run End-to-End Tests with Cypress

npm run test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

npm run build
npm run test:e2e