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:

             

Follow and Unfollow Users

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

Uploade Profile Pictures

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

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.

Chat Rooms and Notifications

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

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.

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.

Search For Users

• Search for users by name (case sensitive).

Check Other User Profiles

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

Use Dark Mode

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

Explore Registered Users

• Explore all registered users.

Responsive Design

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

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

2. Go to Firebase and follow the instructions for creating a project

   https://firebase.google.com/

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

   

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

   

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

6. 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"
   };

   
   

7. Install NPM packages

   npm install

   
   

8. Start the app on your localhost

   npm run dev