/techmely

The best things Techmely Team can do!

Primary LanguageDartOtherNOASSERTION

Techmely

Logo

Make your dreams come true easier with Techmely

The open-source Medium, LinkedIn and Udemy.
Learn more »

Discord · Website · Issues · Roadmap

Join Techmely Discord Uptime Github Stars License Commits-per-month Pricing

Business Docs overview

Tech docs overview

This project build with all my loves + the supportive friends, especially my master HieuHani.

Frontend

  • 🧩 Components: Use @techmely/ui packages with Radix UI
  • 🪩 Web: Use Vite & React & Tanstack Query for the Dx perfect
  • Desktop: Build with Tauri
  • Mobile: Use Flutter for performance
  • Leverage Web Assembly and WebGPU to handle 3D models
  • Animation: Using ThreeJs, GSap and Swup for smooth transition/animation

Backend

  • AI: Support GPT models to help user write/copy easier!
  • Use Hono server to create API/Cache/Proxy
  • Database: Use CockroachDB to optimize system cost on FREE-tier
  • Use Stripe for payments, unified API for one-off & subscription billing methods for Stripe
  • Notification: Use PWA to handle Web Push notis, SMS and webhooks
  • Queue: Handle the heavy workload on the background(client/server)
  • Kysely: Query builder powerful, really type-safe
  • Realtime Collaboration: Use CRDT-Driven mindset, and based on BlockSuite to create realtime editing and painting whatever you want!
  • Kibana Search Engine smart searching, advanced filtering & sorting, pagination, headless UI
  • Storage: Use UnStorage for all environments(Browser, Worker)
  • Validation: Use Valibot for validate all the form, schema and whatever we need to validate!
  • Cache: Use BentoCache for mutiple cache layer, like Im-mem cache, redis, DynamoDB, and more—serverless
  • AxiomJs all you need to debug, log & analyze in production

Cloud

  • Server local development server & production-ready servers out-of-the-box
  • Serverless on-demand, auto-scaling, zero maintenance
  • CDN zero-config, low-latency, request life-cycle hooks, optimized request compressions (Brotli & gzip)
  • Domain version-controlled & zero-config domain management (e.g. DNS management)
  • AI fine-tune a foundational model using your application data
  • AWS startup program: Infrastructure as Code version-controlled cloud infrastructure(Up to $100,000 USD AWS Activate credits)

CI/CD

Focus on coding, not publishing.

  • Use Gitops for automating deploy + config with ArgoCD + KubeSphere Container Platform + Helm charts
  • Automatically release process with Github Action
  • Have a lot of Bot/CLI(Rabbit AI, CodeQL, LGTM, KnipJs, BiomeJs...) + Checklist Guideline to help project always in high quality
  • Production deployments—zero-setup push-to-deploy
  • Zero Downtime deploy with confidence using a zero-downtime deployment strategy
  • Release Manager libraries (component & function) auto-published to npm, git helpers, and more

Development Experiences

  • Use techmely CLI write in RUST to automate all the tasks we needs in this project
  • Use Consul for centralize the config & enviroment for cross-team and cross-environment
  • Leverage the UnJs ecosystem to have some incredible features like Auto Import and Framework Agnostic
  • Use Git Workflow + Semantic commit + Rabbit AI to have great commit + review code!
  • Spell checker will notified once there had typos
  • Have a lot of Utilities collections like VueUse and @techmely/utils for handling/transforming data
  • Testing - All feature have Unit + UI + e2e testing(mocking DB)
  • Code Snippets say goodbye to the boilerplate
  • Team Management manage your team & their permissions

This project mainly write with Typescript + Vue + Rust, so you should learn it to contribute easier 🌷

How to run project

  1. Install deps bun install
  2. Run web site + api with command bun run dev
  3. Have fun with that.

How to get the icons for project?

  1. Go to https://icones.js.org/collection/all and search what you needs.
  2. Copy the symbol of icons
  3. If your icon just specific for one page --> Create a list icons for that page in /public/svg folder --> Add page name, EX: post.svg
  4. If your icon is a common icon, can use anywhere in app --> add to the last item on public/svg/common.svg
  5. Use SvgUse component to expose the icon on view

The decided of technical to fit with the business

  1. The width of detail blog post

    • With the research --> We chosen the width is around 70~80 characters depends on the user-device width + The main language is LATIN(Vietnamese + English).
    • So the width is 34rem to 38rem.

    Here is some research paper:

Thirst party API

Deployment

Self-host Docker Deployment

  1. checkout source git clone https://github.com/techmely/techmely.git
  2. got into new source dir: cd tech
  3. build Docker image: docker build .
  4. create local storage directory for settings: mkdir tml-storage
  5. adjust permissions of storage dir: sudo chown 911:911 ./tml-storage
  6. start container: docker-compose up -d
git clone https://github.com/techmely/techmely.git
cd techmely
bun run docker.build # build Docker image for all app
bun run docker.storage # create local storage directory + adjust permissions of storage dir
bun run docker.up # Start container - Enjoy