It's also being used as a learning opportunity for the following tools and technologies:
Learning Log
Project Management
- Making a project brief.
- Separation of concerns to different team member roles.
- Using GitHub projects more effectively.
- Separating the backlog into swimlanes based on team member roles.
- Setting up priority, size, role, and roadmap views.
- Agile Methodology.
- Recognizing that project requirements can change over time. Avoid making concrete decisions and always overestimate based on historical data at the start when you know understand the least about the project (Cone of uncertainty).
- Working in sprints.
- Avoiding multitasking.
- The only measure of progress is working software.
- Let the team make the decisions.
UI/UX Design
- Doing UX research and identifying user groups.
- Making low-fidelity and high-fidelity wireframes.
- Gathering inspiration from UI Patterns, Tuk, Awwards, and Dribbble.
- Using components with properties, variables, styles, and auto layout.
- Making glassmorphic components.
- Creating a responsive type scale that integrates tightly with components.
- Creating a color palette based on standardized tailwind colors.
- Relying on existing tailwind primitive tokens, and mapping them to semantic tokens for component development.
- Creating a UI Kit and building components on top of it.
- Iterating on past designs and coming up with different variations to compare side-by-side.
- Creating prototypes with hover, click, and scroll interactions.
Front-End Development
- Using pnpm instead of npm or yarn.
- Setting up only-allow to enforce the use of pnpm instead of npm.
- Adding custom scripts to the package.json.
- Using TypeScript properly (Primitive types, function types, complex types, union types, type narrowing, object types/interfaces, type extensions, type nesting).
- Using Chrome DevTools and React DevTools for debugging.
- Building UI components bottom up (or inside out) using Storybook instead of top down (outside in).
- Configuring linting with ESLint and Prettier.
- Migrating from Next.js project from app directory to src directory.
Back-End Development
- Setting up GitHub Actions for CI/CD on cloud.
- Creating modular, reusable actions with the option of skipping e2e tests because they take so long.
- Caching artifacts between workflow runs with timeouts to save time and resources.
- Using Act to test GitHub Actions locally which uses the Docker engine.
- Containerizing Next.js app with Docker.
- Using Docker Compose to run multiple containers and automate long Docker commands.
- Setting up Sanity as a headless CMS.
- Creating schemas for content types.
- Handling content migrations, also known as schema change management.
- Creating fields for content types that refer to other schema types and perform validations such as unique and required.
- Performing GRAPHQL queries to fetch data from Sanity Content Lake.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent