Figma is a vector graphics editor and prototyping tool designed for open collaboration, which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows. Figma can be used extensively for free and the paid plans are only needed for more advanced needs. The Figma Mirror companion apps for Android and iOS allow viewing Figma prototypes on mobile devices. The feature set of Figma focuses on use in user interface and user experience design, with an emphasis on real-time collaboration.
Templates and design assets
Chakra UI design system files
EcosystemOS Designs system & UI Components
UX Sitemap Template & Components
User Story Task Flow Templates (desktop & Mobile)
Communications & Workflow Management
Slack
Slack is a proprietary business communication platform developed by American software company Slack Technologies. Slack offers many IRC-style features, including persistent chat rooms organised by topic, private groups, and direct messaging.
Trello
Trello is a web-based, Kanban-style, list-making application and is a subsidiary of Atlassian. Trello is a relatively easy, mostly free, flexible, and visual way to manage projects and organise project management information.
Github
GitHub, Inc. is a subsidiary of Microsoft which provides hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features
Product Management
Notion
Notion is a software designed to help members of a company or organization coordinate deadlines, objectives, and assignments for the sake of efficiency and productivity. Product management is a cross-functional work at companies and Notion provides great flexibility, simplicity and customization.
Front-End
React
React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.
Chakra
Chakra UI is a simple, modular, and accessible open-source React component library that gives the building blocks needed to build React applications.
Storybook
Storybook is a tool for UI development. It makes development faster and easier by isolating UI components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.
Back-End
GraphCMS
GraphCMS - a native GraphQL headless CMS allows building digital experiences with all your backends, frontends, and services, working together in harmony. Build modern applications for any platform with an API-first approach, with access to powerful APIs. Deliver omnichannel experiences at scale without compromising on performance. GraphCMS is 100% GraphQL native. GraphCMS is a fully-hosted SaaS platform with queries cached across 190 edge CDN nodes globally
Hasura
The Hasura GraphQL engine makes data instantly accessible over a real-time GraphQL API, to build and ship modern apps and APIs faster. Hasura connects to databases, REST servers, GraphQL servers, and third party APIs to provide a unified realtime GraphQL API across different data sources.
Amazon Web Services (AWS) Serverless
For developing AWS lambda functions based on the serverless framework using NodeJS and using the following key services by AWS:
Amplify, AppSync, API Gateway, DynamoDB, S3, CloudFront, Cognito, CloudSearch additional AWS services as needed
Simple Email Service (SES), CloudWatch, Simple Queue Service (SQS), Simple Notification Services
Hosting Front-End
AWS Amplify (Amazon)
A fully managed service for deploying and hosting static web applications, with built-in CI/CD workflows that accelerate your application release cycle. Simply connect your application's code repository in the Amplify console, and changes to your front end are deployed in a single workflow on every code commit.
Netlify
San Francisco-based company that offers hosting and serverless backend services for web applications and static websites. Automating modern web project deployments. It can replace hosting infrastructure, continuous integration, and deployment pipeline with a single workflow, and enables to integrate dynamic functionality like serverless functions, user authentication, and form handling as the projects grow.
Vercel
Vercel is a cloud platform for static sites and Serverless Functions that fits with product delivery workflow. It enables developers to host websites and web services that deploy instantly, scale automatically, and requires no supervision, all with no configuration.
Testing & QA
Testing Code Quality - ESLint
ESLint is a static open-source code analysis tool for identifying problematic patterns found in JavaScript code. Rules in ESLint are configurable, and customised rules can be defined and loaded.
ESLint covers both code quality and coding style issues. ESLint statically analyses code to quickly find problems.
ESLint is built into most text editors and one can run ESLint as part of any continuous integration pipeline. Many problems ESLint finds can be automatically fixed. ESLint fixes are syntax-aware to not experience errors introduced by traditional find-and-replace algorithms.
Testing UI Components - Storybook
Testing with Storybook. The simplest testing method is manual. Publish your Storybook or run it locally, then look at every story to verify its appearance and behaviour. This is appropriate for smaller Storybooks. As you add more stories, manual testing becomes infeasible.
Use automated testing to catch bugs and regressions.
A complete Storybook testing strategy combines the following techniques to balance coverage, accuracy, and maintainability.
Automated Application Testing - Puppeteer
Puppeteer is an open-source headless browser supported by Google that provides automated control of a web page in an environment similar to popular web browsers, but they are executed via a command-line interface or using network communication.
It is particularly useful for automated testing for web pages and apps, as it is able to render and understand HTML the same way a browser would, including styling elements such as page layout, color, font selection and execution of JavaScript and Ajax which are usually not available when using other testing methods.
Puppeteer is a Node library that provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol.