Gatsby Starter Redux Firebase

Gatsby Starter Redux Firebase is a Gatsby starter for React developers that scaffolds a static site with Firebase authentication, a Redux-integrated Todo example, and a data-fetching component, created by muhajirframe.

What is Gatsby Starter Redux Firebase?

Gatsby Starter Redux Firebase is a project starter built on Gatsby that wires Firebase services into a React app. It takes a fresh Gatsby project and adds ready-made components: SignIn and SignOut authentication via react-firebaseui, a Todo example powered by react-redux-firebase, and a FetchingExample that demonstrates pulling data from Firebase. After you configure Firebase and run the build command, the starter outputs a static site into the /public directory.

Key Features

• Firebase authentication UI — includes SignIn and SignOut components built with react-firebaseui, giving you a working login flow without a custom auth implementation.
• Redux-based Todo example — a functional Todo app using react-redux-firebase that shows how to connect Redux state to Firebase data.
• FetchingExample component — reference code for reading data from Firebase and rendering it inside a Gatsby page.
• Gatsby CLI quick start — scaffold a new project with gatsby new my-new-website https://github.com/muhajirframe/gatsby-starter-redux-firebase, then run npm run develop for local development.
• Static build output — npm run build produces a production-ready static site in /public, ready to deploy to any static host.
• Based on gatsby-starter-firebase — extends the existing starter by muhajirframe with Redux and includes both the original example and the new Todo app.

Who is it for?

• Gatsby developers who want to add Firebase authentication and Redux to a site without starting from scratch.
• App builders creating serverless web apps that need user login and real-time data, since the starter includes the Firebase plumbing.
• Learners exploring react-redux-firebase who want a small, working example of Redux state management combined with Firebase backends.

What can you do with it?

• Prototype a Firebase app: use the Todo example and auth components to quickly build a functioning app with user accounts and data persistence.
• Learn by example: examine the FetchingExample and Todo code to understand the pattern for connecting Gatsby, React, Redux, and Firebase.
• Build a members-only site: start with the authentication components and add your own protected pages.

How does it work?

1. Install the Gatsby CLI globally with npm install --global gatsby-cli.
2. Create a new project by running gatsby new my-new-website https://github.com/muhajirframe/gatsby-starter-redux-firebase.
3. Navigate into the project folder and run npm run develop to start the development server.
4. For production, run npm run build to generate static files in /public.

FAQ

Is this starter free?

Yes, this is an open-source starter published on GitHub, so it is free to use and modify under the repository's license.

How do I install it?

Install the Gatsby CLI globally, then create a new project with gatsby new my-website https://github.com/muhajirframe/gatsby-starter-redux-firebase as shown in the Getting Started section. No other setup is required.

What is included?

The starter includes a FetchingExample data component, SignIn and SignOut authentication components using react-firebaseui, and a Todo example using react-redux-firebase. The build command outputs a static site to /public.

Does it come with Redux configured?

Yes, the starter integrates Redux through react-redux-firebase, and the included Todo example demonstrates Redux state management with Firebase in action.