jessefrench / IN-CLASS-simply-books

Simply Books

See Live Demo of this Template

• Get Started
• Starting the Project
• React Topics

Extra Info

• Using axios
• Deploying on Netlify

---

Starting the Project

1. Clone the repo on your local machine
2. Grab the credentials from your Almost Amazon project from earlier in the cohort.
3. Create a .env file at the root of the project
4. Copy/Paste the contents of the .env.sample file to your newly created .env file.
5. Copy over all of your Firebase values into the .env file.
6. Open the package.json file and change the name property to the name of your application, and author to your name.
7. From your command line, be in the root directory and run npm install OR npm i for short.
8. Next, run npm run prepare. This command sets up husky to track eslint errors on commit that will make your deploy fail on Netlify.
9. To start your application, run npm run dev. THIS IS THE COMMAND YOU WILL USE TO RUN YOUR DEVELOPMENT SERVER FROM NOW ON.
10. Open http://localhost:3000 with your browser.

If you see this, you are set to go!

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

NOTES:

• If you see the following error, you did not follow all the setup steps correctly and failed to add your Firebase creds. Go back and do that NOW.

React Topics

In this project, we are going to learn some of the basics of React by using a project that you are already familiar with.

Topics will include:

• Google Authentication with Firebase
• User specific data
• React basics and working with components
• State and working with events
• Rendering lists and conditional content (READ)
• Props
• Hooks
  • useState (State)
  • useEffect
• Routing (including dynamic routing)
  • Links & Navigation
• Forms (CREATE/UPDATE)
  • Two-way binding (listening to changes in input as well as the value)

All CRUD concepts touched in topics above

Deploying on Netlify

Netlify will automatically detect your project and prepopulate the settings, but should something go wrong and it does not, here are the commands:

• Build Command: npm run build
• Publish directory: .next

Additional Steps to Take on Netlify

• Add Environmental Variables

  • Any Enviromental variables you are using in your .env file should be added to Netlify.
    • Go to Site settings > Build & deploy > Environment > Environment variables and the keys and values there.

• Update Firebase URL Settings

  • In Firebase under Authentication select sign in methods, scroll to Authorized domains. Add your Netlify URL.

Learn More about Next.js

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.