Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Rose's Daycare

forthebadge forthebadge

A responsive and data-driven marketing website made for Rose's Daycare LLC powered by React, Redux, Firebase, and Styled-Components.

Table of Contents


  • React and React-Router allow us to code in components, which forces us towards code reusability and design consistency.
  • Redux plus some help from Local Storage let us hydrate and cache the page with updated content.
  • Firebase serves us our serverless backend. Database is used as a CMS for all content, Hosting gives us SPA hosting, Storage is a CDN for all our assets, and we use Functions to notify us via email when a new question arrives.
  • Styled-Components and Native CSS Variables gives us local scoped css, easy theming, conditional styling, and the power of a CSS-in-JS solution. Also their ThemeProvider allow us to change the theme programatically.
  • The new Flexbox and Grid standards provide a fully responsive and solid layout system.
  • CSS3 Transitions and Animations help us add a touch of interactivity and playfulness.
  • NWB babel and webpack configuration moved the project to create-react-app.
  • CSS Modules moved the project to styled-components.




Rose's Daycare is a small family business. They needed a site to help them find a new client quickly when this happens.

They wanted to share contact information, a bit of story of themselves and staff, plus a way to receive email notifications when people ask questions.

The page should also serve to keep parents in the loop of what their children are up to. At the moment the News page serves as a short outlet for snippets and photos of what is going on during the week. They might need a blog extension to host more of their day to day activities πŸš‚πŸš‹πŸš‹πŸš‹πŸš‹πŸš‹


To setup optional features you need to change these environment variables. Either add them to .env, or create a .env.local file in the root folder of the project (recommended).

# Github Repo, used in fork octicat corner
# Email in mailto links, used in footer
# Sentry url for errors logging in production
# Firebase database root url, for all content
# Google Maps API Key, for contact map

To change the content of the project you must create a key "content" in your Firebase database with values following the structure in store/initialState.js

To setup email notifications via Firebase Functions you must have a gmail account with 2-step verification activated, then add an application password. The readme at gmail-send goes into more detail if you get stuck. Finally run this command in the root folder of the project to setup required environment variables.

$ firebase functions:config:set gmail.user="" gmail.pass="password"


This project uses create-react-app, look at their incredible documentation if more advanced configuration is needed.

  • $ yarn install in the app's root directory will install all the necessary dependencies.
  • $ yarn start will run the app's development server.
  • $ yarn build creates an optimized production build.
  • $ yarn test will run Jest in watch mode.
  • $ yarn deploy will build and deploy to firebase, including functions.
  • $ yarn analyse will show a size visualization of our production bundle.
  • $ yarn format will run Prettier on the whole codebase.


Responsive marketing website powered by React, Redux, Firebase and Styled-Components.







No releases published


No packages published