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.
- Application Home page & Demo
2023-03-25-12-51-52.mp4
- Webcam Capture and Preview Page
- Chat and Chat View Page
Database and Hosting
|
![]() |
|
![]() |
![]() |
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
Install my-project with npm
npx create-react-app my-project --template redux
cd my-project
Install dependencies
Install Firebase and copy the config of your project and setup locally.
npm install firebase
Install material ui icons
npm install @mui/material @emotion/react @emotion/styled
Install dependencies
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.
This project uses react-webcam
for making the snap, react-countdown-circlev-time
for countdown on chatview page, also refer react-timeago
, and uuidjs
.
To deploy this project run
firebase login
firebase init
npm run build
firebase deploy
Your Name - @twitter_handle - [email protected]
Project Link: https://github.com/Priyanshu88/Snapchat-build.git