Setting Up a Private GitHub Repository for a Flask-VueJS Project

Version control is essential for managing software projects efficiently. In this guide, we will walk through setting up a private GitHub repository, initializing a Flask-VueJS project, adding essential files, and defining an issue tracker for milestone tracking.

---

Step 1: Create a Private GitHub Repository

1. Go to GitHub and log in.
2. Click on the + (New) button in the top-right and select New repository.
3. Enter a repository name (e.g., household-service-v2).
4. Set visibility to Private.
5. Click Create repository.

To clone it locally:

git clone https://github.com/YOUR_USERNAME/household-service-v2.git
cd household-service-v2

---

Step 2: Add a README.md File

A README file helps document your project. Create one:

echo "# Household Service v2\nA Flask-VueJS application for managing household services." > README.md

Commit and push:

git add README.md
git commit -m "Added README"
git push origin main

---

Step 3: Create a .gitignore File

The .gitignore file prevents unnecessary files from being tracked.

echo "# Python
__pycache__/
*.pyc
venv/
.env

# Node
node_modules/
dist/" > .gitignore

Commit the file:

git add .gitignore
git commit -m "Added .gitignore"
git push origin main

---

Step 4: Set Up Flask-VueJS Project Skeleton

Flask (Backend)

1. Navigate to your project directory:

   mkdir backend && cd backend
   

2. Create a virtual environment:

   python3 -m venv venv
   source venv/bin/activate  # For macOS/Linux
   # OR
   venv\Scripts\activate  # For Windows
   

3. Install Flask:

   pip install flask
   

4. Create an app.py file:

   from flask import Flask
   app = Flask(__name__)
   @app.route('/')
   def home():
       return 'Hello from Flask!'
   if __name__ == '__main__':
       app.run(debug=True)
   

5. Run the Flask app:

   flask run
   

VueJS (Frontend)

1. Navigate back to the root folder:

   cd ..
   

2. Create a VueJS project:

   npx create-vue frontend
   cd frontend
   npm install
   npm run dev  # Start the Vue app
   

Commit the project structure:

git add backend frontend
git commit -m "Initialized Flask-VueJS project"
git push origin main

---

Step 5: Define an Issue Tracker for Milestone Progress

To track project milestones, create a Git tracker document:

touch git-tracker.md
echo "# Git Tracker for Household Service v2\n\n## Milestones:\n- [ ] Set up Flask backend\n- [ ] Initialize Vue frontend\n- [ ] Connect Flask API with Vue\n\n## Commits & Progress:\n- **$(date +%Y-%m-%d)** - Initialized Flask-Vue project (Commit SHA: XYZ)" > git-tracker.md

Commit and push:

git add git-tracker.md
git commit -m "Added Git tracker document"
git push origin main

---

Step 6: Add Collaborators (MADII-cs2006)

Using GitHub CLI

Ensure GitHub CLI is installed and authenticated:

gh auth login

Run the following command to add MADII-cs2006 as a collaborator:

gh api -X PUT "/repos/YOUR_USERNAME/household-service-v2/collaborators/MADII-cs2006"

Verify the collaborator list:

gh api "/repos/YOUR_USERNAME/household-service-v2/collaborators"

Using GitHub Web Interface

1. Go to GitHub Repository → Settings.
2. Click Manage Access.
3. Click Invite Collaborator.
4. Enter MADII-cs2006 and send the invite.

---

Bonus: GitHub Adding Collaborator Video

To learn how to add a collaborator using VSCode and WSL, refer to this tutorial:

---

Conclusion

By following these steps, you now have a fully initialized Flask-VueJS project with:

• A private GitHub repository
• A README.md for project documentation
• A .gitignore to prevent unnecessary files
• A working Flask backend and Vue frontend
• A Git tracker document for milestone tracking
• A collaborator added for project contributions

This setup ensures smooth collaboration and effective version control. 🚀 Happy coding! 🎯