Skip to content
BranchesTags

Repository files navigation

Appriyo Logo Appriyo – Official Website

License: Proprietary Security: Responsible Disclosure PRs: Welcome Issues: Welcome React Tailwind CSS Vite Problem First

Appriyo is a technology-driven problem-solving company helping businesses improve operations through practical software, automation, and digital systems.

👉 Visit Live Website 👈

📋 Table of Contents

🌟 Overview

This repository contains the official website of Appriyo — a student-led technology company focused on solving real-world business problems through practical software solutions, automation, AI integration, and digital systems.

Appriyo does not define itself by a single technology stack.

We focus on:

  • Understanding operational problems
  • Building practical solutions
  • Helping businesses improve efficiency
  • Learning through real-world execution
  • Turning repeated problems into scalable products

Whether the solution requires:

  • Web applications
  • Mobile apps
  • Cross-platform systems
  • Automation workflows
  • AI integrations
  • SaaS platforms

the technology itself is secondary.

The real goal is solving problems.

🎯 Why Appriyo Exists

Appriyo exists because we believe the best way to learn technology and business is by building real systems for real people.

We are currently CSE students building Appriyo to:

  • Gain real-world experience before graduation
  • Build products used by actual users
  • Create a strong portfolio and practical work history
  • Learn teamwork, communication, and execution
  • Generate sustainable income over time
  • Build a long-term technology company from the ground up

For us, success right now means:

  • Real users
  • Real impact
  • Real experience
  • Real learning
  • Sustainable growth

Even a small recurring income before graduation is considered meaningful progress.

🧠 Core Philosophy

Principle Meaning
Problem-First We focus on solving problems, not chasing technologies
Practicality Over Complexity Simple systems are often the most effective
Learning Through Execution Real-world work teaches faster than theory alone
Long-Term Thinking We build maintainable systems and sustainable relationships
Technology Agnostic We use whatever technology best solves the problem
Real Value Matters We prioritize usefulness over hype

🎯 Current Focus

For the next 1.5 years, Appriyo is focused on building a strong foundation before graduation.

Our current priorities are:

  • Building practical products
  • Showcasing our work publicly
  • Working with real businesses
  • Acquiring clients
  • Building visibility and trust
  • Improving our technical expertise
  • Learning business operations deeply
  • Creating recurring income streams

Right now, we intentionally offer a broader range of services because we are still learning, experimenting, and discovering where our strongest long-term expertise will be.

Over time, Appriyo will naturally specialize based on:

  • Experience
  • Client demand
  • Market opportunities
  • Team expertise
  • Real-world execution

🧩 Website Sections

Section Description
Hero Problem-solving focused company positioning
Services Software, automation, AI integration, and digital systems
Products SaaS products built from real operational problems
Why Appriyo Philosophy, approach, and long-term thinking
Our Process How we understand and solve business problems
About Team, mission, and company direction
Contact Communication and consultation pathways
Footer Legal, social, and company information

💼 Core Services

Appriyo focuses on solving operational and workflow problems using technology.

1. Custom Software Development

We build systems tailored to specific business operations.

Examples:

  • Internal management systems
  • Tracking platforms
  • Workflow systems
  • Operational dashboards

2. Web & Mobile Applications

We build:

  • Websites
  • Web apps
  • Android applications
  • Cross-platform systems

when they directly improve business operations or user workflows.

3. Business Automation

We help businesses reduce repetitive manual work through:

  • Reminder systems
  • Smart workflows
  • Automated tracking
  • Notification systems
  • Operational automation

4. AI Integration & AI-Assisted Systems

We integrate AI where it creates real practical value.

Examples:

  • AI-assisted workflows
  • AI-powered tools
  • Smart operational systems
  • Productivity-enhancing AI features

5. SaaS Product Development

We convert repeated business problems into reusable software products.

Our long-term goal is building scalable SaaS systems based on real operational pain points.

❌ What We Avoid

Appriyo does NOT focus on:

  • Building unnecessary complexity
  • Chasing every technology trend
  • Taking low-value freelance work
  • Overpromising expertise
  • Purely aesthetic projects without practical value
  • Technology-first development without real business impact

🚀 Product Strategy

We believe great products come from real-world operational problems.

Current products include:

Product Description
Amar Repair Repair store management system
Amar Batch Teacher and batch management system

More products will evolve naturally from:

  • Client work
  • Operational pain points
  • Real user feedback
  • Repeated workflow problems

Product Philosophy

Build → Test → Learn → Improve

We focus on:

  • Real users
  • Real workflows
  • Real operational improvements

instead of assumptions.

🛠 Tech Stack

Technology Purpose
React 18 Frontend UI library
Vite Development & build tooling
Tailwind CSS Utility-first styling
DaisyUI Component system
react-i18next / i18next Internationalisation runtime
i18next-browser-languagedetector Browser language + storage detection
JavaScript (ES6+) Core application language
HTML5 & CSS3 Base frontend structure

Engineering Philosophy

The technology stack may evolve over time.

We choose tools based on:

  • Problem requirements
  • Scalability
  • Maintainability
  • Development speed
  • Practicality

🚀 Getting Started

Prerequisites

  • Node.js (v18 or higher)
  • npm / yarn / pnpm

Installation

# Clone the repository
git clone https://github.com/Appriyo/appriyo-website.git

# Navigate to project directory
cd appriyo-website

# Install dependencies
npm install

# Start development server
npm run dev

The application will run on:

http://localhost:5173

Production Build

npm run build
npm run preview

🌍 Internationalization (i18n)

The site is bilingual today (English + Bangla) and the i18n layer is designed for production scale — adding a third language is a config-only change, switching languages has no flash of untranslated UI, and every public string is sourced from a typed translation file.

Stack

Package Role
i18next Translation runtime and resource container.
react-i18next React bindings (useTranslation, Trans, hooks).
i18next-browser-languagedetector Reads preferred language from localStorage → navigator.language → English fallback.

Runtime behaviour

  • Default language: en. Supported: en, bn.
  • Detection order: localStorage (appriyo:language:v1) → navigator.language → DEFAULT_LANGUAGE.
  • Persistence: every setLanguage(...) call writes the active code to localStorage. The same key is read on the next page load to avoid a one-frame fallback-language flash.
  • HMR: editing any file under src/locales/** re-applies the bundle and forces React to re-render — no reload required.
  • <html lang> and <html dir>: updated synchronously on languageChanged, sourced from the per-language config so adding an RTL language is a one-line change.
  • <title> and <meta>: updated by usePageMeta with both a re-render effect and an i18n.on("languageChanged", …) listener, so meta keeps in sync even when nothing in the tree re-renders.

Folder layout

src/
├── i18n/
│   ├── config.js            # SUPPORTED_LANGUAGES, NAMESPACES, NAMESPACE_TO_FOLDER
│   ├── loadResources.js     # import.meta.glob → i18next resources
│   ├── useLanguage.js       # useTranslation wrapper + setLanguage
│   ├── hooks.js             # Public barrel — import { useLanguage } from "@/i18n/hooks"
│   └── index.js             # Single init entry, imported once from main.jsx
│
└── locales/
    ├── en/                  # One folder per namespace, mirrors NAMESPACES + NAMESPACE_TO_FOLDER
    │   ├── common/common.json
    │   ├── navigation/navigation.json
    │   ├── layout/layout.json
    │   ├── home/home.json
    │   ├── services/services.json
    │   ├── solutions/solutions.json
    │   ├── products/products.json
    │   ├── product-detail/product-detail.json        # Folder name is kebab-case, namespace name is camelCase
    │   ├── about/about.json
    │   ├── contact/contact.json
    │   ├── metadata/metadata.json                    # Source of truth for <title> + <meta description>
    │   ├── legal/legal.json
    │   ├── errors/errors.json
    │   └── index.js                                  # Explicit imports for editor tooling
    └── bn/                  # Same structure, Bangla translations

The metadata namespace is the single source of truth for SEO: every page uses usePageMeta({ titleKey, descriptionKey }) so the <title> and <meta name="description"> automatically translate.

Adding a new language

  1. Copy the folder. cp -r src/locales/en src/locales/<code> and translate every JSON. Empty objects are fine for placeholders — i18next falls back to English until translated.

  2. Register the language. Add an entry to SUPPORTED_LANGUAGES in src/i18n/config.js:

    {
  code: "ar",
  label: "Arabic",
  nativeLabel: "العربية",
  dir: "rtl",        // ← "rtl" for Arabic, Hebrew, Urdu, …
  flag: "🇸🇦",
}

  3. (Optional) Editor imports. Add an explicit src/locales/<code>/index.js so editors surface individual files in "Find references".

The runtime picks it up automatically — import.meta.glob in loadResources.js discovers the new JSON files, the parity check verifies they're in lockstep with en/, and the LanguageSwitcher renders the new option without any other change.

Adding a new namespace

  1. Register the namespace name in NAMESPACES (camelCase — e.g. productDetail).
  2. Add the matching on-disk folder to NAMESPACE_TO_FOLDER. Use kebab-case for the folder name (product-detail) when the URL slug would too.
  3. Create src/locales/<lng>/<folder>/<folder>.json for every supported language.
  4. Read with const { t } = useLanguage("<namespace>") from src/i18n/hooks.

Translation guidelines

  • Keys are dotted. t("home.hero.headline") looks up home → hero → headline. The i18next config swaps keySeparator and nsSeparator so the prefix is the namespace and the suffix is the nested path.
  • Namespaces match folders. The on-disk folder for a namespace is declared in NAMESPACE_TO_FOLDER; never guess. The folder and the JSON filename must match.
  • No HTML in translations. Strings are rendered into the DOM as text. Use react-i18next <Trans> if you really need inline markup (the codebase currently doesn't).
  • Interpolation. Use {name}-style tokens that match keys passed to t(key, { name: ... }). Escape braces with '{' '{'.
  • URLs don't belong in JSON. Routes are language-independent; put them in a sibling src/data/*.js module (see src/data/homeCtas.js for the home hero CTA URLs).
  • Plurals. Use i18next's _one / _other suffix when the count varies, and look up with t("key", { count: n }).
  • Empty keys. Leave the value empty ("") if you have no translation yet; the missingKeyHandler will warn in dev.

RTL readiness

Both supported languages are LTR today, but the plumbing is already in place:

  • SUPPORTED_LANGUAGES carries a dir field per language.
  • main.jsx sets document.documentElement.dir on every language change via getDirFor(code).
  • The LanguageSwitcher shows each option's lang attribute, so screen readers pronounce correctly even for a future Arabic locale.

To verify RTL behaviour without committing a new locale, temporarily edit config.js to add:

{ code: "ar", label: "Arabic", nativeLabel: "العربية", dir: "rtl", flag: "🇸🇦" }

…copy src/locales/en to src/locales/ar, then switch via LanguageSwitcher — the entire layout (including the LanguageSwitcher itself) will reflow RTL because dir on <html> cascades to every descendant.

Usage in components

import { useLanguage } from "../../i18n/hooks";

function Greeting() {
  const { t } = useLanguage("navigation");
  return <h1>{t("navigation.home")}</h1>;
}
import { useLanguage } from "../../i18n/hooks";
import LanguageSwitcher from "../../components/ui/LanguageSwitcher";

function HeaderActions() {
  const { language, setLanguage } = useLanguage();
  return (
    <>
      <LanguageSwitcher />
      <button onClick={() => setLanguage("bn")}>Use Bangla</button>
    </>
  );
}

The included LanguageSwitcher is a self-contained dropdown that lists every language in SUPPORTED_LANGUAGES, persists the choice, owns click-outside / Escape behaviour, and announces the active option via aria-selected. Drop it into Nav, Footer, or a settings menu as-is.

Accessibility

  • The skip-link label is in the layout namespace and updates on language change.
  • Every <input> in ContactForm and the home Contact section has a properly-associated <label> from translation.
  • The LanguageSwitcher uses role="listbox" with aria-selected on options, and sets lang on each option's content so screen readers pronounce correctly.
  • <html lang> is kept in sync; screen readers (VoiceOver, NVDA, JAWS) switch pronunciation profiles automatically.

Testing i18n

# Static checks — parity + duplicate keys + on-disk folder mapping.
npm run i18n:check

# End-to-end Puppeteer sweep across every public route × 2 languages
# (asserts <html lang>, <h1>, <title>, no missing-key warnings).
# Requires the prod build (npm run build) and a working Puppeteer install.
npm run i18n:browser

The browser test loads every route with each language set in localStorage and asserts that the page renders, <html lang> matches, and the <h1> includes Bangla characters. Run it in CI to catch "translation drifted" regressions.

metadata namespace — the SEO source of truth

Every page calls usePageMeta({ titleKey, descriptionKey }) with keys from metadata.*. The hook resolves the keys via i18next and updates <title>, <meta name="description">, <meta property="og:title">, and <meta property="og:image"> on mount and on languageChanged. Adding a new translatable page means adding a single entry under src/locales/<lng>/metadata/metadata.json — no other config needed.

📁 Project Structure

appriyo-website/
│
├── docs/
│   ├── 01-foundation/
│   ├── 02-product/
│   ├── 03-engineering/
│   ├── 04-operations/
│   ├── 05-legal/
│   └── 06-company/
│
├── public/
│   ├── images/
│   ├── icons/
│   └── logo/
│
├── src/
│   ├── components/
│   ├── sections/
│   ├── pages/
│   ├── data/
│   ├── styles/
│   ├── utils/
│   ├── i18n/         # i18next config + loader + hooks
│   ├── locales/      # Translation files, organised per language and namespace
│   └── App.jsx
│
├── .github/
│   ├── ISSUE_TEMPLATE/
│   ├── workflows/
│   ├── CODEOWNERS
│   └── PULL_REQUEST_TEMPLATE.md
│
├── README.md
├── LICENSE.txt
├── TEAMS.md
├── PRIVACY.md
├── TERMS.md
├── SECURITY.md
└── package.json

🎨 Design & UI

Feature Status
Fully Responsive Layout ✅ Complete
Mobile & Tablet Optimization ✅ Complete
Dark / Light Mode ✅ Complete
Clean Typography & Spacing ✅ Complete
Accessibility Improvements 🔄 In Progress
Cross-Browser Compatibility ✅ Complete

Design Goals

The website is designed to communicate:

  • Clarity
  • Simplicity
  • Professionalism
  • Trust
  • Practicality
  • Long-term thinking

The UI intentionally avoids unnecessary complexity or excessive visual noise.

🔧 Planned Improvements

  • Multi-page routing with React Router
  • Dedicated product pages
  • SEO optimization
  • Blog & insights section
  • AI automation case studies
  • Improved animations & transitions
  • Performance optimization
  • Contact form backend integration
  • CMS-powered content management
  • Internationalization infrastructure (i18n runtime in place; per-component translation migration pending)

🤝 Team & Collaboration

Role Team Member Responsibilities
Development & Architecture Shahajalal Mahmud Software architecture, backend systems, technical planning
UI & Frontend Preota Saha UI/UX design, frontend systems, visual consistency
Testing & QA Md Munna Sardar Testing, QA processes, verification
Marketing & Branding Hazera Islam Mim Social media, branding, communication

Team Philosophy

We operate as:

  • A small, focused team
  • Fast learners
  • Builders first
  • Problem-solvers first
  • Long-term thinkers

📍 Company Information

Detail Information
Company Name Appriyo Technologies
Industry Software Solutions & Digital Systems
Location Khulna, Bangladesh
Operating Model Remote-first
Email contact@appriyo.com
Phone +880 1410394038

📚 Documentation

File Description
TEAMS.md Team structure and responsibilities
PRIVACY.md Privacy policy
TERMS.md Terms of service
SECURITY.md Security reporting policy
LICENSE.txt Proprietary licensing

GitHub Templates

Template Purpose
bug_report.md Report bugs
feature_request.md Suggest features
security_vulnerability.md Report vulnerabilities
PULL_REQUEST_TEMPLATE.md PR process and checklist
CODEOWNERS Review ownership configuration

🤝 Contributing

Appriyo is currently maintained by the core internal team.

Internal Contributors

Team members should:

  • Follow coding guidelines
  • Use pull request templates
  • Maintain code quality standards
  • Keep documentation updated

External Contributors

We welcome:

  • Bug reports
  • Security disclosures
  • Feedback
  • Suggestions

Please use the provided GitHub issue templates.

📜 License

Appriyo Proprietary License

Copyright (c) 2026 Appriyo.
All rights reserved.

This repository is proprietary software maintained by Appriyo.

You MAY:
- View the source code for educational purposes
- Fork for personal, non-commercial use

You MAY NOT:
- Use commercially without permission
- Redistribute modified versions
- Rebrand or claim ownership
- Use Appriyo branding without authorization

For licensing inquiries:

contact@appriyo.com

💬 Final Note

Appriyo exists to solve real-world problems, learn through execution, and build sustainable technology products that create practical value.

We are building Appriyo step by step through:

  • Real work
  • Real users
  • Real learning
  • Real execution

Our goal is not simply to build software.

Our goal is to build systems that genuinely improve how businesses operate.

📞 Contact

Platform Link
Website https://appriyo.com
GitHub https://github.com/Appriyo
LinkedIn https://linkedin.com/company/appriyo
Email contact@appriyo.com

Small Team • Real Products • Long-Term Thinking

Building practical technology solutions for real-world business problems.

© 2026 Appriyo Technologies. All rights reserved.

About

Official web presence of Appriyo IT Solutions; a high-performance, component-driven platform showcasing scalable software services and problem-centric digital solutions.

appriyo.com/

Topics

business-websitedaisyuilanding-pagereactsoftware-agencytailwindcss

Resources

Readme
License

Security policy

Security policy
Activity
Custom properties

Stars

1 star

Watchers

0 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages