Website Frontend Documentation

This is the Sparkfest 2025 website repository project for the tech community.

---

📌 Table of Contents

• Website Frontend Documentation
  • 📌 Table of Contents
  • 🛠 Tech Stack
  • 🚀 Getting Started
    • Prerequisites
  • 💁 Project Structure
  • Issue & Project Workflow
    • 1. Find an Issue
    • 2. Create a Branch
    • 3. Submit a Pull Request (PR)
    • 4. Code Review & Merge
  • Branching & Git Workflow
    • Branch Naming Convention
      • 1. Switch to develop branch
      • 2. Create a feature branch linked to an issue
      • 3. Make your changes in the code
      • 4. Once you're done with your changes, commit
      • 5. Push to remote branch
      • 6. Create a pull request (PR)
  • Commit Message Guidelines
    • Commit Message Format
    • Allowed Commit Types
      • Examples
  • 📋 Pull Request Guidelines
    • PR Title Format:
    • PR Description Template

---

🛠 Tech Stack

         

---

🚀 Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js (LTS version recommended)
• Git
• Yarn or npm

1. Create a new folder where you can store the project files, referred to as the Project Folder.

2. Open the command prompt and navigate to the Project Folder.

cd <PATH TO PROJECT FOLDER>

3. Clone the repository, adding . at the end to extract files to the current directory.

git clone https://github.com/Google-DSC-PUP/sparkfest-2025.git .

4. Install dependencies

npm install

5. Run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

---

💁 Project Structure

📦 sparkfest-2025
├── 📂 node_modules
├── 📂 public              # Static assets
├── 📂 src
│   ├── 📂 assets          # Images, icons, and other assets
│   ├── 📂 components      # Reusable UI components
│   │   ├── 📂 features   # Feature-specific components
│   │   ├── 📂 ui         # Generic, reusable UI components
│   ├── 📂 lib            # Utility functions and helpers
├── .gitignore
├── package.json
├── tailwind.config.ts     # Tailwind CSS configuration
├── tsconfig.json          # TypeScript configuration
├── App.css
├── App.tsx                # Main application entry point

---

Issue & Project Workflow

We use GitHub Projects to manage tasks and issues. Follow these steps when working on issues:

1. Find an Issue

• Go to the GitHub Issues page.
• Assign the issue to yourself.
• Move the issue to "In Progress" in the project board.

2. Create a Branch

• Use the branching convention.
• Start coding!

3. Submit a Pull Request (PR)

• Reference the issue in the PR description (e.g., Closes #123).
• Move the issue to "Review" in the project board.

4. Code Review & Merge

• Once approved, the PR gets merged into develop.
• The issue is moved to "Done."

---

Branching & Git Workflow

Branch Naming Convention

Branch Type	Naming Convention	Example
Main	main	main
Dev	dev	dev
Feature	feature/ISSUE-ID-feature-name	feature/123-add-auth
Bugfix	bugfix/ISSUE-ID-issue-name	bugfix/234-fix-footer

---

📋 Pull Request Guidelines

PR Title Format:

<type>(<scope>): <short description>

Example:

feat(auth): add user login functionality
fix(navbar): resolve mobile responsiveness issue

PR Description Template

✨ What’s New?
- [x] Briefly explain what was added

📷 Screenshots of website (IMPORTANT)
_Add relevant screenshots/gifs_

🔗 Related Issues
Closes #ISSUE_NUMBER

✅ Checklist (from issue)
- [ ] Code follows project conventions
- [ ] Linted & formatted
- [ ] Tested locally