Don't Pay For a Website Again: ChatGPT to Build Your Website | Lesson 2

Introduction

In this tutorial, we will learn how to set up a website using Visual Studio Code, React, and Firebase. This is a part of a series designed to help you create a fully functional website without the need for paid platforms like Shopify or WordPress. By following these steps, you'll enhance your front-end development skills while leveraging ChatGPT for assistance.

Step 1: Setting Up Visual Studio Code

1. Download and Install Visual Studio Code

   • Visit the Visual Studio Code website.
   • Download the version suitable for your operating system.
   • Install the application by following the on-screen instructions.

2. Install Required Extensions

   • Open Visual Studio Code.
   • Go to the Extensions view by clicking on the Extensions icon in the sidebar or pressing Ctrl+Shift+X.
   • Search for and install the following extensions:
     • ESLint
     • Prettier - Code formatter
     • Live Server (optional for live preview)

Step 2: Creating a New React Project

1. Install Node.js

   • Download and install Node.js from the official website.
   • Choose the LTS version for stability.

2. Create a New React App

   • Open the terminal in Visual Studio Code (`Ctrl+``).
   • Run the following command to create a new React project:

     npx create-react-app my-app
     

   • Navigate to the project directory:

     cd my-app
     

Step 3: Setting Up Firebase

1. Create a Firebase Account

   • Go to the Firebase website.
   • Click on "Get Started" and create an account if you don't have one.

2. Create a New Firebase Project

   • In the Firebase console, click "Add Project".
   • Enter your project name and follow the prompts to create it.

3. Register Your App with Firebase

   • In your Firebase project overview, click on "Add app".
   • Choose "Web" and complete the registration process.
   • Copy the Firebase configuration code snippet provided.

4. Install Firebase SDK

   • In the terminal, run:

     npm install firebase
     

5. Integrate Firebase with Your React App

   • Open src/index.js and add the Firebase configuration:

     import { initializeApp } from "firebase/app";
     
     const firebaseConfig = {
       apiKey: "YOUR_API_KEY",
       authDomain: "YOUR_AUTH_DOMAIN",
       projectId: "YOUR_PROJECT_ID",
       storageBucket: "YOUR_STORAGE_BUCKET",
       messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
       appId: "YOUR_APP_ID"
     };
     
     const app = initializeApp(firebaseConfig);
     

Step 4: Setting Up GitHub Integration

1. Create a GitHub Repository

   • Go to GitHub and sign in to your account.
   • Click on "New" to create a new repository.
   • Name your repository and choose visibility settings (public or private).

2. Initialize Git in Your Project

   • In your project directory, run:

     git init
     

   • Add the remote repository:

     git remote add origin https://github.com/USERNAME/REPOSITORY_NAME.git
     

3. Commit and Push Your Code

   • Stage all changes:

     git add .
     

   • Commit the changes:

     git commit -m "Initial commit"
     

   • Push to GitHub:

     git push -u origin master
     

Step 5: Deploying Your Website with Firebase Hosting

1. Install Firebase Tools

   • In the terminal, install Firebase CLI globally:

     npm install -g firebase-tools
     

2. Log in to Firebase

   • Run the command:

     firebase login
     

3. Initialize Firebase Hosting

   • In your project directory, run:

     firebase init
     

   • Select Hosting, and follow the prompts to set it up.

4. Deploy Your Website

   • Build your React app:

     npm run build
     

   • Deploy to Firebase:

     firebase deploy
     

Conclusion

You have successfully set up a React project, integrated Firebase, connected your project to GitHub, and deployed your website using Firebase Hosting. By following these steps, you’ve taken a major step towards mastering front-end development and building websites without relying on paid platforms.

Next, consider exploring more advanced features of React and Firebase to further enhance your website's functionality. Don’t hesitate to utilize ChatGPT for coding assistance as you continue your learning journey!