Repository files navigation

• App Description
• Questions, Comments, Concerns
• Dependencies and Inspiration
• Setting Up Cloud Firestore
• Folder Structure
• Scripts
  • npm run dev
  • npm run build
  • npm run start
• Setup and Running Example
• Live Demo

This sample app demonstrates how to create a live list updated by user input in the provided status textbox using reactjs, next.js, redux, and cloud firestore (a firebase product).

Please direct any questions, comments, or concerns to theissues section of the repo. Thanks for your feedback.

This project was seeded bycreate-next-app. For general questions about the setup of next.js and the structure visit the previously linked github.

This project is inspired by theexamples made by the nextjs team.It combines ideas from both theirwith-reduxandwith-firebase-authentication examplesto show how to create harmonization between redux and, in my case, cloud firestore.

The project structure is made with going further in mind. Actions and reducers are movedinto their own directories since there should be multiple of them in a full web app. A libdirectory has been added for constant variable and to access the db.

my-app/  README.md  package.json  next.config.js  components/    Head.js    Nav.js    AddPost.js    Loading.js    PostItem.js    PostList.js  pages/    index.js  lib/    const.js    db.js  static/    favicon.ico  reducers/    postReducer.js  actions/    index.js    types.js    postActions.js  store.js

Cloud firestore setup is similar to firebase realtime database setup.

The main thing that is need are the initialization keys generated when making a databaseon the site so the example app works.

Go tofirebase.google.com. Login or create an account ifyou don't already have one.

Then, go to console. Select the "Add Project" square.

Name your project anything you like and then on the following page select the option"Add Firebase to your web app".

A model will appear with configuration information. Copy the entire config variable andpaste it over the placeholder one in ../lib/db.js.

Then you are good to go. Your app will start using your Cloud Firestore.

To run the project simply clone this repository and navigate into it.

Run npm install to acquire dependencies.

Then simply perform the commandnpm run dev.

Runs the app in the development mode athttp://localhost:3000.

Builds the app for production to the.next folder.

Starts the application in production mode.

This script is made with heroku in mind. There is a port variable that needs to bespecified for it to run. Heroku needs this for deployment.