A responsive and data-driven marketing website made for Rose's Daycare LLC powered by React, Redux, Firebase, and Styled-Components.
- 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 configurationmoved the project to create-react-app. CSS Modulesmoved 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 REACT_APP_REPOSITORY # Email in mailto links, used in footer REACT_APP_DEV_EMAIL # Sentry url for errors logging in production REACT_APP_RAVEN_URL # Firebase database root url, for all content REACT_APP_DATABASE_URL # Google Maps API Key, for contact map REACT_APP_GAPI_KEY
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="email@example.com" gmail.pass="password"
This project uses create-react-app, look at their incredible documentation if more advanced configuration is needed.
$ yarn installin the app's root directory will install all the necessary dependencies.
$ yarn startwill run the app's development server.
$ yarn buildcreates an optimized production build.
$ yarn testwill run Jest in watch mode.
$ yarn deploywill build and deploy to firebase, including functions.
$ yarn analysewill show a size visualization of our production bundle.
$ yarn formatwill run Prettier on the whole codebase.