Flawk

Full-stack ready for liftoff

---

Strongly opinionated full-stack boilerplate powered by React and Express/Mongoose

 

⚠️ This boilerplate is quite outdated and is missing important documentation. Something like Next.js combined with Next-UI is a much better alternative that includes a lot of the features of this boilerplate

   

Keep in mind that Flawk is not suitable for beginners

• You need to be comfortable with TypeScript, React and Express/Mongoose to use this boilerplate

 

✨ Documentation and Examples: flawk.cakeslice.dev

 

🚀 Features

• Free and open-source with MIT license

• TypeScript based

• Already configured with best pratices:

  • Linting/formatting with ESLint and Prettier
  • Testing with Jest and Cypress
  • Continuous Integration with CircleCI
  • Building and deployment with Docker
  • Error monitoring with Sentry

• Optimized npm scripts for development, building, testing and deploying

• Deploy easily to CapRover with 1-click

• 🖥️ Frontend: /client

  • Built with React, Vite and React Router
  • Style and customize 25+ built-in components with consistency
  • Seamless backend integration
  • Build for iOS and Android with Capacitor
  • Light/Dark mode support across the board
  • Easily setup third-party services:
    • Google Analytics
    • Google Ads
    • Google Recaptcha
    • Stripe checkout

• 🗄️ Backend: /server

  • Built with express and mongoose
  • Built-in security, encryption, validation and compression
  • Easy authentication and permissions
  • Websocket support
  • E-mail, SMS and push notifications
  • Easily setup third-party services:
    • S3 storage
    • SMTP E-mail
    • Logtail
    • Google Recaptcha
    • Vonage SMS
    • Stripe checkout
  • TypeScript interface generation for Mongoose schemas
  • Automatic OpenAPI generation and validation:

     // All objects with this structure are injected in the OpenAPI spec
    const Login = {
      call: "/client/login",
      method: "post",
      description: "Login a user",
      body: {} as {
        email: string; // Required
        password: string; // Required
    	  rememberMe?: boolean; // Optional
      },
    };
    router.postAsync(Login.call, async (req, res) => {
      const body: typeof Login.body = req.body;
    
      //...
    });

 

💾 Setup

• Clone the repo

• To run the project for development:

  • Backend:
    • cd server
    • npm install --force
    • npm run start:dev
    • Note: To run you need this file: server/_env/dev.env
  • Frontend:
    • cd client
    • npm install --force
    • npm run start:dev
    • Note: To run you need this file: client/_env/dev.env
      • You will need a docker container repository to set the DOCKER_IMAGE var in client/_env/build-prod.env

• To deploy:

  • Backend:
    • cd server
    • npm run build_docker:prod
    • Note: To deploy you need this file: server/_env/build-prod.env
      • You will need a docker container repository to set the DOCKER_IMAGE var in server/_env/build-prod.env
      • Also you need to set the env variables in whatever system you're using to run the app based on server/_env/prod.env (for example in the CapRover app)
  • Frontend:
    • cd client
    • npm run build_docker:prod
    • Note: To deploy you need this file: client/_env/prod.env

• VSCode is highly recommended and the following extensions should be installed:

  • ESLint
  • Prettier