Skip to content

Latest commit

 

History

History
171 lines (110 loc) · 6.48 KB

README.md

File metadata and controls

171 lines (110 loc) · 6.48 KB
Raw

Instagram Clone

An Instagram clone app written in Typescript that utilises Next.js as a framework, allowing for static HTML to be generated server-side on build time resulting in better performance and SEO. Moreover, it has allowed for dynamic page routing to be used for the profile pages of all users. For this project Jotai was incorporated to manage the React state throughout the app. Firebase (BaaS) was used for the database (NoSQL), to incorporate user authentication, and to utilise Firestore real-time updates. Additionally, the TailwindCSS framework was used to help with CSS management and to reduce the CSS bundle size by removing all unused CSS when building for production.


Built With:

Typescript  nextjs  React  jotai  Tailwind  Firebase  vercel 

Follow and Unfollow Users

  • Follower users to see their latest story and their most recent post.
  • Unfollow users to stop receiving their latest updates.

followUsers


Uploade Profile Pictures

  • Upload a profile picture, or choose to not use a profile picture.

profilePic


Create Posts

  • Create post to fill out your user profile and to share your content with your followers.
  • Other users can like your posts and leave comments for you to view.

createPosts


Chat Rooms and Notifications

  • Create chat rooms with other users.
  • Receive notifications when you receive new unread messages form other users.

chatNoti


Likes and Comment Notifications

  • Receive notification updates when someone likes or comments on your posts.
  • Like other users posts to let them know what you think.
  • Leave messages on other users posts to tell them what you think about the post.

heartNoti


Stories

  • Set a story to let your followers know what you have been up to recently.
  • Once you view a story it will be displayed as viewed.

stories


Search For Users

  • Search for users by name (case sensitive).

search


Check Other User Profiles

  • View other users profile pages and see all their posts.

userProfiles


Use Dark Mode

  • Use dark mode throughout the app if desired.
  • Utilises local storage to keep track of your reference.

darkMode


Explore Registered Users

  • Explore all registered users.

exploreUsers


Responsive Design

  • Fully responsive design to allow the app to work on both computers, notepads, mobile phones, etc.

responsive


How to Install and Run the Project Locally:

- Please follow the following steps if you would like to install and run the porject locally on http://localhost:3000/:

  1. Clone the repository to your local folder of choice 
    git clone [email protected]:Pierce-44/netflix-clone.git

  1. Go to Firebase and follow the instructions for creating a project 
    https://firebase.google.com/

  1. Within your Firebase cloud storage create three folders named "posts", "profilePhotos" and "stories" (seen below):

    firebaseCloud


  1. Within your Firestore Database create two collections one named "userList" and the other "users" (seen below):

    firebaseDB


  1. Within your Firebase project allow email and password sign-in method.

  1. Within util/firbaseConfig.ts replace the empty Firebase configuration with your Firebase configuration, which was assigned to your project when you created it and can be found under your project settings on Firebase. It should resemble the following example:

    // Your web app's Firebase configuration should resemble the following EXAMPLE:

const firebaseConfig = {
  apiKey: "AIzaSyA97-R5P4bEwjV0efHt3hLs3bc32ns4shs",
  authDomain: "instagram-clone-ph.firebaseapp.com",
  projectId: "instagram-clone-ph",
  storageBucket: "instagram-clone-ph.appspot.com",
  messagingSenderId: "554003582327",
  appId: "1:554003582327:web:97667da84152c9ff7aa572"
};

  2. Install NPM packages

    npm install

  3. Start the app on your localhost

    npm run dev