itxsaaad/camify-webcam-app-mern

A webcam application using the MERN stack.

Camify - Your Creative Webcam Experience

Camify WebCam is a web application built using the MERN (MongoDB, Express.js, React.js, Node.js) stack. It is a dynamic web application that brings your webcam to life, allowing you to capture moments, apply artistic filters, and seamlessly share your media with friends and family. Elevate your webcam experience to a new level of fun and expression.

Explore the docs »

View Demo · Report Bug · Request Feature

Live Preview Project

Live Preview

Features

• Media Capture: Use your webcam to take stunning photos and record exciting videos directly from your browser.
• Creative Filters: Apply a variety of filters and effects to your media to add that perfect touch of artistry.
• Image Cropping and Resizing: Customize your media with easy-to-use cropping and resizing tools.
• User Authentication: Sign up, log in, and enjoy a secure and personalized experience.
• Cloud Storage: Your media files are securely stored in the cloud, accessible anytime, anywhere.
• Easy Sharing: Share your creations effortlessly with friends.

Built With

• Frontend: Built with React.js, Tailwind CSS, and other modern libraries, ensuring a smooth and responsive user experience.
• Backend: Built with Node.js and Express.js, providing a robust and scalable backend architecture, ensuring fast and secure server-side operations.
• Database: Built with MongoDB, ensuring a flexible and scalable data storage solution.Store and manage user data and media files using MongoDB.
• Authentication: Built with JSON Web Tokens and bcrypt, ensuring a secure and personalized user experience.
• Media Handling: Leverage modern libraries to capture webcam streams, apply filters, and manage media files.
• Security: Implement best practices to ensure the privacy and security of your data.

Getting Started

Prerequisites

• Node.js - JavaScript runtime built on Chrome's V8 JavaScript engine
• NPM - Node Package Manager

Installation

1. Clone the repo

git clone https://github.com/itxSaaad/camify-webcam-app-mern.git

2. Install NPM packages

npm install

3. Create a .env file in the root directory and add the following

NODE_ENV = development
PORT = 5000
MONGO_URI = <your_mongodb_uri>
JWT_SECRET = <your_jwt_secret>
SALT = <your_salt>

4. Create a .env file in the client directory and add the following

VITE_CLIENT_URL = http://localhost:5173
VITE_SERVER_URL = http://localhost:5000/api

5. Run the app

npm run dev

Contributing

Contributions are what make the open-source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the repo
2. Clone the project
3. Create your feature branch (git checkout -b feature/AmazingFeature)
4. Commit your changes (git commit -m "Add some AmazingFeature")
5. Push to the branch (git push origin feature/AmazingFeature)
6. Open a pull request

Contact

• Twitter: @itxSaaad
• LinkedIn: @itxSaaad
• Bento: @itxSaaad
• Email: [email protected]

License

Distributed under the MIT License. See LICENSE for more information.

Support

Give ⭐️ if you like this project!