Angular

Announcing Angular GitHub Clone for starter.dev showcases

Jan 25, 2022

4 min read

The Engineering team at This Dot Labs loves building open-source software, providing resources to the community, and collaborating with our clients and partners. In cooperation with the Angular team, we have developed an implementation of GitHub’s user interface to deliver a project to the community that demonstrates the power of Angular while providing a fully featured open-source application for developers to use as a learning tool. We’re including this Angular GitHub Clone as part of a new initiative we’re working on called “starter.dev GitHub showcases”, and we are excited about its future.

If you want to jump into the code, visit the GitHub repository, or you can check out the deployed application at https://angular-apollo-tailwind.starter.dev/.

Our Goals

Based on the initial projects by Trung Vo (Spotify clone / JIRA clone), we were looking to create an example project that goes beyond the basics of a TodoMVC application and really showcases the power of the technology. Specifically, we wanted to showcase Angular with routing, forms, and global state management.

What we built

For this project, we utilized Angular v13 with Apollo Client and Tailwind CSS to bring a GitHub user interface to life that features:

User login via GitHub OAuth User Dashboard featuring a user’s top repositories and gists for quick access Repositories including file tree exploration, file viewing, issue lists with filtering, and pull requests with filtering User Profiles with near feature parity with the GitHub UI

We also created a Serverless Framework based server to manage the OAuth handshake between the application and GitHub servers for security purposes.

Why Apollo Client?

At This Dot Labs, we love GraphQL, and GitHub has an amazing Public GraphQL API for consumption that we were able to leverage to build all the features in this application. Angular Apollo Client provides us with a GraphQL client and global state management out of the box.

Check out our Issues Store to see how we were able to leverage Apollo Client to fetch data from Github and inject it into a ComponentStore for consumption.

Why TailwindCSS?

Other projects we’ve seen demonstrate how to extend existing component libraries, and we didn’t want to replicate this behavior. Instead, we thought it would be great to demonstrate how to use a CSS utility framework in conjunction with Angular component stylesheets. This afforded us an opportunity to show the Angular community the power of a new tool and further community excitement around a framework agnostic technology that has reshaped the CSS space.

Why Serverless Framework?

We wanted an easy to use backend ecosystem for any developers wanting to fork and test this application. Additionally, for those looking to deploy this backend, we wanted to find an economical solution. With the serverless-offline plugin, we were able to provide a local first development environment to developers while giving them the ability to ship the API to their favorite cloud hosting provider that supports serverless functions.

How to use starter.dev showcases

We recommend starting with an exploration of the codebase. To get started, follow these steps:

# If you forked the project, replace this next line with your repo’s link
git clone git@github.com:thisdot/starter.dev-github-showcases.git
cd starter.dev-github-showcases

# frontend setup
cd angular-apollo-tailwind
cp env.example .env
yarn

# create your backend .env
cd ../starter-dev-backend
cp .env.example .env
# if you do not have serverless installed, please run: 
npm i -g serverless
yarn

In both .env files, you’ll see missing values for GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET. To generate these values, please follow GitHub’s Creating an OAuth App instructions to generate your personal client and secret that you can then input into your .env files.

Now, you can run yarn start in both directories and point your browser to localhost:4200 to see the app running. From here, you can start exploring and experimenting with project components.

What should I do next?

The project README includes several ideas and features that we’ve vetted for feasibility. We’ve given some high level details about the feature and included how difficult we believe it will be to accomplish. We think these are great features to both improve the app and provide you with an opportunity to experience Angular without having to start your own project or find projects that need contributions.

New to Angular and want feedback on your approach? Send us a pull request with your changes, and we’d be happy to review it and provide feedback. If it’s the first submission for a particular feature, we’d love to include your change and attribute it back to you.

We plan on extending starter.dev showcases to include more Angular stacks and examples to give the community even more resources. If you’re interested in contributing to starter.dev showcases or have ideas for new features or showcases, we’d love to hear from you. Our GitHub issues are open for collaboration and pull requests are always welcome, but not required.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Dustin Goodman

Engineering Manager with a passion for web and application development. Speaker and writer on work experiences and software development. Dog dad and musician fueled by coffee.

@dustinsgoodman @dustinsgoodman

Efficiently Extract Object References in Shopify Storefront GraphQL API

Efficiently Extract Object References in Shopify Storefront GraphQL API Introduction So, this blog post is born out of necessity and a bit of frustration. If you're diving into the world of Shopify's Storefront API, you've probably realized that while it's powerful, extracting data in the object reference from Metadata fields or Metaobjects (in the GraphQL query) can be a bit like searching for a needle in a haystack. This complexity often arises not from the API's lack of capabilities but from the sparse and sometimes unclear documentation on this specific aspect. That's precisely why I decided to create this post. As a developer, I found myself in a situation where the documentation and community resources were either scarce or not detailed enough for the specific challenges I faced. This guide is the result of my journey - from confusion to clarity. The Situation To understand the crux of my challenge, it's essential to recognize that creating metafields and metaobjects is a common practice for those seeking a more customized and controlled experience with Shopify CMS. In my specific case, I wanted to enrich the information available for each product's vendor beyond what Shopify typically allows, which is just a single text box. I aimed to have each vendor display their name and two versions of their logo: a themed logo that aligns with my website's color scheme and an original logo for use on specific pages. The challenge emerged when I fetched a list of all vendors to display on a page. My GraphQL query for the Storefront API looked like this: ` This was when I hit a roadblock. How do I fetch a field with a more complex type than a simple text or number, like an image? To retrieve the correct data, what specific details must I include in the originalLogo and themedLogo fields? In my quest for a solution, I turned to every resource I could think of. I combed through the Storefront API documentation, searched endlessly on Stack Overflow, and browsed various tech forums. Despite all these efforts, I couldn’t find the clear, detailed answers I needed. It felt like I was looking for something that should be there but wasn’t. Solution Before diving into the solution, it's important to note that this is the method I discovered through trial and error. There might be other approaches, but I want to share the process that worked for me without clear documentation. My first step was to understand the nature of the data returned by the Storefront API. I inspected the value of a metaobject, which looked something like this: ` The key here was the gid, or global unique identifier. What stood out was that it always includes the object type, in this case, MediaImage. This was crucial because it indicated which union to use and what properties to query from this object in the Storefront API documentation. So, I modified my query to include a reference to this object type, focusing on the originalLogo field as an example: ` The next step was to consult the Storefront API documentation for MediaImage at Shopify API Documentation. Here, I discovered the image field within MediaImage, an object containing the url field. With this information, I updated my query: ` Finally, when executing this query, the output for a single object was as follows: ` Through this process, I successfully extracted the necessary data from the object references in the metafields, specifically handling more complex data types like images. Conclusion In wrapping up, it's vital to emphasize that while this guide focused on extracting MediaImage data from Shopify's Storefront API, the methodology I've outlined is broadly applicable. The key is understanding the structure of the gid (global unique identifier) and using it to identify the correct object types within your GraphQL queries. Whether you're dealing with images or any other data type defined in Shopify's Storefront API, this approach can be your compass. Dive into the API documentation, identify the object types relevant to your needs, and adapt your queries accordingly. It's a versatile strategy that can be tailored to suit many requirements. Remember, the world of APIs and e-commerce is constantly evolving, and staying adaptable and resourceful is crucial. This journey has been a testament to the power of perseverance and creative problem-solving in the face of technical challenges. May your ventures into Shopify's Storefront API be equally rewarding and insightful....

Mar 29, 2024

4 mins

GraphQLShopify

4 Angular Component Libraries That are Perfect for Beginners

For beginners starting with Angular, the journey can feel daunting, especially when it comes to setting up projects from scratch. However, there is a range of outstanding Angular component libraries that alleviate this initial hurdle: ready-made toolkits, empowering newcomers to start building Angular applications without the complexities of bootstrapping their projects. Let’s take a look! Angular Material Angular Material is a UI component library by Google for Angular applications. It provides a variety of pre-built components following the Material Design guidelines, offering customization options, responsive design, and accessibility features. It's seamlessly integrated with Angular and offers extensive documentation and community support. NG-ZORRO NG-ZORRO is an Angular UI component library based on Ant Design by Alibaba. It offers a variety of customizable components for building modern web applications. With seamless Angular integration, responsive design, and accessibility features, NG-ZORRO simplifies development while following Ant Design principles. NG Bootstrap NG Bootstrap is a library for Angular developers to easily incorporate Bootstrap components into their applications without relying on jQuery. It offers Angular-specific directives and components, ensuring compatibility and performance within Angular projects while maintaining Bootstrap's responsive design and customization options. Clarity Design System Clarity is an open-source design system by VMware that offers a set of Angular components for building enterprise-scale applications. It provides components specifically tailored for data-centric applications, dashboards, and complex user interfaces. Clarity Design System emphasizes clarity, consistency, and usability in its components. The beginner’s journey can be both exhilarating and challenging. However, with the advent of powerful component libraries like Angular Material, NG-ZORRO, NG Bootstrap, and the Clarity Design System, the path becomes significantly smoother. These libraries offer pre-built components and design systems that eliminate the need to bootstrap projects from scratch. As beginners embark on their Angular journey, these libraries provide a sturdy foundation, allowing them to dive into development with confidence. By harnessing the capabilities of these libraries, beginners can not only expedite their learning curve but also craft exceptional Angular applications with ease and efficiency....

Mar 14, 2024

2 mins

Angular

Getting the most out of your project management tool

Getting the most out of your project management tool There are several project management tools on the market that all aim to help your team gain productivity. Each tool has guiding principles and philosophies for managing projects and structuring your team. These stratagems may only sometimes apply to your team, or your team may evolve and discover new priorities they want to track. In this post, we’ll cover the concepts you should consider when understanding how your team operates and how project management tooling principles can impact your teams. Once you have a tool, we’ll share how you can set it up to align with your team through an example of how we achieved results. Understanding how your team operates Does your team run an agile workflow? Are you a waterfall organization? Do you ascribe to Kanban methodologies? Do you take pieces of each of these processes and merge them to allow your teams to organize and operate in a meaningful way? I discuss this topic in more depth in our Engineering Leadership podcast, but these methodologies need to align with the metrics you care about. As organizational leaders, you need to share what you’re tracking with your teams. These typically include Objectives and Key Results (OKRs) or Key Performance Insights (KPIs) curated for your team’s functional area. Your project management tool could inform some of the metrics you select. For instance, DevOps teams may care about DORA, or customer success teams may need to track the time to resolve customer-facing issues. Development teams may leverage these tools to coordinate the work on efforts to avoid duplication of effort, while others may invest in velocity metrics to inform product teams of capacity. Regardless of what metrics you’re gathering, validating that your tool can provide these metrics is essential. Tooling Principles I’ve used various project management software, including Jira, Linear, GitHub Projects, Pivotal Tracker, Asana, and Trello. Each tool is structured slightly differently and has different best practices and approaches. For example, Jira attempts to be the all-in-one tool for organizations giving extreme flexibility in how you set and configure projects. On the other hand, you have tools like Linear that are strongly opinionated and have clear guidance on how to use the tool. When selecting a tool, it’s essential to understand its operating principles and how they relate to your team’s operating habits. This isn’t to say these tools cannot be adjusted to work for your use cases and needs, but some will be easier to adapt than others for specific situations. It’s important to select tools not only for their user-friendliness but also for their adaptability to your organization’s needs. In some cases, this may lead to your team utilizing multiple tools. Given any budget constraints, this may not be ideal, so as organizational leaders, it is vital to have those discussions with our peers to determine what would benefit our team the most. If a single tool cannot solve all your needs, try to limit each department to a single tool. Given their functional area and KPIs, you can likely manage this situation easily through monthly and quarterly reporting shared with your organization. If your department is using different tools, you will probably need to set up external reporting means to aggregate those sources of truth or find a way to connect these apps. Some of these tools have integrations that allow you to sync them, but I’ve found those setups to be clunky and create more overhead for simple reporting facets you need. Regardless of your decision, you must configure these tools for your organization’s success. Setting up your tool for success With our operation practices determined and the tool that makes sense for our team based on principles and experience found, it is time to set up the tool for your team’s success. I will share my setup based on how my team operates to demonstrate what this could look like for you. As a consultancy, my team tends to operate in a waterfall model, as clients have us coming in for specific projects with defined scopes. However, we demonstrate progress to clients on a weekly or biweekly basis. This means we need a tool to help us plan out several months of work and milestones while allowing us to manage it weekly. Our clients aren’t typically interested in micro-details for these projects but care about the macro level of deliverables against milestones. Given these parameters, our team leverages GitHub Projects for our project management. We like it as the tickets stay close to the code, and we can use GitHub’s built-in functionality to manage most of our needs. This prevents our team from learning multiple tools and allows us to build custom workflows quickly using GitHub Actions as needed. This is an example of a project we ran. I’ve omitted details for privacy reasons, but we ran weekly iterations on this project. We also tracked priority and sized issues to help us understand what deliverables we could demonstrate each week. This helped our team organize around how much we knew we could complete each iteration and allowed team members to pull in additional work each week, given we prioritized other issues and their size. If they needed another issue on a Friday before the iteration ended, they could pull the next issue assigned to them from the next iteration or backlog, allowing for a continuous flow of work week-over-week. If an iteration was not completed, it gave us the information we needed to understand why the work may not be complete and allowed us to plan better for the next iteration. This workflow allows our team to focus on the client's needs and operate in a way they have ownership over the work as each team member commits to the work they agree to before it’s brought into an iteration. If we needed milestones, we could also assign those to tasks and track them, leveraging other GitHub built-in features. These are generally the types of things you should look for when setting up a tool for your team. Conclusion Project management tools are not just for project managers to dictate work to teams. When aligned with how teams operate and their goals, these tools can help your teams achieve at a higher level. Creating processes that don’t align with your team’s daily function to gather non-priority metrics through tools creates resistance and challenges leading to non-performing teams. Suppose your team is struggling because deliverables are not aligning with business goals and metrics. In that case, this is an excellent opportunity to check your processes and team operations and realign them if you discover they are out of sync. At This Dot, no single process works for all teams and organizations. We work with our teams and clients to determine what processes align with their objectives and goals. The process described above works great for our team but may not work for your team. However, the principles outlined above can aid you in finding the process that works best for your team. If you need help finding your process, contact us to help your team find their groove....

Jan 17, 2024

6 mins

Project Management

How to Go from Software Engineer to AI Engineer with Shawn Wang

Shawn Wang discusses AI engineering’s potential impact on the software development labor market and developer experience. With the rise of artificial intelligence technologies, there is an increasing demand for professionals who can bridge the gap between AI and software engineering, and engineers are looking around for guidance on how to best learn AI. Shawn emphasizes the importance of acquiring core knowledge and skills in AI engineering, highlighting the need for a systematic approach to education and development. He envisions a future where AI engineering becomes a recognized profession, with specialized training programs and certifications. He further talks about mental models for approaching AI literacy, and skill building. Shawn also discusses the use of advanced AI technology in software development. He showcases tools like GPT Vision, which can automate tasks and generate code efficiently. While acknowledging the potential of AI in enhancing productivity, Shawn emphasizes the need to leverage AI tools to augment human capabilities rather than replace them. Download this episode here....

Apr 17, 2024

1 min

Artificial IntelligenceEngineering Leadership

Announcing Angular GitHub Clone for starter.dev showcases

Our Goals

What we built

Why Apollo Client?

Why TailwindCSS?

Why Serverless Framework?

How to use starter.dev showcases

What should I do next?

Dustin Goodman

You might also like

Efficiently Extract Object References in Shopify Storefront GraphQL API

4 Angular Component Libraries That are Perfect for Beginners

Getting the most out of your project management tool

How to Go from Software Engineer to AI Engineer with Shawn Wang

You might also like

Efficiently Extract Object References in Shopify Storefront GraphQL API

4 Angular Component Libraries That are Perfect for Beginners

Getting the most out of your project management tool

How to Go from Software Engineer to AI Engineer with Shawn Wang