SNAPCHAT with REACT.JS!

A website like Snapchat which is created using ReactJS, the React-Router is implemented for the different pages, React-Redux has been used as a state management tool. The firebase is used for the authentication and firebase firestore is used as a database. React-webcam is used for capturing the snap, react-countdown-circle-timer is used for setting the time limit and Material-UI icons have been used.

View Demo · Documentation · Report Bug · Request Feature

📔 Table of Contents

• About the Project
  • Screenshots
  • Tech Stack
  • Firebase Config
• Getting Started
  • Prerequisites
  • Installation
  • Run Locally
  • Deployment
• Contact

🌟 About the Project

📷 Screenshots

• Application Home page & Demo

2023-03-25-12-51-52.mp4

• Webcam Capture and Preview Page

• Chat and Chat View Page

LIVE DEMO 💥

👾 Tech Stack

Client

• React.js
• React Router
• React Redux
• Material UI

Database and Hosting

• Firebase

🧰 Getting Started

‼️ Prerequisites

• Sign up for Firebase account HERE
• Install Node JS in your computer HERE

🔑 Firebase Config

To run this project, you will need to add the following config of your project to firebase file

apiKey

authDomain

projectId

storageBucket

NEXTAUTH_URL

messagingSenderId

appId

measurementId

⚙️ Installation

Install my-project with npm

npx create-react-app my-project --template redux

cd my-project

Install dependencies

🧪 Install Firebase and Material UI

Install Firebase

Install Firebase and copy the config of your project and setup locally.

npm install firebase

Install Material UI

Install material ui icons

npm install @mui/material @emotion/react @emotion/styled

Install dependencies

🔶 Other Dependency Info

🏃 Run Locally

Clone the project

git clone https://github.com/Priyanshu88/Snapchat-build.git

cd Snapchat-build

Install dependencies This is a React.js project bootstrapped with create-react-app.

npm install

Start the server First, run the development server:

npm run start

This is a React.js project bootstrapped with create-react-app.

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying src/app.js. The page auto-updates as you edit the file.

Learn More

This project uses react-webcam for making the snap, react-countdown-circlev-time for countdown on chatview page, also refer react-timeago, and uuidjs.

🚩 Deployment

To deploy this project run

Commands

firebase login

firebase init

npm run build

firebase deploy

🤝 Contact

Your Name - @twitter_handle - 2040020@sliet.ac.in

Project Link: https://github.com/Priyanshu88/Snapchat-build.git

---

Don't forget to leave a star ⭐️