Guide on How to use Stackblitz

What you'll learn

In this activity, you will:

• Set up and use StackBlitz for online development
• Connect your GitHub account to StackBlitz
• Fork and commit changes to repositories
• Complete a backend development exercise
• Submit your work through provided forms

⏱️ Estimated time: 30-45 minutes total

• StackBlitz setup: 10 minutes
• Coding practice: 15-20 minutes
• Exercise completion: 10-15 minutes

Prerequisites

• GitHub Account Required: You must have a GitHub account to use StackBlitz's GitHub integration
• If you don't have one, sign up for GitHub first

:computer: Activity Part One: Setting Up StackBlitz

Step One: Access StackBlitz

⏱️ Time: 5 minutes

1. Go to StackBlitz.com
2. Click "Continue with GitHub" (red highlighted button)
3. Authorize StackBlitz to access your GitHub account

:bulb: Tip Make sure to allow StackBlitz all necessary permissions to interact with your GitHub repositories. This will enable seamless integration for forking and committing.

Step 2: Open a GitHub Repository

⏱️ Time: 3 minutes

1. From StackBlitz dashboard, click "Open GitHub repository"
2. In the dialog box, enter the repository in format: owner/repository-name
   • Example: academic-telebort/Web3-C8-SvelteKit
3. Click "Open repository"

:bulb: Tip Double-check the repository name and owner. Common errors include:

• Typos in the repository name
• Using incorrect capitalization
• Forgetting the owner name before the slash

:computer: Activity Part 2: Coding Practice

Step 3: Work on Your Project

⏱️ Time: 10-15 minutes

1. StackBlitz will load the repository in the online IDE
2. Navigate to the appropriate folders (e.g., src/lib for components)
3. Make your changes and edits
4. Test your code in the integrated preview

:bulb: Tip Use the integrated preview to test your changes in real-time:

• The preview updates automatically as you type
• Check the console for any error messages
• Use the refresh button if the preview gets stuck

Step 4: Save Your Work (Fork & Commit)

⏱️ Time: 5 minutes

1. When ready to save, click the "Fork and Commit" button
2. Add a commit message describing your changes
3. StackBlitz will:
   • Fork the repository to your GitHub account
   • Commit your changes to the fork
   • Create a new branch with your modifications
4. Submit your stackblitz link to the form

:warning: Warning Important: Always click "Fork and Commit" before closing StackBlitz! Unsaved changes will be lost if you navigate away without committing.

Important Notes

:information_source: Info Key points to remember:

• Always Fork First: StackBlitz automatically forks repositories when you commit changes
• Branch Creation: Each commit creates a new branch (e.g., patch-83167)
• SvelteKit Structure: Understand the folder structure before making changes
• Commit Often: Save your progress frequently with descriptive commit messages

Workflow Summary

1. Login -> StackBlitz with GitHub
2. Open -> GitHub repository
3. Code -> Make your changes
4. Commit -> Fork and save changes
5. Repeat -> Continue development cycle

This workflow lets you code directly in the browser while maintaining proper version control through GitHub!

Troubleshooting Common Issues

:bulb: Tip If you encounter problems:

• Repository won't load: Check if the repository is public or if you have access
• Changes not saving: Ensure you're logged in to GitHub and have forking permissions
• Preview not working: Try refreshing the preview pane or check for JavaScript errors
• Can't find your fork: Check your GitHub profile under "Repositories"

:emoji:️ Activity Part 3: Backend Development Exercise

What this exercise covers

This exercise tests your understanding of backend development concepts covered in this lesson.

⏱️ Time: 10-15 minutes

This exercise consists of 10 objective questions.
Please make sure to answer ALL questions before submitting.

Instructions

1. Read each question carefully
2. Choose the correct answer for each question
3. Review your answers before submitting
4. Submit your form when you are done

:warning: Warning Submission Requirements:

• You must answer ALL 10 questions
• You can only submit the form once
• Make sure your internet connection is stable before submitting

:link: Access the Exercise Form Here

GitHub Profile Submission

After completing the exercise, please submit your GitHub profile link:

:information_source: Before submitting your GitHub profile:

• Ensure your profile is public
• Add a profile README if you haven't already
• Verify all your project repositories are visible

:memo: Submit Your GitHub Profile Here

Need Help?

:bulb: Tip If you're having trouble with any part of this activity:

• Review the lesson materials
• Check the troubleshooting section above
• Ask for help in the course discussion forum