[SDF10] Project: Mobile App

Project Brief: Build a Mobile App with Firebase

Create a mobile app using Firebase and Scrimba. This project will enhance your CSS and JavaScript skills, focusing on mobile app development.

Steps to Complete

• Access the Course: Start by going to Scrimba's mobile app course with Firebase.
• Course Length: The course includes 36 modules, taking about 2 hours and 30 minutes. Please complete up to and including lesson 30. Allocate 3-4 hours to fully engage with the material.
• Build the App: Follow the course to build a mobile app.
• Deployment: You ARE NOT REQUIRED TO DEPLOY your app for this project submission. You will only be submitting the files.

Learning Outcomes

• Learn mobile app building, styling, and deploying techniques.
• Understand data syncing and user authentication with Firebase.
• Make your web app mobile-responsive and user-friendly.

Project Requirements

• Complete up to and including lesson 30 of the Scrimba course.
• Develop a functional mobile app.

What is Firebase?

Firebase, offered by Google, is a platform for developing web and mobile apps efficiently. It provides features like Realtime Database, Authentication, Cloud Firestore, Hosting, and Cloud Functions. These services facilitate rapid app development, focusing on user experience rather than backend management. Check out the Firebase tutorial in the Scrimba project.

Code Along with the Shopping Cart App in VSCode

This guide will walk you through the process of forking the Shopping Cart Mobile App starter code from GitHub, and then coding along with Scrimba's course using Visual Studio Code (VSCode). By the end of this guide, you will have a local development environment set up to work on your Mobile App project.

Step 1: Fork the Repository

Forking allows you to have a personal copy of the project on their GitHub account, which you can then clone to your local machine, make changes, commit, and push back to your forked version without affecting the original repository.

1. Navigate to the Repository: Go to the GitHub repository. Look for a button labeled Fork in the top-right corner of the page.
2. Fork the Repository: Click the Fork button. This creates a copy of the repository in your own GitHub account, allowing you to make changes without affecting the original code.

Step 2: Clone Your Forked Repository

1. On your forked repository page, click the Code button and copy the URL under "Clone with HTTPS".
2. Open Visual Studio Code (VSCode) and access the terminal (Terminal > New Terminal).
3. Type git clone, paste the URL you copied, and press Enter. This clones the repository to your local machine.

Step 3: Open the Project in VSCode

1. Open Folder: In VSCode, go to File > Open Folder.
2. Select the Project Folder: Navigate to the location where you cloned the repository, select the folder, and click Open. Now, you should see the project files in the VSCode sidebar.

Step 4: Code Along with Scrimba

The course spans roughly two and a half hours. Completion of all 54 lessons is mandatory.

1. Access the Scrimba Course: Open the Let's Build a Mobile App with Firebase (scrimba.com) in your web browser.
2. Follow Along: As you progress through the Scrimba lessons, switch back to VSCode to apply what you've learned to your local project files.
3. Save Your Work: Regularly save your files in VSCode by pressing Ctrl+S (Windows/Linux) or Cmd+S (Mac).

Step 5: Test Your Game Locally

1. Open the HTML File: Right-click the index.html file in the VSCode sidebar and select Open with Live Server if you have the [Live Server extension](Live Server Extension for Visual Studio Code | Full Tutorial (youtube.com)) installed. Alternatively, you can open the file in your browser by navigating to the file location.
2. Test the Game: Interact with your game in the browser to test its functionality. Make adjustments in VSCode as needed.

Step 6: Commit and Push Changes

Once you are done and you wish to update your GitHub fork with the changes:

1. After making changes, commit them to your local repository. Use commands like git add ., git commit -m "description of changes", and git push to push changes to your forked repository on GitHub.

Step 7: Submit Your Project

Once you've completed and tested your app:

1. Generate a Public Link: If you've pushed your project to GitHub, your repository URL is what you'll need.
2. Submit the link: to your completed app via the Learning Management System (LMS) [Projects] tab.

Happy Coding!

Dive into game development with this project. Enjoy learning, applying your knowledge, and overcoming challenges along the way! You're welcome to take this project to the next level and deploy to Netlify after you have submitted.