Sept 25th
Front-End Engineering in 2024 & Mastering React

Oct 2nd
Building Large Scale Web Apps

Oct 9th
Debugging + Testing + Interviewing

Oct 16th
Leveling Up From Junior To Senior To Staff

Leveling Up From Junior To Senior To Staff

Levels

Junior — Senior — Staff

Good Practices

Wrap Up!

Q/A!

Any questions before we get started?

Levels/seniority varies from company to company, and sometimes team to team

A Staff Engineer/Principal in one company can have the same breadth/workspace as a Senior Engineer at another.

Engineer

Senior Engineer

Staff Engineer

Engineering Manager

Sr. Engineering Manager

Director

Sr. Director

Sr. Staff Engineer

Principal Engineer

New Grad/Intern

Distinguished Engineer

Big Company

Oftentimes recognized as the terminal level

Big Company

Engineer

Senior Engineer

Engineering Lead

New Grad/Intern

Small Company

Focus on delivering smaller features and bug fixes. Collaborate on team projects, but you're usually guided by more experienced engineers for more complicated tasks.

Learn from peers and seniors. Pair programming and asking for feedback is key at this level.

Collaborate closely with immediate team and product owners. Focus needs to be done on understanding business requirements.

Delivering and shipping code + features is important.

Focus on driving significant features and projects. Take ownership of more complex initiatives that require technical expertise and broader project management. Collaborate across teams and influence technical direction.

Mentor peers and juniors. Provide guidance through pair programming, design reviews, and code reviews. Your feedback is crucial to the development of others.

Collaborate with cross-functional teams. Work closely with product managers, designers, and other stakeholders to ensure that technical solutions align with business goals.

Delivering high-quality code and leading by example are key responsibilities. Ensure that best practices, standards, and processes are consistently followed across projects.

Drive large-scale, cross-functional projects. Own architectural decisions and provide direction for complex, multi-team initiatives. Be the go-to person for resolving intricate technical challenges.

Set the vision for the technical roadmap. Align long-term technical direction with business strategy, influencing the architecture and overall engineering practices.

Mentor senior engineers and lead by example. Play an active role in growing the team’s technical and leadership capabilities, setting an example of technical excellence and innovation.

Collaborate across the entire organization. Act as the liaison between engineering, product, and leadership teams to ensure alignment on company-wide goals.

Influence culture and processes. Take ownership of improving processes around coding, documentation, reviews, deployment, and operational excellence, ensuring scalable and sustainable engineering practices.

Project: Building a Data Visualization Feature for a Dashboard

Project: Building a Data Visualization Feature for a Dashboard

Grab a set of tickets for UI components: Work on specific tasks like building reusable components (e.g., charts, tables, or graphs) for the dashboard based on design specifications.
 

Ship feature updates: Implement the frontend code for these components and ensure they match the design and are responsive. Focus on smaller, well-scoped tasks.
 

Testing: Write unit and integration tests for the components they’ve worked on, making sure the visual components display correctly with mock data.
 

Code Reviews: Submit pull requests (PRs) and address feedback from peers and seniors. Review code from other juniors or peers for smaller, non-complex features.
 

Bug Fixes: Identify and fix bugs related to the visual components they worked on after receiving feedback from QA or during team testing.

Project: Building a Data Visualization Feature for a Dashboard

Craft initial ERDs (Engineering Resource Documents): Lead the technical scoping and define the architecture for the entire feature. This involves understanding data sources, APIs, and how frontend components will interact with backend services.

Break down large features into manageable tasks: Divide the feature into a set of tickets for the junior engineers to tackle. Ensure that each task is clear, scoped appropriately, and aligned with overall project goals.

Mentor juniors and peers: Provide guidance on frontend best practices, from component architecture to performance optimizations. Review PRs with a focus on code quality, maintainability, and scalability.

Collaboration with design and backend teams: Work with UX/UI designers to ensure components are aligned with the product vision. Collaborate with backend engineers to define the data requirements, API contracts, and data flow.

Own performance and accessibility standards: Implement optimizations for rendering large datasets in the dashboard, ensuring responsiveness and smooth user interactions. Address any concerns related to the accessibility of the dashboard components.

Project: Building a Data Visualization Feature for a Dashboard

Own the technical roadmap for the project: Define the broader vision of how this new feature fits into the overall product architecture. Lead discussions on choosing the tech stack for rendering complex data visualizations (e.g., D3.js, Recharts) and handling state management (e.g., Redux, Zustand).

Set the standards for frontend architecture: Establish the principles for component reuse, state management, and code structure across the entire dashboard project.

Work on cross-team initiatives: Coordinate with backend, product, and infrastructure teams to ensure that frontend performance, scalability, and data-fetching strategies align with the backend architecture.

Solve long-term architectural challenges

Drive organization-wide initiatives: Lead initiatives for improving documentation, testing standards, and CI/CD processes for frontend code.

Mentor senior engineers and guide teams: Help senior engineers align on frontend best practices and strategic goals. 

Q&A

Proactive Communication

Well-crafted Pull Requests

ERDs/PRDs

Regular 1-1s/Pairing Sessions

Brag Doc

Brag Doc

Regular 1-1s/Pairing Sessions

Understanding Product + Cross-Team Collaboration

Keep the team updated on progress, blockers, and changes. Open communication ensures alignment and prevents last-minute surprises.

Team Meetings | Syncs | Stand-ups | Async communication (e.g. Slack)

When approaching another engineer with a question, it's important to first attempt debugging and gather as much context as possible. This shows that you’ve put in the effort to solve the problem and allows the other engineer to provide more effective help.

A: Hey, I'm having trouble with a bug where my component isn't rendering correctly. Do you know what could be wrong?

B: Hey, I’m working on a component that’s supposed to render a list of items. I’ve tried logging the state, and it seems the items array is populated correctly, but the component doesn’t re-render when the state updates. I’ve checked the React DevTools, and it shows the state is updating. Any idea what else I might be missing?

Regularly engage with your manager (and sometimes your peers) to share insights and troubleshoot challenges.

- Regulary scheduled 1-1s with your manager
- Non-regular scheduled 1-1s with teammates/colleagues

Deeply understand the product’s goals and how your work impacts the user experience. Actively collaborate with cross-functional teams, such as design, product management, and backend, to ensure cohesive and aligned solutions that meet both technical and business objectives.

- Insurance?
- Food Marketplace?
- Consulting for a client?
- Internal Tool/B2C/B2B?

Write clear, concise PRs with a well-documented description of what the change is, why it’s needed, and how it works. This helps reviewers and future engineers!

- Write a Clear Pull Request Description

- Provide Testing Steps for Reviewers

- Add Inline Comments Where Helpful
- Include Multiple Reviewers

Create comprehensive documents for new features or projects that outline the technical and product specifications. This provides clarity for the team and stakeholders.

Maintain a running document of your key contributions, projects, and learnings. This helps track progress and provides a record for performance reviews.

Where are you today?

New Grad/Looking for Work

Junior/Intermediate looking for their next role

Established in Career and Content at the moment

Applying Approach

Quantity

Apply broadly to increase your chances. For roles that don't seem special to you, submit your application and move on without overthinking.

Quality

For roles that resonate with you, spend extra time personalizing your application and exploring the company. If possible, seek referrals or engage with employees directly.

Applying Approach

For Roles That Stand Out To You

Take extra care in your application—research the company, tailor your resume, get a referral if possible, and consider sending a cold email to connect directly with hiring managers.

For Roles That Don't Stand Out as Much

Submit your application fairly quickly and move on. Don’t invest too much time!

Where to Apply?

FAANG and the Likes

Fortune500 Big Companies

Medium-Sized Companies

Very Small Start-Ups

Industries

Consumer facing businesses

B2Bs

Web3 companies

FinTech, E-commerce, Gaming, EdTech

How I structure my applications

Companies/Roles I'm most interested in — Follow when applications open up, message recruiter/engineer in the company, try and get a referral, cater my Resume/application as much as possible.

Companies/Roles that appear interesting — Submit your application with a polished resume and cover letter. Follow up if you don’t hear back within a reasonable timeframe, but keep your expectations flexible.

Companies/roles that I would work for but not top of my list — Send out a standard application with your resume. Don’t spend too much time customizing for these roles—focus on quantity over personalization.

Referrals

They Help!

Referrals can significantly boost your chances of landing an interview by getting your resume directly in front of recruiters.

Ideal — get referrals from someone you've closely worked with before. These carry the most weight!

Even if you haven’t worked closely with them, a connection at the company can still refer you. However, be aware that some companies may have restrictions on who can refer/how many they can refer.

When asking for a referral — keep the message brief/curt

"Hi [Name], I noticed [Company] has an opening for [Role]. Since we’ve worked together in the past, would you be open to referring me for this position? I would really appreciate it!"

Boards

Company Career Pages

LinkedIn Job Board

HackerNews Jobs | Wellfound

Recruiter Reach-Outs

These are a great way to get to the interview stage

More likely to happen for you once you build experience

These come more often when you're already working

LinkedIn

Recruiters use LinkedIn often to reach out to candidates!

LinkedIn

LinkedIn / Other Good To Do Things

Post semi-regularly on LinkedIn. Something new you learned? A recent project that went public to all users? A side-project you've been working on? Post about it!

Want to write more? Consider sharing your learnings through blog-posts + accompanying LinkedIn posts. (example. Custom blog site with something like Astro or something easy to do with Medium).

[Tesla] Fullstack Software Engineer, Vehicle Software, Diagnostics

Palo Alto, California

Maliha Islam

[Pharmaguide] Senior Full-Stack Developer

Canada-wide (preferably GTA)

Emad Al-Shihabi

[Doordash] Engineering

Mostly US / Some roles in Toronto

Hassan Djirdeh

More roles to open up on my team next year if you're interested in Experimentation Platform

Anyone else wants to share — DM me and/or post in our #general channel!

(also open for Juniors to interview!)

We learned about Front-End Engineering, React, some strategies when working with large-scale applications, interviewing, and applying.

Of course we didn't cover everything but I hope the sessions we've discussed have been helpful for everyone.

I might send a survey for feedback sometime in the next few days.

Thank you!

Q&A