Web Evolution

Overview:

Catamyst Web Development Evolution is a project developed by M Haidar Hanif from Catamyst. It is a web application that has evolved over the years, using different technologies. The project covers various stages of web development, from choosing the problem to solve, managing source code with Git and GitHub, designing the UI and UX, writing documentation, creating the structure with HTML, using CSS for styling, implementing interactivity with JavaScript, and utilizing Node.js libraries and its ecosystem. It also explores the use of TypeScript, React, Remix, different types of APIs (REST API, GraphQL, tRPC), and options for database persistence (self-hosted and cloud-hosted).

Features:

• Idea: Choosing the problem to solve
• Repository: Managing source code and versions with Git and GitHub
• Design: Creating sketch/mockup/prototype for UI and UX on Figma
• Documentation: Writing scope or specification with Markdown
• HTML: Creating the structure and deploying it to Vercel and Cloudflare
• CSS: Styling the app and using Tailwind CSS
• JavaScript: Adding interactivity, especially CRUD operations
• Node.js & npm: Utilizing JavaScript libraries and its ecosystem
• TypeScript: Implementing a more type-safe code
• React: Creating a component-based interface/view
• Remix: Building a React app with a client and server model
• API: Handling data requests and responses between client and server using different types of APIs (REST API, GraphQL, tRPC)
• Database: Exploring options for data persistence (self-hosted with Prisma ORM & MySQL on PlanetScale, cloud-hosted with Kontenbase vs Nhost)

Summary:

Catamyst Web Development Evolution is a web application developed by M Haidar Hanif that has evolved over the years. It covers various stages of web development, starting from choosing a problem to solve and managing source code with Git and GitHub. Designing the UI and UX using Figma, and writing documentation with Markdown are important steps in the process. The application structure is created with HTML and styled using Tailwind CSS. JavaScript is used to add interactivity, and Node.js libraries along with TypeScript are employed for building a more type-safe code. React and Remix are utilized to create a component-based interface/view, and different types of APIs (REST API, GraphQL, tRPC) are used for handling data requests and responses between the client and server. The project also explores options for data persistence, either self-hosted with Prisma ORM & MySQL on PlanetScale or cloud-hosted with Kontenbase or Nhost.