Snapchat Clone 👻

Deployed Link: https://snapchat-fe697.web.app/

Introduction 🐱‍💻

Created a Snapchat Story feature clone using React. It's function is similar as WhatsApp/Instagram Story feature. I have used redux and Firebase for authentication and hosting. Building this clone was very challenging as Redux and Firebase just got upgraded at the time of bulding this clone. Learned a lot of new Redux syntax while building the clone.

Tech Stack used 👨‍💻

Features 🧰

• Responsive ✨.

• Camera Functionality 📷.

• Exact Time Functionality ⌚.

• Storage using Firebase 🗄️.

Learnings 📝

• Learned about Redux latest version and its new syntax.

• Learned about Firebase and how to use it for hosting and authentication.

• Learned about varoiuos packages such as react-webcame, react-timeago and etc which helped me in creating this project.

• Learning React.

Installation 🛠️

Step 1: Fork the repository. You can fork the repository by clicking on the fork button on the right hand side below the profile.

Step 2: Clone your forked repository. Replace yourusername with your GitHub Username.

git clone "https://github.com/yourusername/Snapchat.git"

Step 3: After cloning the repository. Go to the repository.

cd Snapchat

Step 4: Run npm init -y. It will install all the packages and dependencies used in the project.

npm init -y 

Step 5: Run npm i react-scripts. This will install React Scripts in your local repository. React Scripts are scripts which is used to run react apps.

npm i react-scripts 

Step 6: Run npm start. This will start the project in your local machine 🖥️.

npm start 

Step 7: To run the project in your local machine, you need to go to your local server which is running on port 3000. Go to the browser and paste the link given below 👇:

http://localhost:3000/

Hurray 🥳, you successfully deployed the project in your local machine 🎉.

🚨 Only sign in page will open when you run this app in your local machine because API key for Firebase is hidden. To access its full funcationality of this app you have to privide an API key which you can get from Firebase.

Screenshots

Loved the project 💖?

If you found the project intresting then please do give this project a star ⭐.

Made with 💖 by Harshit Aditya