Welcome to the Zeal Frontend Team!
This page is your starting point for getting up and running as a frontend engineer on the Zeal team.
| Field | Value |
|---|---|
| Version | 1.3.0 |
| Last Updated | January 19, 2025 |
| Owner | o.yasser@getzeal.io |
| Status | ✅ Current |
No specific person is assigned — reach out to the #frontend-team channel on Slack for support!
Your First Week Checklist
Follow these steps to get set up. Don't hesitate to ask your onboarding buddy or anyone on the team for help!
Day 1: Getting Set Up
1. Initial Setup
Follow the Development Environment Setup Guide to get the project running on your machine.
2. Access
Make sure you have access to our key tools:
| Tool | Description | Action |
|---|---|---|
| GitHub Repositories | Frontend code repositories | Request access from your manager for: • webmono - Monorepo with dashboards • whitelabel-website - Whitelabel website |
| Jira | Project management & tickets | Open Jira |
| Vault | Password & secrets manager | Access Vault • Setup Guide |
| Slack Channels | Team communication | Join #frontend-team, #all-tech, and your assigned squad channel |
| Figma | Design files & prototypes | Ping Eslam Nssar for the unified team account |
3. Say Hello! 👋
Introduce yourself in the #frontend-team Slack channel!
Days 2-5: Your First Contribution
4. Project Context
Familiarize yourself with our repositories and documentation:
| Resource | Status |
|---|---|
| webmono Repository | Monorepo with Merchant Dashboard, Admin Dashboard, Acquirer Dashboard, etc. |
| whitelabel-website Repository | Whitelabel ordering/booking website for merchants |
| Frontend Tech Stack | ✅ Available |
| System Architecture Overview | 🚧 Coming Soon |
| Codebase Tour | 🚧 Coming Soon |
Your work scope follows your squad's scope. Check with your lead or senior engineer to determine which repositories you'll be working with. It's beneficial to familiarize yourself with both repositories to understand our frontend architecture.
5. Your First Ticket
Wait for your first ticket to be assigned by a teammate or lead, then follow the Your First Ticket Guide to complete it.
6. Pair Programming
Schedule a pairing session with a team member to walk through a piece of the codebase.
Your First Ticket Guide
Here's how to tackle your first contribution:
Step 1: Get Your First Ticket
Your first ticket will be assigned to you by a teammate or lead. Leads can define onboarding tickets to help you get started. Wait for your assignment rather than picking tickets yourself.
Step 2: Understand the Task
- Read the ticket description thoroughly
- Check any linked Figma designs
- Ask questions in the ticket comments or Slack
Step 3: Create a Branch
# From the main branch
git checkout main
git pull origin main
# Create your feature branch
# Format: feature/<BOARD-CODE>-<TICKET-ID>-<optional-short-description>
# or: hotfix/<BOARD-CODE>-<TICKET-ID>-<optional-short-description>
git checkout -b feature/ATH-4123-short-description
Branch Naming Convention:
- Format:
feature/<BOARD-CODE>-<TICKET-ID>-<optional-short-description>orhotfix/<BOARD-CODE>-<TICKET-ID>-<optional-short-description> - BOARD-CODE: Based on the Jira board you're working on (e.g., ATH, HRM)
- TICKET-ID: The ticket number from Jira (e.g., 4123)
- Examples:
feature/ATH-4123-short-descriptionhotfix/HRM-4123-short-description
Step 4: Make Your Changes
- Follow the code style of surrounding code
- Write meaningful commit messages
- Test your changes locally
Step 5: Open a Pull Request
- Push your branch and open a PR
- Fill out the PR template
- Request review from your onboarding buddy
Step 6: Address Feedback
- Respond to review comments
- Make requested changes
- Get approval and merge! 🎉
Key Contacts
| Role | Contact | Slack |
|---|---|---|
| Frontend Lead | — | #frontend-team |
| Documentation Owner | o.yasser@getzeal.io | — |
| Figma Access | Eslam Nssar | DM on Slack |
Quick Links
- 📖 Environment Setup
- 📋 FE/BE Communication Process
- 🛡️ ACL Protection Rules
- 💬 #frontend-team on Slack
- 💬 #all-tech on Slack
Don't be afraid to ask questions! The team is here to help you succeed. No question is too small.
Change Log
| Version | Date | Changes | Author |
|---|---|---|---|
| 1.3.0 | 2025-01-15 | Updated ticket assignment process (assigned by teammates/leads), corrected branch naming convention (feature/hotfix/<BOARD-CODE>-<TICKET-ID>), added direct Slack channel links | Documentation Team |
| 1.2.0 | 2025-01-15 | Updated Jira link to zeal-pay.atlassian.net, updated Vault link to vault.zeal-members.com, added Vault setup guide link | Documentation Team |
| 1.1.0 | 2025-01-15 | Added repository links (webmono and whitelabel-website) to Access section and Project Context section | Documentation Team |
| 1.0.0 | 2025-01-15 | Initial version | Documentation Team |
Related Documentation
- Development Environment Setup - Get your development environment ready
- FE/BE Communication Process - Understand how we communicate with backend
- ACL Protection Rules - Learn about access control implementation
- Documentation Guidelines - How to contribute to documentation