Skip to content

Simple project for "Building Simple Websites Without Backend" Reply Labcamp Hands On

Notifications You must be signed in to change notification settings

ilpuglio/handson-labcamp-websites-without-backend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

"Building Simple Websites Without Backend" Labcamp

Demo for Reply Labcamp

Hands on

Fork the project

  1. Fork the project into your GitHub account https://github.com/ilpuglio/handson-labcamp-websites-without-backend.git
  2. Clone the project from your GitHub account git clone https://github.com/XXX/handson-labcamp-websites-without-backend.git
  3. Checkout the branch related to your group (eg. group-1) git checkout group-1
  4. run npm install and then npm start to run the project on localhost:3000
  5. Setup Netlify account connecting it to your GitHub account

TODO steps

  • Step 1: Import "ProductsList", "AddProduct" and "NewProduct" components inside App.js
  • Step 2: render ProductsList component inside the render function of App.js
  • Step 3: bring to life the list of products inside ProductsList component (using state)
  • Step 4: Import Firebase inside App.js and initialize it with this configuration
// Initialize Firebase
const config = {
  apiKey: "AIzaSyD-9xGzU36RhkNmg6B_NW0hMWS3egw_T3o",
  authDomain: "labcamp-sites-without-backend.firebaseapp.com",
  databaseURL: "https://labcamp-sites-without-backend.firebaseio.com",
  projectId: "labcamp-sites-without-backend",
  storageBucket: "labcamp-sites-without-backend.appspot.com",
  messagingSenderId: "985712486505"
};
firebase.initializeApp(config);
  • Step 5: inside the componentDidMount function of ProductsList component, fetch data from Firebase and fill the state with the real data
  • Step 6: render NewProduct component inside the render function of App.js
  • Step 7: connect every input inside NewProduct component to the state using onChange prop
  • Step 8: handle the click of the submit button of NewProduct component using onClick prop
  • Step 9: push the new product from the state in Firebase using the set function on a ref of the database

Are you ready to see your App automagically deployed in production? Push your changes to GitHub

  • Step 10: render AddProduct component inside the render function of App.js
  • Step 11: inside the componentDidMount function of AddProduct component, fetch data from Firebase and fill the state with the real data
  • Step 12: pass the options from the state to the select component inside AddProduct and handle onChange event
  • Step 13: handle the click of the submit button of AddProduct component using onClick prop
  • Step 14: push the new quantity of the selected product from the state in Firebase using transactions on a ref of the database

About

Simple project for "Building Simple Websites Without Backend" Reply Labcamp Hands On

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published