Skip to content

Web application frontend for managing customers as a contractor.

License

Notifications You must be signed in to change notification settings

yarso-su/cusmer

Repository files navigation

Cusmer - Astro customers manager 🚀

Important

This project started as a learning exercise to explore the Elysia framework on the backend side. Even if it reached production, I wouldn't recommend using it as it is.

Web application for managing customers as an independent contractor. This is the client-side complement to the backend service, forming a complete platform for customer interaction and project management.

The application features a public landing page at the root with full dashboard functionality behind authentication.

Key Features

  • Public landing page with service information
  • Secure authentication and session management
  • Customer dashboard for project and service tracking
  • Real-time support chat with file sharing
  • Stripe payment integration
  • Invoice viewing and management
  • Contract review and signing
  • E2E encrypted credentials vault
  • Project/service status updates
  • Custom notifications system

Note

This is no longer an active project. I invite you to read the LICENSE before using part or all of this project's content. The original repo is still private for security concerns.

Warning

This repository was designed to be deployed on Cloudflare Pages, but you can easily adapt the configuration to deploy it elsewhere.

Technologies

Astro 🌟

This project was built using Astro, a modern web framework focused on content-driven websites with exceptional performance. The combination of static generation with interactive islands makes it perfect for this use case: a landing page with complex authenticated dashboards.

Cloudflare Pages

Originally, the application was designed to be deployed on Cloudflare Pages to leverage their global CDN and edge computing capabilities, achieving minimal latency alongside the backend service deployed on Fly.io.

Other

  • React: For interactive dashboard components.
  • Stripe Elements: Secure payment forms.
  • TypeScript: Type safety across the application.
  • Tailwind CSS: Utility-first styling.

Known Limitations

This is a custom implementation designed to suit specific requirements, so yeah, there are a lot of areas for improvement.

The project structure could be more organized, especially the component hierarchy and state management patterns. Although in its current state, it works as expected for the intended use case.

Warning

Before deploying, you must update the JSON-LD schema in the BaseHead.astro component with your own information, as well as all other meta tags throughout the application. Additionally, update the robots.txt with your sitemap URL, the site.webmanifest with your site details, and the astro.config with your domain configuration.

Warning

You must update the content of the legal files that represent the privacy policies and terms of use with your own legal documents before deploying to production.

Note

Remember to remove all existing assets from the project (images, SVGs, icons) and replace them with your own branding materials.

Note

The global styles and overall design system used in this application are part of a design language I've developed and used across multiple projects, some of which are still active. Please be aware of this to avoid any plagiarism concerns. Additional details will be included in the LICENSE file.

Note

There are comments with an "IMPORTANT" tag that you should check to set some specific hardcoded values in the project.

Environment Variables

  • API_URL: Backend service URL (the monolithic service)
  • STRIPE_PUBLISHABLE_KEY: Stripe publishable key for payment processing

Project Structure

/
├── public/          # Static assets (robots.txt, manifest, etc.)
├── src/
│   ├── components/  # Reusable components
│   ├── layouts/     # Page layouts (including BaseHead)
│   ├── pages/       # File-based routing
│   └── styles/      # Global styles
└── astro.config.mjs # Astro configuration

Getting Started

  1. Clone the repository
  2. Install dependencies: pnpm install
  3. Set up environment variables
  4. Update all configuration files (see warnings above)
  5. Replace assets with your own
  6. Run development server: pnpm dev

License

MIT License.

About

Web application frontend for managing customers as a contractor.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages