devaryakjha / fcm_notifications_nextjs

This project demonstrates how to use Firebase Cloud Messaging (FCM) with Next.js. The UI is minimal and displays a table that shows the index, from, title, body, and data properties of the messages received.

FCM with Next.js

This project demonstrates how to use Firebase Cloud Messaging (FCM) with Next.js. The UI is minimal and displays a table that shows the index, from, title, body, and data properties of the messages received.

Getting Started

To get started with this project, follow these steps:

1. Clone the repository to your local machine.
2. Install the dependencies by running bun install.
3. Create a Firebase project and enable FCM.
4. Rename .env.example to .env.development.local and add you firebase configuration to it.
5. Run the development server by running bun run dev.
6. Open http://localhost:3000 in your browser.

Usage

Once the development server is running, you can view the messages received by opening the browser console. The table on the page will also display the messages.

Contributing

Contributions are welcome! If you find a bug or have a feature request, please open an issue. If you would like to contribute code, please fork the repository and submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

🚀 About Me

Hello there! 👋

I'm a 23-year-old frontend software developer based in Mumbai, India. Currently, I work at Tifin, a fintech startup based in the United States, where I contribute to building innovative and user-friendly software solutions.

Outside of work, I have a passion for exploring the magical world of Harry Potter and consider myself a devoted Potterhead. In my free time, you'll often find me engrossed in watching anime series or diving into captivating sci-fi movies and TV shows. I thoroughly enjoy indulging in these forms of entertainment, which not only entertain but also inspire me creatively.

Through my GitHub projects, I aim to showcase my skills and expertise as a frontend developer. I strive to create well-designed, efficient, and user-centric applications that make a positive impact. I believe in continuous learning and constantly honing my craft to stay up to date with the latest trends and technologies.

Thank you for visiting my GitHub profile. Feel free to explore my projects and don't hesitate to reach out if you have any questions or collaborations in mind. Let's connect and build amazing things together!

Happy coding! ✨

Authors

• @devaryakjha

🔗 Socials

fcm_notifications_nextjs's Issues

Question

Is there a way to not hardcode this config in the SW file?

fcm_notifications_nextjs/public/firebase-messaging-sw.js

Lines 6 to 14 in 22e7af9

	const firebaseConfig = {
	apiKey: "your_keys",
	authDomain: "your_keys",
	projectId: "your_keys",
	storageBucket: "your_keys",
	messagingSenderId: "your_keys",
	appId: "your_keys",
	measurementId: "your_keys",
	};

I know that process.env is a part of Node.js so It's not available in the vanilla javascript. but I'm looking for a way to not include them in the repo. to easily update them on deployment.