No Clocks Frontend

This repository represents the tech stack and architecture for No Clocks frontend development.

Contents

• No Clocks Frontend
  • Contents
  • Introduction
  • Tech Stack
  • Architecture
  • Development
  • Deployment
  • Contributing

Introduction

This repository serves as a foundation for all frontend development at No Clocks, LLC.

Tech Stack

• Remix is the Web Framework of choice for No Clocks. Remix is a full-stack web framework that lets you build web apps with React, server-rendered pages, and a data-fetching layer all in one.
• Static Types are enforced with TypeScript.
• An excellent, customizable component library with Radix UI, a collection of low-level UI components and utility functions for React.
• shadcn/ui is the component library of choice for No Clocks. It is a collection of accessible, reusable, and composable React components.
• Vite is the build tool of choice for No Clocks. It is a fast, opinionated frontend build tool that provides a lightning-fast development experience.
• Storybook is used for component development and documentation.
• Error Monitoring is handled by Rollbar.
• Docker (and Docker Compose) is used for local development, containerization, and deployment.
• Fly.io is used for hosting and deployment.
• GitHub Actions used for CI/CD (testing, linting, and deployment).
• ESLint and Prettier are used for code linting and formatting.
• End-to-end testing is handled by Playwright.
• Unit testing is handled by Vitest and the React Testing Library.
• PNPM is used for package management.

Future additions:

• Database ORM is handled by Prisma.
• Runtime schema validation is handled by Zod
• Jest is used for testing.
• E-commerce functionality is handled by Stripe.

Future Considerations:

• Biome
• Astro

Architecture

The frontend architecture is based on the Remix framework. Remix is a full-stack web framework that lets you build web apps with React, server-rendered pages, and a data-fetching layer all in one.

The frontend is a monolithic application that is split into the following directories and files:

• src/ contains the main source code for the application.
  • app/ contains the main application code.
    • components/ contains the shared components.
    • routes/ contains the routes for the application.
    • styles/ contains the global styles for the application.
    • utils/ contains shared utility functions.
    • entry.client.tsx is the entry point for the client-side code.
    • entry.server.tsx is the entry point for the server-side code.
    • root.tsx is the root component for the application.
  • public/ contains the public assets for the application.
    • favicons/ contains the favicons for the application.
    • img/ contains the images for the application.
    • robots.txt is the robots.txt file for the application.
    • favicon.ico is the favicon for the application.
    • site.webmanifest is the web manifest for the application.
  • types/ contains shared types.
  • hooks/ contains shared hooks.
  • lib/ contains shared utility functions.
  • stories/ contains the stories for the components.
• tests/ contains the tests for the application.
  • e2e/ contains the end-to-end tests for the application.
  • fixtures/ contains the fixtures for the tests.
  • mocks/ contains the mocks for the tests.
  • setup/ contains the setup for the tests.
  • integration/ contains the integration tests for the application.
  • unit/ contains the unit tests for the application.
• docs/ contains the documentation for the application, written in Markdown.
• assets/ contains static, repo-wide assets.
• examples/ contains example code for the application.
• scripts/ contains the scripts for the application.
• config/ contains the configuration for the application.
• .storybook/ contains the Storybook configuration for the application.
• .github/ contains the GitHub Actions configuration for the application.
• .vscode/ contains the Visual Studio Code configuration for the application.

Development

To get started with development, clone the repository and run the following commands:

pnpm install
pnpm dev

This will start the development server at http://localhost:3000.

Deployment

The application is deployed using Fly.io. The deployment process is handled by GitHub Actions.

Contributing

Please read the CONTRIBUTING.md file for more information on how to contribute to this repository.